关于Jqgrid加载本地数据显示列表

最新推荐文章于 2025-07-07 09:42:33 发布

原创最新推荐文章于 2025-07-07 09:42:33 发布 · 4.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#jqgrid #本地数据

学习精华专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用jQuery插件jqGrid实现的表格初始化方法，该方法能够将本地数据加载到表格中，并设置多种表格属性如分页、排序等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function initializeListNew(){
	 zfjqydSqList = $("#commonList2").jqGrid({
		 	datatype: 'local', 
	        autowidth: true,
	        autoheight:true,
	        multiboxonly:true ,
	        multiselect: true,
	        colNames: ["ID", "罪犯姓名","罪犯编号","罪犯状态","操作"],
	        colModel: [
	            { name: "id", index:"id",hidden: true},
	            { name: "xm", index:"xm", align:"center", sortable: false},
	            { name: "bh", index:"bh", align:"center", sortable: false},
	            { name: "zfztName", index:"zfztName", align:"center", sortable: false},
				{ name: "customColumn",  formatter:actionFormatter, align:"center",search:false, sortable: false}
	            ],
	        pager: "#commonPager2",
	        rowNum: 10,
	        rowList: [10, 20, 30],
	        sortname:"createDate",
			sortorder:"desc",
	        viewrecords: true,
	        gridview: true,
	        autoencode: true
	    });
	 	var localData = {page: 1, total: 0, records: "0", rows: dataList};
	    localData.rows = dataList;
	    localData.records = dataList.length;
	    localData.total = (dataList.length % 5 == 0) ? (dataList.length / 5) : (Math.floor(dataList.length / 5) + 1); 
	    var reader = {  
	                  root: function(obj) { return localData.rows; },  
	                  page: function(obj) { return localData.page; },   
	                  total: function(obj) {  return localData.total; },  
	                  records: function(obj) { return localData.records; },  repeatitems : false};
	    $("#commonList2").setGridParam({data: localData.rows, reader: reader}).trigger('reloadGrid');    
}

创建数组dataList，把本地数据放入进入，在加载函数。