jqgrid动态列动态生成colModel和colNames（支持分页）

详细代码请看： jqgrid动态列动态生成colModel和colNames 

之前的做法，由于是进行了一次查询，jqgrid本质上并未向后台查询数据，所以jqgrid自带的分页是不工作的，之前我做的需求不需要分页，只是需要动态生成列，所以没发现这个问题，有道友在帖子下问，我才注意到。

目前来说我能想到的有两种解决方式：

一、比较麻烦，需要手写第一次分页

sql：

select userid, username, password from table

假设接收到的数据为：

	var jqdata=[
                {"userid":01,"username":"皮皮虾","password":"biubiubiu"}, 
                {"userid":02,"username":"象拔蚌","password":"boomboomboom"}
               ];

则jqgrid初始化代码：

function pageInit(){
	var jqdata=[{"userid":01,"username":"皮皮虾","password":"动态biubiubiu"},{"userid":02,"username":"象拔蚌","password":"动态boomboomboom"}];
	var names=[];
	var model=[];
	//此处因为数据源数组中的结构相同且不为空，直接遍历索引为0的数据即可
	$.each(jqdata[0], function(key,value) {
		names.push(key);
		model.push({
			name:key,
			index:key,
			width:100
		});
	});
	//创建jqGrid组件
	jQuery("#list2").jqGrid(
			{
				datatype : "json",//请求数据返回的类型。可选json,xml,txt
				colNames : names,//jqGrid的列显示名字
				colModel : model,
				rowNum : 10,//一页显示多少条
				rowList : [ 10, 20, 30 ],//可供用户选择一页显示多少条
				pager : '#pager2',//表格页脚的占位符(一般是div)的id
				sortname : 'id',//初始化的时候排序的字段
				sortorder : "desc",//排序方式,可选desc,asc
				mtype : "post",//向后台请求数据的ajax的类型。可选post,get
				viewrecords : true,
				caption : "JSON Example"//表格的标题名字
			});
			//将jqdata的值循环添加进jqGrid
            //此处只赋值数据的前N条，数据量根据option中的rownum来确定
	for (var i = 0; i < 10; i++) {
                    jQuery("#list2").jqGrid('addRowData', i + 1, jqdata[i]);
                }
}

但是有个很大的弊端，就是要重写jqgrid中自定义的方法，现在的jqgrid是没有url的，所以要使用.trigger("reloadGrid")方法定位url：

$("#list2").jqgrid({
                         url："wwww.xxxxxxxxxx.com?value=ssss"
                    }).trigger("reloadGrid");

这个方式的主要思想就是进行第一次查询，获取第一页数据，然后使用返回的数组构建colname&colmodel，然后进行查询时，将url填充到jqgrid中。

二、对数据库进行两次查询，第一次套用结构，第二次获取数据

jqgrid是使用开窗函数进行的分页操作所以可以把分页数据套入，第一次只取第一条（存在的情况下，不存在数据的情况请自行判断）。

select * from(select ROW_NUMBER()over(order by
      col
) * from table
      where 1=1
      ) e
      where RowNumber between (page-1)*rows+1 and page*rows

语句大致结构如上，page是页码，rows是每页数据量，这样我们就可以模拟jqgrid发送一个只取第一页第一行的数据，也就是取第一条数据，模拟的原因是重用jqgrid的代码，因为传入的参数结构会是一致的。

返回数据为

var jqdata=[
                {"userid":01,"username":"皮皮虾","password":"biubiubiu"}
               ];

以此数据为准来获取列的结构，然后在初始化jqgrid的时候，配置url，jqgrid会自动发送一个包含分页信息的请求，后续操作跟正常无异了

function pageInit(){
	var jqdata=[{"userid":01,"username":"皮皮虾","password":"动态biubiubiu"},{"userid":02,"username":"象拔蚌","password":"动态boomboomboom"}];
	var names=[];
	var model=[];
	//此处因为数据源数组中的结构相同且不为空，直接遍历索引为0的数据即可
	$.each(jqdata[0], function(key,value) {
		names.push(key);
		model.push({
			name:key,
			index:key,
			width:100
		});
	});
	//创建jqGrid组件
	jQuery("#list2").jqGrid(
			{
                url:"www.xxxxx.com?value=sssss",
				datatype : "json",//请求数据返回的类型。可选json,xml,txt
				colNames : names,//jqGrid的列显示名字
				colModel : model,
				rowNum : 10,//一页显示多少条
				rowList : [ 10, 20, 30 ],//可供用户选择一页显示多少条
				pager : '#pager2',//表格页脚的占位符(一般是div)的id
				sortname : 'id',//初始化的时候排序的字段
				sortorder : "desc",//排序方式,可选desc,asc
				mtype : "post",//向后台请求数据的ajax的类型。可选post,get
				viewrecords : true,
				caption : "JSON Example"//表格的标题名字
			});
}

如果有道友有更好的想法欢迎下边留言