通过复制bootstrap代码进行开发，代码非常多，其实bootstrap重点在于它的表格，以后作为管理系统而言，都是对数据完成基本的功能，CRUD

做分页，查询，修改，自己去做的话代价很大，bootstrap只是做了样式的美化，没有给我们提供更加丰富的功能帮助我们处理增删改查

在企业用bootstrap做页面时，为了近一个步增加开发效率，引用一个 jquery的插件叫：jqgrid：数据表格，下面的都不需要我们自己手写了，交给插件，包括分页，查询增删改查等这些javascript代码，我们只关心后台的数据交互，jqgrid与后台交互，使用的是ajax的方式，也就是说它要后台要的是字符串，那么就不允许后台有任何的页面跳转

jqgrid功能非常强大，是一个老牌的jquery数据表格了，帮助我们一次性的构建一个简洁的数据表格，帮我们完成增删改查，页面标签仅仅需要写一到两行，js代码相对写的多一点，jqgrid是一个jquery插件，专注于js 

英文网站：

 中文网站：

 下载jqgrid的依赖：主要使用下面的文件

 引入到项目中：

jqgrid的文件引入顺序： 

 进入页面检查是否引入成功：

 不飘红就是引入成功：

用到的参数： 

 属性：

请求地址：

 返回数据类型：

请求方式：

 表格的名称：与colModel对应

列的显示名称：

 表格属性：

列属性：

 事件：

方法：

 首先需要一个table：

利用js进行调用jqgrid：

 设置列属性：

对齐方式

 字段可编辑：

对数据进行二次渲染：对应的是一个函数

formatter

mixed

对列进行格式化时设置的函数名或者类型 {name:’sex’,index:’sex’, align:’center’,width:60,editable:true,edittype:’select’,editoptions: {value:’0:待定;1:男;2:女’},formatter:function(cellvalue, options, rowObject){ var temp = “ if(cellvalue==1){ temp = temp +”user-white.png”; } else if(cellvalue==2){ temp = temp +”user-white-female.png”; } else { temp = temp + “user-silhouette.png”; } temp = temp + “‘ border=’0 ′ />” return temp; }},// 返回性别的图标。

 隐藏某列：

 取哪个json中的数据作为这列的值：

 列的宽度是否可以改变大小：

列的宽度：