jqGrid笔记

jqGrid笔记
api网站链接：https://blog.mn886.net/jqGrid/
1. get
1.1 获取所有数据

$("#jqGrid").getRowData();

1.2 获取所有id

var ids = $('#jqGrid').getDataIDs();

1.3 获取第一行

var rowData = $("#jqGrid").getRowData(ids[0]);

1.4 获取指定行

var rowData = $("#jqGrid").jqGrid('getRowData',id);

1.5 获取选中行数据

var id = $("#jqGrid").jqGrid("getGridParam", "selrow");  
var rowData = $('#jqGrid').jqGrid('getRowData',id);
rowData.status;  //获取指定字段

2. 查询

$("#jqGrid").jqGrid({
	url : '${ctx}/queryTableList',
	postData : {
		idpath : idpath
	},
	mtype : "POST",
	styleUI : 'Bootstrap',
	datatype : "json",
	cache : false,
	colModel : 
		[ 
		  {label : '',name : 'id',hidden : true},
          {label : '收入方',name : 'corgname',width : 150,formatter:function(cellvalue){return "";}}
	    ],
	rownumbers:true, //true 显示行号
	multiselect : false,
	viewrecords : true,//是否显示行数 
	height : "auto",
	autowidth : true,
	shrinkToFit : true,
	rowNum : 10,
	autoScroll : false,
	rowList : [ 10, 20, 30 ],//可调整每页显示的记录数 
	pager : "#jqGridPager", //分页工具栏  
	pagerpos : 'left'
});

3. 嵌套子表格

function queryTable() {
	$("#jqGrid").jqGrid({
		url : '${ctx}/income',
		postData : {
			startDate : start,
			endDate : end
		},
		mtype : "POST",//ajax的提交方式，默认是get
		styleUI : 'Bootstrap',
		datatype : "json",//服务端返回的类型
		cache : false,
		colModel : 
			[ 
			  {label : '',name : 'id',hidden : true},
              {label : '收入方',name : 'orgname',width : 150}
		    ],
		multiselect : false,
		subGrid : true,//开启子表格支持
		subGridRowExpanded : function(subgrid_id, row_id) {
			//子表格容器的id和需要展开子表格的行id
			openSubGrid(subgrid_id, row_id);
		},
		viewrecords : true,//是否显示行数 
		height : "auto",
		beforeRequest : function() {
			$.ajax({
				url : "${ctx}/dictionary/paymentMethod",
				type : "get",
				data : {
				},
				async : false,
				dataType : "json",
				success : function(data) {
					console.log(data);
				},
				error : function(data) {
				}
			});
		},
		autowidth : false,
		shrinkToFit : true,
		rowNum : 10,
		autoScroll : false,
		rowList : [ 10, 20, 30 ],//可调整每页显示的记录数 
		pager : "#jqGridPager", //分页工具栏  
		pagerpos : 'left'
	});
}

function openSubGrid(subgrid_id, rowid) {//开启子表格
	var subgrid_table_id = subgrid_id + "_t";//获取子表格的id
	var subgrid_paper_id = subgrid_id + "_pgr";//获取子表格的paper的id
	//动态添加子报表的id和paper
	$("#" + subgrid_id).html("");
	$("#" + subgrid_table_id).jqGrid({
		url : '${ctx}/incomeDetail',
		postData : {
			id : rowid
		},
		mtype : "POST",
		styleUI : 'Bootstrap',
		datatype : "json",
		cache : false,
		colModel : 
			[ 
	            {label : '',name : 'id',hidden : true}, 
				{label : '名称',name : 'name',width : 100,sortable : false}, 
				{label : '单价',name : 'price',width : 100,sortable : false,formatter:function(cellvalue){return "";}}
			],
		multiselect : false,
		viewrecords : true, 	//是否显示行数 
		height : "auto",
		autowidth : false,
		shrinkToFit : true,
		rowNum : 10,
		autoScroll : false,
		rowList : [ 10, 20, 30 ],//可调整每页显示的记录数 
		pagerpos : 'left'
	});
}
4. 重新加载
 4.1 带参数
$("#jqGrid").jqGrid('setGridParam',{    
    datatype:'json',    //返回的数据类型
    postData:{			//请求的参数
	    startDate:start,
	    endDate:end
    },  
    page:1    			//请求的页数
}).trigger("reloadGrid");  
4.2 不带参数的简写
$("#jqGrid").trigger("reloadGrid");
5. 事件
 5.1 选中行onSelectRow
onSelectRow: function(id,status){
}
5.2 加载完成loadComplete
loadComplete:function(data){
	// 设置第一行选中
	var ids = $('#jqGrid').getDataIDs();
    $("#jqGrid").jqGrid('setSelection',ids[0]);
}
6. 多级表头
 6.1 设置二级表头
 CSS

页面

    

	

JS

6.2 多级表头时，设置表头宽度

$('#gbox_table').find('th:eq(1)').each(function() {
	$(this).css('width', "40px");
});

$('#table tr').find('td:eq(1)').each(function() {
	$(this).css('width', "40px");
}) 

7. 其他
7.1 jqGrid单元格内容自动换行

1、设置样式
 .colCss{
	  white-space: normal !important; 
	  height:auto;
  }
2、给列加个属性classes，使classes=‘colCss’