如何在层次结构jqgrid中设置每个级别的背景颜色
我在我的asp.net mvc项目中使用了免费的jqgrid（v5.1.1）。 在我看来，我有5级分层jqgrid。如何设置每个级别标题的背景颜色？例如，第一级的标题具有“蓝色”颜色，第二级具有“绿色”颜色，第三级具有“浅蓝色”颜色和....
这是我的代码：
//************************************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
});
}
1 个答案:
答案 0 :(得分：0)
首先，我要提一下，没有 free jqGrid v5.1.1。它是商业版，您可以在链接下看到这个价格，您可以在jquery.jqGrid.min.js："License: http://guriddo.net/?page_id=103334%22"开头的评论中看到。 Free jqGrid是jqGrid的替代fork ，我从2014年底开始，在＃34; jqGrid＆＃34;结束后开发。并将fork重命名为＆＃34; Guriddo jqGrid JS＆＃34;。
第二个重要的共同点：重要的是，HTML页面上没有 id duplicates 。因此，应该选择唯一的id值。在使用子网格的情况下，如果打开多个子网格，则可以轻松获得id重复。通过在所有子网格中使用idPrefix，可以非常简单地解决问题。例如，您可以使用
idPrefix: parentRowKey + "_" // or parentRowKey2 + "_"
现在谈谈你的主要问题。有许多方法可以使用background-color来允许用户查看网格的级别。例如，每个子网格由两部分组成：td.subgrid-cell和td.subgrid-data。可以在td.subgrid-cell上设置背景颜色。您将得到如下图所示的结果
还有一个选项是在每个子网格的列标题上设置背景颜色。结果将像
如果您使用free jqGrid，则可以使用labelClasses的{{1}}属性。您只需将属性colModel添加到labelClasses: "blue"并定义以下CSS规则：
colModel要将.ui-jqgrid-labels .blue {
background-color: #b3d9ff;
background-image: none;
}
选项添加到子网格的所有列，您可以使用子网格的`cmTemplate``选项：
labelClasses: "blue" cmTemplate: { labelClasses: "blue" }
的代码如下：
subGridRowExpanded需要添加CSS规则，如下所示
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"
});
}
请参阅演示https://jsfiddle.net/OlegKi/q5j6vnLa/。
如果你必须使用Guriddo的旧jqGrid，那么你就不能使用.ui-jqgrid .ui-subgrid .subgrid-cell.blue {
background-color: #b3d9ff;
background-image: none;
}
，但是你可以使用labelClasses方法在列标题上指定类。< / p>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？