How to show jqGrid subgrid on certain rows only?(如何仅在某些行上显示 jqGrid 子网格?)
问题描述
我使用
我正在尝试以仅在有数据要显示时才显示子网格的方式对其进行修改.换句话说,如果 count >0代码>.从逻辑上讲,我尝试添加一个条件(下面的伪代码,基于前面提到的答案):
原始代码
var gridParams = {数据类型:'本地',数据:myGridData,colNames:['第 1 列','第 2 列'],col型号:[{名称:'col1',宽度:200},{名称:'col2',宽度:200 }],...子网格:真,subGridRowExpanded:函数(subgridDivId,rowId){var subgridTableId = subgridDivId + "_t";$("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");$("#" + subgridTableId).jqGrid({数据类型:'本地',数据:mySubgrids[rowId],colNames:['Col 1','Col 2','Col 3'],col型号:[{名称:'c1',宽度:100},{名称:'c2',宽度:100},{名称:'c3',宽度:100 }],...});}}$("#grid").jqGrid(gridParams);
调整后的代码
var gridParams = {数据类型:'本地',数据:myGridData,colNames:['第 1 列','第 2 列'],col型号:[{名称:'col1',宽度:200},{名称:'col2',宽度:200 }],...}//这里添加的条件如果(计数 > 0){gridParams.subGrid = true;gridParams.subGridRowExpanded = function (subgridDivId, rowId) {var subgridTableId = subgridDivId + "_t";$("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");$("#" + subgridTableId).jqGrid({数据类型:'本地',数据:mySubgrids[rowId],colNames:['Col 1','Col 2','Col 3'],col型号:[{名称:'c1',宽度:100},{名称:'c2',宽度:100},{名称:'c3',宽度:100 }],...});}}$("#grid").jqGrid(gridParams);
但这只是惨败:
这是根本不支持还是我做错了什么?
如果我正确理解了您的问题,那么您想要删除子网格中没有元素的行的+"(展开子网格)图标.在这种情况下,您可以遵循旧答案中描述的旧技巧.您可以添加 loadComplete
句柄,从具有 subGrid: true
选项的网格中删除一些+"图标.您只需要知道网格中没有子网格的所有行的 rowid 并为行做这些
$("#" + rowid + ">td.sgcollapsed").unbind("click").html("");
更新:我发布了 free jqGrid 的修改,其中无需上述技巧即可轻松实现要求.
演示演示了新功能.实施非常简单.它包含 subGridOptions
内的 hasSubgrid
回调.回调有 options
,它是具有属性 rowid
、data
和两个不太重要的属性 iRow
和 的对象>iCol
.演示代码使用 options.data
表示行的数据.仅当输入行的 tax
高于 20 时,演示才会创建子网格.
subGridOptions: {hasSubgrid:函数(选项){return parseFloat(options.data.tax) >20;}}
如果我正确理解您输入数据的格式,您可以在您的情况下使用 mySubgrids[options.data.rowid].length
.
I created a grid with multiple sub-grid levels using jqGrid and with a little help from this answer. Here is what I have currently:
I am trying to modify it in a way to only show the sub grid if there is data to show. In other words if the count > 0
. Logically I tried to add a condition (pseudo code below, based on previously mentioned answer):
Original Code
var gridParams = {
datatype: 'local',
data: myGridData,
colNames: ['Column 1', 'Column 2'],
colModel: [
{ name: 'col1', width: 200 },
{ name: 'col2', width: 200 }
],
...
subGrid: true,
subGridRowExpanded: function (subgridDivId, rowId) {
var subgridTableId = subgridDivId + "_t";
$("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
$("#" + subgridTableId).jqGrid({
datatype: 'local',
data: mySubgrids[rowId],
colNames: ['Col 1', 'Col 2', 'Col 3'],
colModel: [
{ name: 'c1', width: 100 },
{ name: 'c2', width: 100 },
{ name: 'c3', width: 100 }
],
...
});
}
}
$("#grid").jqGrid(gridParams);
Adjusted Code
var gridParams = {
datatype: 'local',
data: myGridData,
colNames: ['Column 1', 'Column 2'],
colModel: [
{ name: 'col1', width: 200 },
{ name: 'col2', width: 200 }
],
...
}
// Condition added HERE
if (count > 0)
{
gridParams.subGrid = true;
gridParams.subGridRowExpanded = function (subgridDivId, rowId) {
var subgridTableId = subgridDivId + "_t";
$("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
$("#" + subgridTableId).jqGrid({
datatype: 'local',
data: mySubgrids[rowId],
colNames: ['Col 1', 'Col 2', 'Col 3'],
colModel: [
{ name: 'c1', width: 100 },
{ name: 'c2', width: 100 },
{ name: 'c3', width: 100 }
],
...
});
}
}
$("#grid").jqGrid(gridParams);
but that just fails miserably:
Is this simply not supported or I am doing something wrong?
If I correctly understand your question then you want to remove "+" (expand subgrid) icon for rows which have no elements in the subgrid. In the case you can follow the old trick described in the old answer. You can add loadComplete
handle which removes some "+" icons from the grid having subGrid: true
option. You need just know rowids of all rows of the grid which have no subgrid and do for the rows
$("#" + rowid + ">td.sgcollapsed").unbind("click").html("");
UPDATED: I posted the modification of free jqGrid which allows easy implement the requirement without the above hack.
The demo demonstrates the new feature. The implementation is very easy. It contains hasSubgrid
callback inside of subGridOptions
. The callback have options
which is object with the properties rowid
, data
and two less important properties iRow
and iCol
. The code of the demo uses options.data
which represent the data of the row. The demo creates subgrid only if input row have tax
higher as 20.
subGridOptions: {
hasSubgrid: function (options) {
return parseFloat(options.data.tax) > 20;
}
}
You can use mySubgrids[options.data.rowid].length
in your case, if I correctly understand the format of your input data.
这篇关于如何仅在某些行上显示 jqGrid 子网格?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:如何仅在某些行上显示 jqGrid 子网格?
基础教程推荐
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 直接将值设置为滑块 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01