Jquery 来自与主网格相同数据的子网格

我通过json（从mysql）加载主网格数据

我的网格由订单组成。每个订单包含多个项目（订单行）

我想在加载时在一个查询中查询所有订单行。这些订单行应按订单id分组

这就是我想要的： 主网格：每个id只显示一行（子行中的值的总数） 子网格：每一行上都有一个“+”。当我单击它时，子网格出现，显示每个子行

这在jqGrid中是可能的吗？或者我必须对子网格进行额外的查询吗

致意 Ole

jQuery（文档）.ready（函数（）{
jQuery（“#list”）.jqGrid({
url:'example.php'，
数据类型：“xml”，
mtype:'获取'，
colNames:['Inv No'，'Date'，'Amount'，'Tax'，'Total'，'Notes']，
colModel:[
{名称：'invid'，索引：'invid'，宽度：55}，
{名称：'invdate'，索引：'invdate'，宽度：90}，
{名称：'amount'，索引：'amount'，宽度：80，对齐：'right'}，
{名称：'tax'，索引：'tax'，宽度：80，对齐：'right'}，
{名称：'total'，索引：'total'，宽度：80，对齐：'right'}，
{名称：'note'，索引：'note'，宽度：150，可排序：false}
],
寻呼机：“#寻呼机”，
rowNum:10，
行列表：[10,20,30]，
sortname:'因维德'，
排序器：“desc”，
viewrecords：是的，
描述：“我的第一个网格”，
子网格：对，
subGridRowExpanded:函数（subgrid\u id，row\u id）{
//我们传递两个参数
//subgrid_id是在表中创建的div标记的id
//row\u id是该行的id
//如果我们想向url传递额外的参数，我们可以使用
//方法getRowData（row_id）-返回类型名称值中的关联数组
//在这里，我们可以简单地构造以下内容
var子网格\u表\u id；
子网格\表\ id=子网格\ id+“\ t”；
jQuery（“#”+子网格id）.html（”；
jQuery（“#”+子网格_表_id）.jqGrid({
url:“subgrid.php？q=2&id=“+row\u id，
数据类型：“xml”，
colNames:['No'，'Item'，'Qty'，'Unit'，'Total']，
colModel：[
{name:“num”，index:“num”，宽度：80，键：true}，
{名称：“项”，索引：“项”，宽度：130}，
{名称：“数量”，索引：“数量”，宽度：80，对齐：“右”}，
{名称：“单位”，索引：“单位”，宽度：80，对齐：“右”}，
{name:“total”，index:“total”，width:100，align:“right”，sortable:false}
],
高度：“100%”，
rowNum:20，
sortname:'num'，
分拣员：“asc”
});
}
}); 
}); 

---

参考资料：

如果您需要显示大约100份订单，特别是如果您使用Chrome等现代网络浏览器和quick JavaScript，您可以在客户端完成所有工作。服务器应该只提供按id排序的所有数据。您可以使用

loadonce:true

一次加载所有日期

---

我建议你仔细阅读，这是基于以前的答案（和）的想法。我认为它可以解决您的问题。

您需要显示多少订单？订单数量是100个左右，1000个左右，10000个或更多？哪个web浏览器（以及哪个版本）是您需要支持的主web浏览器。如果订单数量不是那么多，用户可以在客户端完成大部分工作，并从服务器一次返回所有订单。大约100个订单。每个都有大约1-10个订单行。我的主浏览器是Chrome（最新版本）。我想在客户端完成这项工作：加载所有数据并在主网格和子网格中分发数据。这使用两种不同的数据库查询，对吗？（'example.php'和'subgrid.php'）感谢您的回答。我会调查的。现在我将使用两个不同的查询。这对我也不管用！！！请参阅我在此处的其他帖子，以便：

<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>