如何在jqgrid中填充列表json列表?列表下的主网格列表是针对子网格的,
Jqgrid代码如下,
jQuery("#sg1").jqGrid({
url: 'server.php?q=1',
datatype: "json",
height: 190,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [{
name: 'id',
index: 'id',
width: 55
}, {
name: 'invdate',
index: 'invdate',
width: 90
}, {
name: 'name',
index: 'name',
width: 100
}, {
name: 'amount',
index: 'amount',
width: 80,
align: "right"
}, {
name: 'tax',
index: 'tax',
width: 80,
align: "right"
}, {
name: 'total',
index: 'total',
width: 80,
align: "right"
}, {
name: 'note',
index: 'note',
width: 150,
sortable: false
}],
rowNum: 8,
rowList: [8, 10, 20, 30],
pager: '#psg1',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
multiselect: false,
subGrid: true,
caption: "Custom Icons in Subgrid", // define the icons in subgrid
subGridOptions: {
"plusicon": "ui-icon-triangle-1-e",
"minusicon": "ui-icon-triangle-1-s",
"openicon": "ui-icon-arrowreturn-1-e"
},
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
jQuery("#" + subgrid_table_id).jqGrid({
url: "subgrid.php?q=2&id=" + row_id,
datatype: "json",
colNames: ['No', 'Item', 'Qty', 'Unit', 'Line Total'],
colModel: [{
name: "num",
index: "num",
width: 80,
key: true
}, {
name: "item",
index: "item",
width: 130
}, {
name: "qty",
index: "qty",
width: 70,
align: "right"
}, {
name: "unit",
index: "unit",
width: 70,
align: "right"
}, {
name: "total",
index: "total",
width: 70,
align: "right",
sortable: false
}],
rowNum: 20,
pager: pager_id,
sortname: 'num',
sortorder: "asc",
height: '100%'
});
jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, {
edit: false,
add: false,
del: false
})
}
});
jQuery("#sg1").jqGrid('navGrid', '#psg1', {
add: false,
edit: false,
del: false
});
列表json的示例列表如下
[{
"id": "01",
"name": "AA",
"age": "29",
"subData": [{
"id": "01",
"name": "AA",
"age": "29"
}, {
"id": "02",
"name": "BB",
"age": "30"
}, {
"id": "03",
"name": "CC",
"age": "31"
}, {
"id": "04",
"name": "DD",
"age": "32"
}]
}, {
"id": "02",
"name": "BB",
"age": "30",
"subData": [{
"id": "01",
"name": "AA",
"age": "29"
}, {
"id": "02",
"name": "BB",
"age": "30"
}, {
"id": "03",
"name": "CC",
"age": "31"
}, {
"id": "04",
"name": "DD",
"age": "32"
}]
}, {
"id": "03",
"name": "CC",
"age": "31",
"subData": [{
"id": "01",
"name": "AA",
"age": "29"
}, {
"id": "02",
"name": "BB",
"age": "30"
}, {
"id": "03",
"name": "CC",
"age": "31"
}, {
"id": "04",
"name": "DD",
"age": "32"
}]
}, {
"id": "04",
"name": "DD",
"age": "32",
"subData": [{
"id": "01",
"name": "AA",
"age": "29"
}, {
"id": "02",
"name": "BB",
"age": "30"
}, {
"id": "03",
"name": "CC",
"age": "31"
}, {
"id": "04",
"name": "DD",
"age": "32"
}]
}]
Jqgrid给出了基于url的抓取数据然后如何将列表列表放到子网格中?请帮帮我.....
答案 0 :(得分:1)
有多种方法可以实现您的要求。例如,The answer描述了如何根据每个项目的userdata
部分填充beforeProcessing
subData
内部{{1}}。我建议您另外阅读the answer,这似乎可以使您的数据可视化对用户来说更加舒适。