如何在分层jqgrid中设置每个级别的背景颜色
How set background color of each level in hierarchical jqgrid
我在我的 asp.net mvc 项目中使用免费的 jqgrid(v5.1.1)。
在我看来，我有 5 级分层 jqgrid。如何设置每个级别 header 的背景颜色？例如，第一层 header 有 "blue" 颜色，第二层有 "green" 颜色，第三层有 "light blue" 颜色和....
这是我的代码：
//************************************fill grid level 1 **********************************
function FillJQueryGrid(ProjectIdVal) {
$("#jqGrid").jqGrid({
url: '@Url.Action("GetCodingCodeSumLists", "Report")' + '?ProjectId=' + ProjectIdVal,// jqgrid_data,
jsonReader: {
repeatitems: false,
root: function (obj) {
return obj.records;
}
},
datatype: "json",
height: 'auto',
page: 1,
colModel: [
{ label: 'Fieco Doc No.', name: 'comp_code', key: true},
{ label: 'Subject', name: 'Comp_Subject' },
{ label: 'Delay', name: 'sum_delay_count' },
],
width:"100%",
loadonce: true,
autowidth: true,
rowNum: 20,
subGrid: true,
subGridRowExpanded: showChildGridrevision,
pager: "#jqGridPager"
});
};
//***********************************fill grid level 2 *******************************************
function showChildGridrevision(parentRowID, parentRowKey) {
var childGridID = parentRowID + "_table";
var childGridPagerID = parentRowID + "_pager";
var childGridURL = '@Url.Action("GetRevisionSumLists", "Report")' + '?CompCode=' + parentRowKey;
$('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');
$("#" + childGridID).jqGrid({
url: childGridURL,
jsonReader: {
repeatitems: false,
root: function (obj) {
return obj.records;
}
},
datatype: "json",
height: 'auto',
width: "100%",
page: 1,
colModel: [
{label:'CompCode_Revision',name:'CompCode_Revision',key:true,hidden:true},
{ label: 'comp_code', name: 'comp_code', hidden: true },
{ label: 'revision', name: 'revision',width:500 },
{ label: 'Delay', name: 'sum_delay_count',width:500 }
],
loadonce: true,
subGrid: true,
subGridRowExpanded: showChildGridTransmital,
pager: "#" + childGridPagerID
});
}
//***********************************fill grid level 3 *******************************************
function showChildGridTransmital(parentRowID2, parentRowKey2) {
debugger;
var childGridID2 = parentRowID2 + "_table";
var childGridPagerID2 = parentRowID2 + "_pager";
var childGridURL2 = '@Url.Action("GetTransmitalSumLists", "Report")' + '?CompCode_Revision=' + parentRowKey2;
$('#' + parentRowID2).append('<table id=' + childGridID2 + '></table><div id=' + childGridPagerID2 + ' class=scroll></div>');
$("#" + childGridID2).jqGrid({
url: childGridURL2,
jsonReader: {
repeatitems: false,
root: function (obj) {
return obj.records;
}
},
datatype: "json",
height:'auto',
page: 1,
colModel: [
{ label: 'CompCode_Revision_Transmital', name: 'CompCode_Revision_Transmital', key: true,hidden:true},
{ label: 'CompCode_Revision', name: 'CompCode_Revision', hidden: true },
{ label: 'transmital no', name: 'trans_ref_no' ,width:200},
{ label: 'transmital subject', name: 'ChkMain_Subject' ,width:400},
{ label: 'transmital date', name: 'trans_date',width:200 },
{ label: 'Delay', name: 'sum_delay_count',width:200 }
],
width:'100%',
loadonce: true,
subGrid: true,
subGridRowExpanded: showChildGridReceiver,
pager: "#" + childGridPagerID2
});
}
//***********************************fill grid level 4 *******************************************
function showChildGridReceiver(parentRowID, parentRowKey) {
debugger;
var childGridID = parentRowID + "_table";
var childGridPagerID = parentRowID + "_pager";
var childGridURL = '@Url.Action("GetReceiverSumLists", "Report")' + '?CompCode_Revision_Transmital=' + parentRowKey;
$('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');
$("#" + childGridID).jqGrid({
url: childGridURL,
jsonReader: {
repeatitems: false,
root: function (obj) {
return obj.records;
}
},
datatype: "json",
page: 1,
colModel: [
{ label: 'CompCode_Revision_Transmital_receiver', name: 'CompCode_Revision_Transmital_receiver', key: true, hidden: true },
{ label: 'receiver_id', name: 'receiver_id',hidden:true },
{ label: 'Receiver Name', name: 'receiver_name',width:500 },
{ label: 'Delay', name: 'sum_delay_count', width: 500 }
],
loadonce: true,
height: '100%',
subGrid: true,
subGridRowExpanded: showChildGridLetter,
pager: "#" + childGridPagerID
});
}
//***********************************fill grid level 5 *******************************************
function showChildGridLetter(parentRowID, parentRowKey) {
debugger;
var childGridID = parentRowID + "_table";
var childGridPagerID = parentRowID + "_pager";
var childGridURL = '@Url.Action("GetLettersOfCodingWithDelayLists", "Report")' + '?CompCode_Revision_Transmital_Receiver=' + parentRowKey;
$('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');
$("#" + childGridID).jqGrid({
url: childGridURL,
jsonReader: {
repeatitems: false,
root: function (obj) {
return obj.records;
}
},
datatype: "json",
page: 1,
colModel: [
{ label: 'DCC_letter_id', name: 'DCC_letter_id', key: true, hidden: true },
{ label: 'CommentLetter No', name: 'Let_no'},
{ label: 'Subject', name: 'Let_subject' ,width:300},
{ label: 'Estimate Date', name: 'estimate_date_of_letter' },
{ label: 'Send Date', name: 'Let_date' },
{ label: 'Delay', name: 'delay_count_of_letter'}
],
loadonce: true,
height: '100%',
subGrid: false,
pager: "#" + childGridPagerID
});
}
首先，我想提一下，没有 免费的 jqGrid v5.1.1。是商业版，你在link下面看到的价格，你在jquery.jqGrid.min.js: "License: http://guriddo.net/?page_id=103334%22". Free jqGrid开头的评论里看到的是jqGrid的alternative fork，我从 2014 年底开始开发，在 "jqGrid" 结束后将分叉重命名为 "Guriddo jqGrid JS".
第二个重要的共同点：重要的是，HTML 页面上没有 id 重复项。因此，应该选择唯一的 id 值。在使用子网格的情况下，如果打开多个子网格，则可以轻松获得 id 重复项。可以通过在所有子网格中使用 idPrefix 以非常简单的方式解决问题。例如你可以使用
idPrefix: parentRowKey + "_" // or parentRowKey2 + "_"
现在谈谈你的主要问题。有很多方法可以使用 background-color 让用户看到网格的层次。例如，每个子网格由两部分组成：td.subgrid-cell 和 td.subgrid-data。可以在 td.subgrid-cell 上设置背景颜色。您将得到如下图所示的结果
还有一个选项是在每个子网格的 header 列上设置背景颜色。结果会像
如果您要使用 free jqGrid，那么您可以使用 labelClasses 属性 of colModel。您只需将 属性 labelClasses: "blue" 添加到 colModel 并定义以下 CSS 规则：
.ui-jqgrid-labels .blue {
background-color: #b3d9ff;
background-image: none;
}
要将 labelClasses: "blue" 选项添加到子网格的所有列，您可以使用子网格的“cmTemplate”选项：
cmTemplate: { labelClasses: "blue" }
subGridRowExpanded 的代码可能如下：
subGridRowExpanded: function (subgridDivId, rowid) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
subgridData = $(this).jqGrid("getLocalRow", rowid).details,
$subgridDataDiv = $("#" + subgridDivId),
$subgridCell = $subgridDataDiv.closest(".subgrid-data").prev(".subgrid-cell");
$subgridCell.addClass("blue"); // set background color on td.subgrid-cell
$subgridDataDiv.append($subgrid);
$subgrid.jqGrid({
idPrefix: rowid + "_",
data: subgridData,
colModel: [
{ name: "c1", label: "Col 1" },
{ name: "c2", label: "Col 2" },
{ name: "c3", label: "Col 3" }
],
cmTemplate: { labelClasses: "blue" }, // set background color on column headers
iconSet: "fontAwesome",
autowidth: true,
autoencode: true,
sortname: "c1"
});
}
需要添加 CSS 规则，如下所示
.ui-jqgrid .ui-subgrid .subgrid-cell.blue {
background-color: #b3d9ff;
background-image: none;
}
查看演示 https://jsfiddle.net/OlegKi/q5j6vnLa/。
如果你必须使用Guriddo的旧jqGrid，那么你不能使用labelClasses，但你可以使用setLabel方法，例如在列 header.
我在我的 asp.net mvc 项目中使用免费的 jqgrid(v5.1.1)。 在我看来，我有 5 级分层 jqgrid。如何设置每个级别 header 的背景颜色？例如，第一层 header 有 "blue" 颜色，第二层有 "green" 颜色，第三层有 "light blue" 颜色和....
这是我的代码：
//************************************fill grid level 1 **********************************
function FillJQueryGrid(ProjectIdVal) {
$("#jqGrid").jqGrid({
url: '@Url.Action("GetCodingCodeSumLists", "Report")' + '?ProjectId=' + ProjectIdVal,// jqgrid_data,
jsonReader: {
repeatitems: false,
root: function (obj) {
return obj.records;
}
},
datatype: "json",
height: 'auto',
page: 1,
colModel: [
{ label: 'Fieco Doc No.', name: 'comp_code', key: true},
{ label: 'Subject', name: 'Comp_Subject' },
{ label: 'Delay', name: 'sum_delay_count' },
],
width:"100%",
loadonce: true,
autowidth: true,
rowNum: 20,
subGrid: true,
subGridRowExpanded: showChildGridrevision,
pager: "#jqGridPager"
});
};
//***********************************fill grid level 2 *******************************************
function showChildGridrevision(parentRowID, parentRowKey) {
var childGridID = parentRowID + "_table";
var childGridPagerID = parentRowID + "_pager";
var childGridURL = '@Url.Action("GetRevisionSumLists", "Report")' + '?CompCode=' + parentRowKey;
$('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');
$("#" + childGridID).jqGrid({
url: childGridURL,
jsonReader: {
repeatitems: false,
root: function (obj) {
return obj.records;
}
},
datatype: "json",
height: 'auto',
width: "100%",
page: 1,
colModel: [
{label:'CompCode_Revision',name:'CompCode_Revision',key:true,hidden:true},
{ label: 'comp_code', name: 'comp_code', hidden: true },
{ label: 'revision', name: 'revision',width:500 },
{ label: 'Delay', name: 'sum_delay_count',width:500 }
],
loadonce: true,
subGrid: true,
subGridRowExpanded: showChildGridTransmital,
pager: "#" + childGridPagerID
});
}
//***********************************fill grid level 3 *******************************************
function showChildGridTransmital(parentRowID2, parentRowKey2) {
debugger;
var childGridID2 = parentRowID2 + "_table";
var childGridPagerID2 = parentRowID2 + "_pager";
var childGridURL2 = '@Url.Action("GetTransmitalSumLists", "Report")' + '?CompCode_Revision=' + parentRowKey2;
$('#' + parentRowID2).append('<table id=' + childGridID2 + '></table><div id=' + childGridPagerID2 + ' class=scroll></div>');
$("#" + childGridID2).jqGrid({
url: childGridURL2,
jsonReader: {
repeatitems: false,
root: function (obj) {
return obj.records;
}
},
datatype: "json",
height:'auto',
page: 1,
colModel: [
{ label: 'CompCode_Revision_Transmital', name: 'CompCode_Revision_Transmital', key: true,hidden:true},
{ label: 'CompCode_Revision', name: 'CompCode_Revision', hidden: true },
{ label: 'transmital no', name: 'trans_ref_no' ,width:200},
{ label: 'transmital subject', name: 'ChkMain_Subject' ,width:400},
{ label: 'transmital date', name: 'trans_date',width:200 },
{ label: 'Delay', name: 'sum_delay_count',width:200 }
],
width:'100%',
loadonce: true,
subGrid: true,
subGridRowExpanded: showChildGridReceiver,
pager: "#" + childGridPagerID2
});
}
//***********************************fill grid level 4 *******************************************
function showChildGridReceiver(parentRowID, parentRowKey) {
debugger;
var childGridID = parentRowID + "_table";
var childGridPagerID = parentRowID + "_pager";
var childGridURL = '@Url.Action("GetReceiverSumLists", "Report")' + '?CompCode_Revision_Transmital=' + parentRowKey;
$('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');
$("#" + childGridID).jqGrid({
url: childGridURL,
jsonReader: {
repeatitems: false,
root: function (obj) {
return obj.records;
}
},
datatype: "json",
page: 1,
colModel: [
{ label: 'CompCode_Revision_Transmital_receiver', name: 'CompCode_Revision_Transmital_receiver', key: true, hidden: true },
{ label: 'receiver_id', name: 'receiver_id',hidden:true },
{ label: 'Receiver Name', name: 'receiver_name',width:500 },
{ label: 'Delay', name: 'sum_delay_count', width: 500 }
],
loadonce: true,
height: '100%',
subGrid: true,
subGridRowExpanded: showChildGridLetter,
pager: "#" + childGridPagerID
});
}
//***********************************fill grid level 5 *******************************************
function showChildGridLetter(parentRowID, parentRowKey) {
debugger;
var childGridID = parentRowID + "_table";
var childGridPagerID = parentRowID + "_pager";
var childGridURL = '@Url.Action("GetLettersOfCodingWithDelayLists", "Report")' + '?CompCode_Revision_Transmital_Receiver=' + parentRowKey;
$('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');
$("#" + childGridID).jqGrid({
url: childGridURL,
jsonReader: {
repeatitems: false,
root: function (obj) {
return obj.records;
}
},
datatype: "json",
page: 1,
colModel: [
{ label: 'DCC_letter_id', name: 'DCC_letter_id', key: true, hidden: true },
{ label: 'CommentLetter No', name: 'Let_no'},
{ label: 'Subject', name: 'Let_subject' ,width:300},
{ label: 'Estimate Date', name: 'estimate_date_of_letter' },
{ label: 'Send Date', name: 'Let_date' },
{ label: 'Delay', name: 'delay_count_of_letter'}
],
loadonce: true,
height: '100%',
subGrid: false,
pager: "#" + childGridPagerID
});
}
首先，我想提一下，没有 免费的 jqGrid v5.1.1。是商业版，你在link下面看到的价格，你在jquery.jqGrid.min.js: "License: http://guriddo.net/?page_id=103334%22". Free jqGrid开头的评论里看到的是jqGrid的alternative fork，我从 2014 年底开始开发，在 "jqGrid" 结束后将分叉重命名为 "Guriddo jqGrid JS".
第二个重要的共同点：重要的是，HTML 页面上没有 id 重复项。因此，应该选择唯一的 id 值。在使用子网格的情况下，如果打开多个子网格，则可以轻松获得 id 重复项。可以通过在所有子网格中使用 idPrefix 以非常简单的方式解决问题。例如你可以使用
idPrefix: parentRowKey + "_" // or parentRowKey2 + "_"
现在谈谈你的主要问题。有很多方法可以使用 background-color 让用户看到网格的层次。例如，每个子网格由两部分组成：td.subgrid-cell 和 td.subgrid-data。可以在 td.subgrid-cell 上设置背景颜色。您将得到如下图所示的结果
还有一个选项是在每个子网格的 header 列上设置背景颜色。结果会像
如果您要使用 free jqGrid，那么您可以使用 labelClasses 属性 of colModel。您只需将 属性 labelClasses: "blue" 添加到 colModel 并定义以下 CSS 规则：
.ui-jqgrid-labels .blue {
background-color: #b3d9ff;
background-image: none;
}
要将 labelClasses: "blue" 选项添加到子网格的所有列，您可以使用子网格的“cmTemplate”选项：
cmTemplate: { labelClasses: "blue" }
subGridRowExpanded 的代码可能如下：
subGridRowExpanded: function (subgridDivId, rowid) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
subgridData = $(this).jqGrid("getLocalRow", rowid).details,
$subgridDataDiv = $("#" + subgridDivId),
$subgridCell = $subgridDataDiv.closest(".subgrid-data").prev(".subgrid-cell");
$subgridCell.addClass("blue"); // set background color on td.subgrid-cell
$subgridDataDiv.append($subgrid);
$subgrid.jqGrid({
idPrefix: rowid + "_",
data: subgridData,
colModel: [
{ name: "c1", label: "Col 1" },
{ name: "c2", label: "Col 2" },
{ name: "c3", label: "Col 3" }
],
cmTemplate: { labelClasses: "blue" }, // set background color on column headers
iconSet: "fontAwesome",
autowidth: true,
autoencode: true,
sortname: "c1"
});
}
需要添加 CSS 规则，如下所示
.ui-jqgrid .ui-subgrid .subgrid-cell.blue {
background-color: #b3d9ff;
background-image: none;
}
查看演示 https://jsfiddle.net/OlegKi/q5j6vnLa/。
如果你必须使用Guriddo的旧jqGrid，那么你不能使用labelClasses，但你可以使用setLabel方法，例如在列 header.