jqGrid数据表格

1.表格的环境搭建

1. 导入css和 js

2. 创建表格 和 使用jqgrid

2.表格属性

一般我们对于返回json数据格式为

{
	"page":1    //当前页
	"total“:10   //总页数
	"records": ''13"  //总记录数
	"row":[{},{},{}]   //数据  
}

 /*
	url			: 用来指定服务端的url地址 或  用来获取远程数据的url
	datatype	: 用来指定从服务器端返回的数据类型 (默认是:"xml") 使用时:"json" 	 
	mtype:,      //请求方式   异步ajax     post、 get（默认）
	colNames	: 用来指定表格列的名称 如 ["id","姓名".....]
	colModel	: 用来指定表格列的名称所对应的数据 注意:colNames和colModel长度必须一致
		 		  使用方式 colModel:[{name:"id".....},{},]
	pager		: 用来指定分页工具栏标签的id  注意:分页工具栏可以放在任意位置
			      使用方式: 
    grid中设置:pager:"#aa"
	rowNum		: 用来指定每页显示记录数 默认是:20 后台可以使用:rows变量进行参数接收
				  使用注意: 
				  	a.建议最好是rowList中一个子元素
				  	b.后台可以使用page变量接收当前页
				  	
	rowList		: 用来指定下拉列表中每页显示条数  注意:是一个数组
	viewrecords : 用来显示总记录数
				  使用注意: 
				  	a.一旦加入分页工具栏之后后台响应json数据格式变化为:
				  	{"rows":[当前页结果],"page":"当前页","total":"总页数","records":"总条数"}
				  	
	sortname	: 用来指定使用哪个列作为排序列  注意:后台使用sidx接收排序列结果	  
    caption     : 用来指定表格的标题
    autowidth	: 用来自适应父容器
    cellEdit	: 用来开启单元格的点击修改操作 注意:必须配合colModel中editable属性为true才生效 
    											 主要还是editurl的增删改查
    editurl		: 用来指定编辑(增删改)时的url   editurl:'/ssss/sss'
    			  使用注意: 当执行grid中增删改时全部使用当前指定的url
    			  		   如果是保存 会传递一个参数名为oper值:add
    			  		   如果是修改 会传递一个参数名为oper值:edit
    			  		   如果是删除 会传递一个参数名为oper值:del
    hiddengrid	: 用来控制表格是否默认打开
    hidegrid	: 用来控制在使用标题情况下是否显示折叠按钮
    multiselect : 用来控制是否显示checkbox
    page		: 用来指定初始化的页码
    rownumbers  : 用来显示指定行的行号
    toolbar		: 用来指定表格的工具栏 使用方式:	['true','both']
    			  使用注意:
    			  	a.如果只有一个工具栏则为 “t_”+表格id 
    			  	b.如果为both 上面工具栏id为“t_”+表格id；下面则为 “tb_”+表格id；
*/

3.表格列属性

主要是指 colModel的属性

1.表格的colModel属性的使用
$("#list").jqGrid({ 
			colModel:[
                    {name:"id",align:"center",....//用来书写colModel属性},
			]
});

2.常用属性如下:
	
	//name	    	: 用来获取json中指定字段作为该列的数据展示
    //classes	 	: 用来给当前列设置样式 多个样式空格分开
	//align			: 用来设置该列值的对齐方式
	//editable		: 用来控制当前单元格是否可以点击编辑 必须配合初始化属性cellEdit:true使用
                
	//edittype      : 用来指定编辑时的类型 
		/*支持类型(text, textarea, select, checkbox, password, button, image and file.)*/

	//editoptions   : 用来指定编辑类型为select时,select标签的数据获取方式 
        /*editoptions:{value:"1:One;2:Two"}//本地数据
          editoptions:{dataUrl:"数据地址"}//加载远程数据 要求返回的结果必须是准备好select的html
        */
                
	//width			: 用来指定列的宽度
   
	//fixed   		: 用来指定当表格自动适应时,宽度固定
                
	//formatter		: 用来指定对表格列二次渲染值为function(value,options,row){return"渲染结果"}
                
    //hidden        : 用来指定表格在初始化时不显示哪个列
    
    //index    		: 向后台传递的参数(暂时没有实现)
                
    //resizable		: 用来修改当前列是否可以修改大小
    
    //search		: 用来指定该列是否可以参与搜索
               
   	//sortable      : 用来指定该列是否可以参与排序
    
    //surl          : 当该列为搜索列时使用指定的url请求数据(如果不指定默认使用grid的url属性的值)

4.事件使用方式

事件的使用方式
    $("#emplist").jqGrid({
				全局初始化属性:
        ondblClickRow:function(){}//事件......
    })

5.方法调用

1.方法调用方式
	$("#emplist").jqGrid('方法名',参数列表....);

6.分页数据格式

{
  "page": "1",
  "total": 2,
  "records": "13",
  "rows": [{},{},{}]
}

7.增删改工具栏配置

.navGrid(
  '#pager',//参数1: 分页工具栏id
  {add: true, search: false,},   //参数2:开启工具栏编辑按钮
  { 							//参数3 :编辑面板的配置
    closeAfterEdit: true,//关闭面板
    reloadAfterSubmit: true,
  },
  {   closeAfterAdd: true,   //参数4:添加面板的配置
   reloadAfterSubmit: true,
  },
  {     closeAfterDelete: true,   		//删除面板的配置
   reloadAfterSubmit: true
  },
  {
       spot:{'cn','eq','ne','lt','gt','ew'} 	//搜索面板的配置
  },
  {
      								//刷新的配置
  }
);

8.下拉列表处理

#1.静态数据
{name: "location", editable: true,edittype:'select',
  editoptions:{value:"中国:中国;美国:美国;英国:英国;澳洲:澳洲;其他:其他区域",}
}
#2.动态数据后台返回带有html标签的select