用jqrid插件写的一个demo
网上关于jqrid插件的用法和文档一大堆，在这里我就不提了，写这篇博客的主要目的就是记录一下自己在用jqrid作项目的过程中遇到的一些小问题拿出来给大家分享一下，当然大佬可以直接无视。。。。。
要解决的问题：
- 初次渲染表格数据与切换搜索条件更新表格数据
- 表格字段中默认只显示text文本，如果想在某个td中显示图片或按钮(例如表格中最后一列一般会有操作按钮)该如何展示？
- 某个td中要显示的内容不能直接使用后台返回的字段值，而是要经过加工处理后才能使用，该怎么办？
- 复选框获取所有被选中行的id来进行删除等操作
- 切换条件渲染不同字段的表格
- 其它功能如表格自带的增删改查，配置底部导航栏按钮，表格标题等等等功能此博客不做解释，功能太多讲不完，自己根据文档慢慢熟悉即可，我是本着用到什么就学什么，遇到什么问题就针对性解决什么问题的性格
解释说明：
项目中要用到的插件如jquery,bootstrap,jqrid等请自己下载到本地或引用cdn文件等替换我的引用路径
common.js文件主要是模拟假数据函数以及jqrid相应功能的封装函数
index.js文件中主要是处理获取用户列表数据并渲染页面，下拉框选择事件，全删除按钮事件
效果图：
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"/> <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="plugins/jqgrid/ui.jqgrid.css"> <title>jqrid测试</title> </head> <body> <div class="content" style="padding: 50px;"> <select name="select" id="select" style="width: 300px;height: 30px;margin-bottom: 10px;"> <option value="0">全部</option> <option value="1">boy</option> <option value="2">girl</option> </select> <div style="height: 60px;line-height: 60px;"> <button class="btn btn-warning btn-md">删除</button> </div> <!--jqrid表格开始--> <div class="jqGrid_wrapper"> <table id="jqgrid_table"></table> <div id="jqgrid_page"></div> </div> <!--jqrid表格结束--> </div> </body> <script src="plugins/jquery/jquery.min.js"></script> <script src="plugins/bootstrap/bootstrap.min.js"></script> <script src="plugins/jqgrid/i18n/grid.locale-cn.js"></script> <script src="plugins/jqgrid/jquery.jqGrid.min.js"></script> <script src="js/common.js"></script> <script src="js/index.js"></script> </html>
common.js
//定义获取数据函数 (demo用的写死的数据，动态数据请根据自己项目中的接口来获取) function getData(sex){ var data=[ {id:1,name:"测试1",age:10,sex:"boy",job:"IT狗",isLiveSchool:false}, {id:2,name:"测试2",age:20,sex:"girl",job:"IT狗",isLiveSchool:false}, {id:3,name:"测试3",age:30,sex:"girl",job:"IT狗",isLiveSchool:false}, {id:4,name:"测试4",age:35,sex:"boy",job:"IT狗",isLiveSchool:true}, {id:5,name:"测试5",age:40,sex:"girl",job:"IT狗",isLiveSchool:false}, {id:6,name:"测试6",age:21,sex:"boy",job:"IT狗",isLiveSchool:false}, {id:7,name:"测试7",age:25,sex:"boy",job:"IT狗",isLiveSchool:true}, {id:8,name:"测试8",age:28,sex:"girl",job:"IT狗",isLiveSchool:false}, {id:9,name:"测试9",age:60,sex:"boy",job:"IT狗",isLiveSchool:false}, {id:10,name:"测试10",age:40,sex:"girl",job:"IT狗",isLiveSchool:true}, {id:11,name:"测试11",age:27,sex:"boy",job:"IT狗",isLiveSchool:false}, {id:12,name:"测试12",age:18,sex:"girl",job:"IT狗",isLiveSchool:false}, {id:13,name:"测试13",age:33,sex:"boy",job:"IT狗",isLiveSchool:true}, {id:14,name:"测试14",age:45,sex:"boy",job:"IT狗",isLiveSchool:false}, {id:15,name:"测试15",age:32,sex:"girl",job:"IT狗",isLiveSchool:true} ]; var array_boy=[]; var array_sex=[]; data.filter(function(item,index){ console.log(item,index); if(item.sex=="boy"){ array_boy.push(item); }else{ array_sex.push(item); } }); if(sex=="全部"){ return data; } else if(sex=="boy"){ return array_boy; }else{ return array_sex } } //定义生成jqraid表格函数 /* @params tableId:表格容器id pagerId:分页容器id data:表格要渲染的数据 colNames:表格的字段名称 colModel:表格各字段的属性 */ function creatTable( data, colNames, colModel,tableId, pagerId) { tableId = tableId || 'jqgrid_table'; pagerId =pagerId || 'jqgrid_page'; var grid = $("#"+tableId); grid.jqGrid({ data: data, datatype: "local", //从服务器端返回的数据类型，默认xml。可选类型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside height: 300, //表格高度，可以是数字，像素值或者百分比 width:1000, autowidth: true, autoScroll: true, shrinkToFit: true,//如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度 multiselect: true,//复选框 rowNum: 20,//在grid上显示记录条数，这个参数是要被传递到后台 rowList: [10, 20, 30],//一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台 colNames: colNames, colModel: colModel, pager: "#"+pagerId,//定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置 viewrecords: true,//定义是否要显示总记录数 hidegrid: false//启用或者禁用控制表格显示、隐藏的按钮，只有当caption 属性不为空时起效 }); grid[0].addJSONData(data); }
index.js
//〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓函数调用分割线〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 getUserList("全部");//调用获取用户列表函数 //〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓函数定义分割线〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 //定义查询用户函数 function getUserList(sex) { var data=getData(sex);//获取要传递给jqrid插件的data数据 console.log(data); var colNames = ['编号', '姓名', '年龄', '性别', '工作',"是否住校", "操作"]; var colModel = [ {name: "id", width: 50}, {name: "name", width: 120}, {name: "age", width: 100}, {name: "sex", width: 100}, {name: "job", width: 100}, {name:"isLiveSchool",width:100}, {name: 'option', width: 150, formatter: handleOption} ]; $.jgrid.defaults.styleUI = 'Bootstrap'; creatTable(data, colNames, colModel);//调用生成表格函数 } //定义处理数据函数 function handleOption(value, grid, rows, state) { var colModel = grid.colModel.name; switch (colModel) { case "isLiveSchool": if(rows.isLiveSchool){ return "是"; }else{ return "否"; } case "option": return '<button class="btn btn-success btn-sm" type="button" value="' + rows.id + '" onclick="editHandle(this)">' + '<i class="fa fa-edit"></i> 编辑 ' + '</button>' + '<button class="btn btn-warning btn-sm" type="button" value="' + rows.id + '" onclick="deleteHandle(this)"> ' + '<i class="fa fa-remove"></i> 删除 ' + '</button>'; break; } } //〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓点击事件分割线〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 //下拉框切换事件 $("#select").on("change",function(){ $(".jqGrid_wrapper").remove(); var html='<div class="jqGrid_wrapper"> <table id="jqgrid_table"></table> <div id="jqgrid_page"></div> </div>'; $(".content").append(html); var sex= $("#select option:selected").text(); getUserList(sex); }); $("#btn").on("click",function(){ $(".jqGrid_wrapper").remove(); var html='<div class="jqGrid_wrapper"> <table id="jqgrid_table"></table> <div id="jqgrid_page"></div> </div>'; $(".content").append(html); var data=[ {id:100,id1:100,id2:100,id3:100}, {id:100,id1:100,id2:100,id3:100}, {id:100,id1:100,id2:100,id3:100}, {id:100,id1:100,id2:100,id3:100}, {id:100,id1:100,id2:100,id3:100}, {id:100,id1:100,id2:100,id3:100} ]; console.log(data); var colNames = ['id', 'id1', 'id2', 'id3']; var colModel = [ {name: "id", width: 50}, {name: "id1", width: 120}, {name: "id2", width: 100}, {name: "id3", width: 100} ]; $.jgrid.defaults.styleUI = 'Bootstrap'; creatTable(data, colNames, colModel);//调用生成表格函数 }); //点击全部删除按钮事件 $("#btn_all").on("click",function(){ var ids = $("#jqgrid_table").jqGrid('getGridParam','selarrrow'); alert("要删除的id项为："+ids); });
知识点讲解：
1.属性colNames是配置表格中的列，一定要是数组
var colNames = ['编号', '姓名', '年龄', '性别', '工作',"是否住校", "操作"];
2.属性colModel为数组对象，每个元素对应一个表格的列，
name：列的字段值也就是你要展示的后台接口返回的字段值,
width：每列定义的宽度值，像素为px，暂不支持百分比
formatter:为格式化数据属性，也就是对后端返回的数据做处理，属性值为函数，具体用法参照我代码中的自定义函数 handleOption，注意，这个属性功能强大，可以让你在td中展示任何形式的数据，包括图片，按钮等，而不仅仅是默认的文本值，函数有四个参数value,grid,rows,state,其中rows为每列数据的值，最好是自己分别打印出来看看他们到底是代表什么意思
var colModel = [ {name: "id", width: 50}, {name: "name", width: 120}, {name: "age", width: 100}, {name: "sex", width: 100}, {name: "job", width: 100}, {name:"isLiveSchool",width:100}, {name: 'option', width: 150, formatter: handleOption} ];
3.common.js文件grid分装的函数中这句代码很重要，如果你初次渲染完表格数据之后，想要切换查询条件来获取不同的数据来更新表格，不加这句代码是没有效果的，切记，切记，切记
grid[0].addJSONData(data);
4.如果多选选中了很多行后，想做一些类似删除的操作的话，肯定是需要拿到你选中的那些行的id值，那么id值如何获取呢，千万不要傻乎乎的去循环页面上的dom结构，获取哪些被选中的tr然后再获取tr上面的id值，最后在push到一个数组里面，其实jqrid已经给我们封装好了的，只需要一句代码就好了，变量ids就是被选中行的id数组
var ids = $("#jqgrid_table").jqGrid('getGridParam','selarrrow');
5.如果用户要根据不同的条件渲染不同字段的表格的话光靠配置不同的colName和colModel是没有效果的，必须要在切换的时后再重新请求数据之前把现有的表格dom移除之后再重新添加到页面上