层级列表

最新推荐文章于 2023-11-30 15:59:21 发布

Deer__青春

最新推荐文章于 2023-11-30 15:59:21 发布

阅读量449

点赞数 2

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/qq_40195958/article/details/96313660

版权

jquery 专栏收录该内容

11 篇文章

订阅专栏

jqGrid 两层级列表结构

<html>
  <head>
    <title>jqGrid 实例</title>
  </head>
  <body>
    ···代码省略···
    <table id="sg3"></table>
    <div id="psg3"></div>
    ···代码省略···
  </body>
</html>

javascript代码举例

$(function(){
  pageInit();
});
//  父级列表
function pageInit(){
  jQuery("#sg3").jqGrid({
       url:ctx+'/JSONData',
    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: '#psg3',
       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",
      // load the subgrid data only once
      // and the just show/hide
      "reloadOnExpand" : false,
      // select the row when the expand column is clicked
      "selectOnExpand" : true
    },
    // 点击展开获取二级列表数据
    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:ctx+"/SubGrid?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("#sg3").jqGrid('navGrid','#psg3',{add:false,edit:false,del:false});

}


注：这里返回的数据类型为分页显示数据
参考地址：http://www.guriddo.net/demo/bootstrap/
				  https://blog.mn886.net/jqGrid/


{
	"rows":[
		{"CustomerID":"ALFKI","CompanyName":"Alfreds Futterkiste","ContactName":"Maria Anders","Phone":"030-0074321","City":"Berlin"},
		{"CustomerID":"ANATR","CompanyName":"Ana Trujillo Emparedados y helados","ContactName":"Ana Trujillo","Phone":"(5) 555-4729","City":"M\u00e9xico D.F."},
		{"CustomerID":"ANTON","CompanyName":"Antonio Moreno Taquer\u00eda","ContactName":"Antonio Moreno","Phone":"(5) 555-3932","City":"M\u00e9xico D.F."},
		{"CustomerID":"BLAUS","CompanyName":"Blauer See Delikatessen","ContactName":"Hanna Moos","Phone":"0621-08460","City":"Mannheim"},
		{"CustomerID":"BLONP","CompanyName":"Blondel p\u00e8re et fils","ContactName":"Fr\u00e9d\u00e9rique Citeaux","Phone":"88.60.15.31","City":"Strasbourg"},
		{"CustomerID":"BONAP","CompanyName":"Bon app'","ContactName":"Laurence Lebihan","Phone":"91.24.45.40","City":"Marseille"},
		{"CustomerID":"BOTTM","CompanyName":"Bottom-Dollar Markets","ContactName":"Elizabeth Lincoln","Phone":"(604) 555-4729","City":"Tsawassen"},
		{"CustomerID":"BSBEV","CompanyName":"B's Beverages","ContactName":"Victoria Ashworth","Phone":"(171) 555-1212","City":"London"},
		{"CustomerID":"CACTU","CompanyName":"Cactus Comidas para llevar","ContactName":"Patricio Simpson","Phone":"(1) 135-5555","City":"Buenos Aires"},
		{"CustomerID":"CHOPS","CompanyName":"Chop-suey Chinese","ContactName":"Yang Wang","Phone":"(5) 555-3392","City":"Bern"}
		
	]
}