BootStrap+jqGrid结合开发表格

• 什么是jqGrid

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

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

HTML前端代码

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

<!--引入样式文件-->
<link rel="stylesheet" href="static/bs/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="static/jqgrid/css/trirand/ui.jqgrid-bootstrap.css"
type="text/css">
<!--引入js功能文件-->
<script src="static/bs/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="static/bs/js/bootstrap.min.js" type="text/javascript"></script>
<script src="static/jqgrid/js/trirand/i18n/grid.locale-cn.js" type="text/javascript">
</script>
<script src="static/jqgrid/js/trirand/jquery.jqGrid.min.js" type="text/javascript">
</script>

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

// 提供的html元素
<h1>数据表格构建</h1>
<table id="tt"></table>
<!--分页工具栏-->
<div id="pager"></div>

分页+工具栏

$('#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元素
<h1>数据表格构建</h1>
<table id="tt"></table>
<!--分页工具栏-->
<div id="pager"></div>

分页数据表格须知：
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 : 当前行的数据对象
              */