我通过json(来自mysql)加载我的主网格数据。
我的网格包含订单。每个订单都包含许多项目(订单行)。
我想在加载时查询一个查询中的所有订单行。这些订单行应按订单ID分组。
这就是我想要的: 主网格:每个ID只显示一行(子行中的值总计) 子网格:每个主行上有一个“+”。当我单击它时,子网格出现,显示每个子行
这对jqGrid有可能吗?或者我有对子网格进行额外查询吗?
祝你好运 奥莱
答案 0 :(得分:0)
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'example.php',
datatype: 'xml',
mtype: 'GET',
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:55},
{name:'invdate', index:'invdate', width:90},
{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}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'invid',
sortorder: 'desc',
viewrecords: true,
caption: 'My first grid',
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
// we pass two parameters
// subgrid_id is a id of the div tag created within a table
// the row_id is the id of the row
// If we want to pass additional parameters to the url we can use
// the method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the following
var subgrid_table_id;
subgrid_table_id = subgrid_id+"_t";
jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
jQuery("#"+subgrid_table_id).jqGrid({
url:"subgrid.php?q=2&id="+row_id,
datatype: "xml",
colNames: ['No','Item','Qty','Unit','Total'],
colModel: [
{name:"num",index:"num",width:80,key:true},
{name:"item",index:"item",width:130},
{name:"qty",index:"qty",width:80,align:"right"},
{name:"unit",index:"unit",width:80,align:"right"},
{name:"total",index:"total",width:100,align:"right",sortable:false}
],
height: '100%',
rowNum:20,
sortname: 'num',
sortorder: "asc"
});
}
});
});
</script>
参考:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid_as_grid
答案 1 :(得分:0)
如果您需要显示大约100个订单,特别是如果您使用Chrome等带有快速JavaScript的现代网络浏览器,则可以在客户端上完成所有工作。服务器应该只提供按id排序的所有数据。您可以使用loadonce: true
一次加载所有日期。
我建议你仔细阅读the answer,这是基于之前答案(this one和another one)的想法。我认为它可以解决您的问题。