Jqgrid Towtable

2020/06/15

layout: post title: jqgrid 两级表格 no-post-nav: true category: js tags: [js] excerpt: 两级表格 —

jqgrid多级表格

let _width = $(window).width() - 44;
let _height = $(window).height() - 109;
jQuery("#list").jqGrid(
	{
		url:url,
		datatype : "json",
		height: _height,
		width:_width,
		// autowidth:true,
		shrinkToFit:true,
		multiselect: true,//复选框 
		colModel: [
			{ label: 'id', name: 'id',key:true, width: 100,hidden:true },
			{ label: '名称', name: 'name',  width: 100, sortable: false }
		],
		viewrecords:true,
		hidegrid:false,
		rownumbers: false,  
		rowNum:-1,
		onSelectRow : function(code) {
		},
		subGrid: true,//开启子表格支持 
        //子表格的id;当子表格展开的时候,在主表格中会创建一个div元素用来容纳子表格,subgrid_id就是这个div的id
        subGridRowExpanded: function (subgrid_id, row_id) {//子表格容器的id和需要展开子表格的行id
        	var subgrid_table_id;  
            subgrid_table_id = subgrid_id + "_t";   // (3)根据subgrid_id定义对应的子表格的table的id  
            // (5)动态添加子报表的table和pager   
            $("#" + subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");  
            // (6)创建jqGrid对象   
            $("#" + subgrid_table_id).jqGrid({  
                url:路径,  // (7)子表格数据对应的url,注意传入的contact.id参数  
                datatype: "json",  
                colModel: [
        			{ label: 'id', name: 'id',key:true, width: 100,hidden:true },
        			{ label: '名称', name: 'name',  width: 150, sortable: false }		
        		],
                jsonReader: {   // (8)针对子表格的jsonReader设置  
                    root:"gridModel",  
                    records: "record",  
                    repeatitems : false  
                },  
                postData: {"mainId":row_id},//传参
                prmNames: {search: "search"},  
                viewrecords: true,  
                height: "100%",  
                rowNum:-1,
           });  
       },           
		postData: {"mainIds":mainIds}, //传参
		loadui: "disable",
		loadComplete: function (data) {
	
		}
	});

Post Directory