在asp.net Web应用程序中替换jqgrid的行颜色 [英] change row colors of jqgrid alternatively in asp.net web application
本文介绍了在asp.net Web应用程序中替换jqgrid的行颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要自定义我的jquery网格数据行的颜色。
我实现了以下代码，但它没有影响。
每当我更改ui-widget-content时，它会影响整个应用程序。
然后如何自定义jquery网格的颜色不改变jquery-ui.css
（这是我试过的代码。）。
i没有得到总行数。它始终显示为0。
Hi,
i wanted customize the colors of my jquery grid data rows alternatively.
I implemented the following code however its not effecting.
Whenever i change the "ui-widget-content" it effecting throughout my application.
Then how to customize the colors of jquery grid without changing the jquery-ui.css
(This the code i tried.).
i am not getting total row count. It always showing '0'.
<<<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jsonImp.aspx.cs" Inherits="jqgridStaticDataSatckOverFlowP.jsonImp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<link href="Scripts/tonytomov-jqGrid-1b4abea/css/ui.jqgrid.css" rel="stylesheet"
type="text/css" />
<script src="Scripts/tonytomov-jqGrid-1b4abea/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="Scripts/tonytomov-jqGrid-1b4abea/js/minified/jquery.jqGrid.min.js" type="text/javascript"></script>
<link href="Scripts/tonytomov-jqGrid-1b4abea/css/jquery-ui.css" rel="stylesheet"
type="text/css" />
<script src="Scripts/tonytomov-jqGrid-1b4abea/js/minified/jquery-ui.min.js" type="text/javascript"></script>
<link href="Scripts/myCustom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/json2.js" type="text/javascript"></script>
<script type="text/css">
.rowDataSample
{
border: 1px solid #dddddd;
background: red url(images/ui-bg_highlight-soft_100_red_1x100.png) 50% top repeat-x;
color: #333333;
}
</script>
<script type="text/javascript">
$(document).ready(function () {
//$('#submit').click(function () {
$('#list').jqGrid({
datatype: function (postdata) {
var params = new Object();
params.page = postdata.page;
params.pageSize = postdata.rows;
params.sortIndex = postdata.sidx;
params.sortDirection = postdata.sord;
params.total = postdata.total;
$.ajax({
url: 'jsonImp.aspx/GetData',
type: 'POST',
data: JSON.stringify(params),
contentType: "application/json; charset=utf-8",
error: function (data, textStatus) {
alert('Error loading json');
},
success: function (data, st) {
if (st == 'success') {
var grid = $("#list");
var gridData = JSON.parse(data.d);
var total = gridData.length;
grid.clearGridData();
for (var i = 0; i < params.pageSize; i++) {
grid.addRowData(i + 1, gridData[i]);
// alert(gridData[i]);
if (i % 2 == 1) {
// alert(i);
grid.removeClass('ui-widget-content');
grid.addClass('rowDataSample');
}
}
}
}
});
},
colNames: ['EmployeeId', 'EmployeeName', 'ContactNumber'],
colModel: [
{ name: 'EmployeeId', index: 'EmployeeId', formatter: 'number', width: 90, align: 'center', sorttype: 'EmployeeId'
},
{ name: 'EmployeeName', index: 'EmployeeName', width: 105, align: 'right' },
{ name: 'ContactNumber', index: 'ContactNumber', formatter: 'number', width: 95, align: 'right' }
],
pager: "#pager",
caption: 'Employee Details',
height: 150,
width: 550,
rowNum: 10,
rowList: [10, 20, 30],
rownumWidth: 40,
sortorder: 'asc',
loadonce: true,
viewRecords: true,
jsonReader: {
// root: "Rows",
page: "totalpages",
total: "Total",
records: "totalrecords",
repeatitems: false
// id: "ProductID"
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<center>
<table id="list">
</table>
<div id="pager">
</div>
</center>
</form>
</body>
</html>
推荐答案
（document）.ready（function（）{
//
(document).ready(function () { //
（'＃submit'）。click（function（）{
('#submit').click(function () {
（'#list'）。jqGrid（{
datatype： function（postdata）{
var params = new Object（）;
params.page = postdata.page;
params.pageSize = postdata.rows;
params.sortIndex = postdata .sidx;
params.sortDirection = postdata.sord;
params.total = postdata.total;
('#list').jqGrid({ datatype: function (postdata) { var params = new Object(); params.page = postdata.page; params.pageSize = postdata.rows; params.sortIndex = postdata.sidx; params.sortDirection = postdata.sord; params.total = postdata.total;
这篇关于在asp.net Web应用程序中替换jqgrid的行颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
