BootStrap+jqGrid结合开发表格

• 什么是jqGrid

jqGrid是一个在jQuery基础上封装一个表格控件，以ajax的方式和服务器端通信。简单来说就是简单化表格开发。

废话不多说，直接上代码。

HTML前端代码

首先，需要引人样式文件和js文件，这里我们直接使用整合后的文件

开发表格需要两个组件，第一个是table，另一个是pager用于放一些对表格的操作，显示分页等.

// 提供的html元素
数据表格构建

分页+工具栏

$('#tt').jqGrid({
        url:'emp.json',
        datatype:'json',
        //引入bootstrap的UI样式,整合bootstrap只需要导入js,css和添加这条语句
        styleUI:'Bootstrap',
        colNames:['ID','NAME','SALARY','AGE'],
 cellEdit:true,
 cellurl:'...',
        colModel:[
         {name:'id'},
         {name:'name'},
         {name:'salary'},
         {name:'age'}
       ],
        autowidth:true,//数据表格是否自适应父容器的大小宽度\
        pager:'#pager',// 使用分页工具栏
        rowList:[5,10,15,20,50],// 默认每页展示20条
        rowNum:5,// 指定默认每页展示的条数，值必须来自rowList中的一个
 viewrecords:true,// 是否显示总记录条数
 page:1,//指定初始化页码
}).navGrid('#pager',{'add':true,'edit':true,'del':false,'search':false,'refresh':false});;
// 提供的html元素
数据表格构建

分页数据表格须知：
1.加入分页工具栏后,远程响应json数据格式为:
{"rows":[当前页结果(list)],"page":"当前页","total":"总页数","records":"总条数"}
2.默认每页显示记录数 20
3.后台可以使用rows变量接收每页记录数
4.后台可以使用page变量接收当前页
5.当我们触发上一页、下一页、每页显示条数的列表时，jqGrid会自动按照url指定的路径发送请求，同时会发送请
求参数page和rows

增删改实现

会向后台传递oper参数,后台根据oper判断当前操作类型然后在进行操作。

$('#tt').jqGrid({
        url:'emp.json',
        datatype:'json',
        //引入bootstrap的UI样式
        styleUI:'Bootstrap',
        colNames:['ID','NAME','SALARY','AGE'],
 cellEdit:true,
 cellurl:'...',
        colModel:[
         {name:'id'},
         {name:'name',editable:true},
         {name:'salary',editable:true},
         {name:'age',editable:true}
       ],
        autowidth:true,//数据表格是否自适应父容器的大小宽度
 multiselect:true,// 在表格第一列前面，加入复选框
}).navGrid('#pager',{'add':true,'edit':true,'del':true,'search':true,'refresh':true});

添加可编辑的下拉列表单元格

$('#tt').jqGrid({
        url:'emp.json',
        datatype:'json',
        colNames:['ID','NAME','SALARY','AGE'],
 cellEdit:true,//开启编辑模式
 cellurl:'...',//编辑模式提交的路径，编辑完毕自动发送请求，请求参数为当前行的id和当前编
辑的数据以及操作方式（oper）
 /**
 注: 当执行grid中增删改时全部使用当前指定的url
 -如果是保存 会传递一个参数名为oper值:add
 -如果是修改 会传递一个参数名为oper值:edit
 -如果是删除 会传递一个参数名为oper值:del
 */
        colModel:[
         {name:'id'},
         {name:'name'},
         {name:'salary'},
         {name:'age'},
         {
            name:'deptname',
            editable:true,
            edittype:'select',
            //渲染静态数据
            // editoptions:{value:"1:研发部;2:教学部"},
            // 加载远程数据渲染下拉列表,要求响应的是一段html元素内容
            editoptions:{dataUrl:'...'},
         }
       ],
        autowidth:true,//数据表格是否自适应父容器的大小宽度
});

formatter属性实现自定义单元格数据展示

$('#tt').jqGrid({
        url:'emp.json',
        datatype:'json',
        colNames:['ID','NAME','SALARY','AGE'],
 cellEdit:true,
 cellurl:'...',
        colModel:[
         {name:'id'},
         {name:'name'},
         {name:'salary'},
         {name:'age'},
         {
            name:'deptname',
            // 自定义单元格展示的数据
            formatter:function (value,options,row) {
              /**
              * value : 在远程匹配到的数据
              * options: 当前单元格操作属性对象
              * row : 当前行的数据对象
              */
              //console.log(value, options, row);
              //函数的返回值会显示在当前单元格
              return ''+row.deptName+'';
           }
         }
       ],
        autowidth:true,//数据表格是否自适应父容器的大小宽度
});

 

后台代码简单摘要

@RequestMapping("operation")
    public String operation(String id,String oper,Emp emp,String searchField,String searchString){
        /*empService.delete(id);*/
        if(oper.equals("del")){
            empService.delete(id);
        }else if(oper.equals("add")){
            empService.insert(emp);
        }else if(oper.equals("edit")){
            empService.update(emp);
        }else if(oper.equals("eq")){
            return null;
        }
        return null;
    }

其他数据表格属性

toolbar：['true','both'], //用来指定表格的工具栏
/**
使用注意:
1.如果只有一个工具栏则为 “t_”+表格id
2.如果为both 上面工具栏id为“t_”+表格id；下面则为 “tb_”+表格id；
3.$("#t_xx").append("...html元素...");定义工具栏内容
*/
sortname:'id', // 指定默认的排序字段
sortorder:'desc',// 指定默认的排序规则
caption:'员工信息', // 指定表格的标题
height:200,
prmNames:{'search':'sch'},// 自定义默认请求参数的key
rownumbers:true,// 在第一列前显示行号
hiddengrid:true,// 初始状态是否显示表格内容
hidegrid:true, // 是否显示表格的折叠按钮
search:true,//用来指定该列在搜索模式下是否参与搜索
sortable:true,//用来指定该列是否可以参与排序
surl:'...' //当该列为搜索列时使用指定的url请求数据(如果不指定默认使用grid的url属性的值)