参考文档
https://www.cnblogs.com/summay/p/5025737.html
演示Demo
http://www.trirand.com/blog/jqgrid/jqgrid.html
FAQ
jqgrid怎么设置请求方式和请求参数
1.GET请求（默认）
dataType : json
url : "../xxx" + "?xxx=xxx"
postData : {xxx : "xxx"}
2.Post请求 （少见）
mType : POST
dataType : json
url : "../xxx" + "?xxx=xxx"
postData : {xxx : "xxx"}
3.本地数据设置
dataType : local
data : [{...},{...},{...}...]
注：一般配合 setGridParam方法 和 reload来更新数据
数据异步加载问题
未找到设置同步请求的方式，可以用setTimeout来协调
jqgrid自带请求参数有哪些
rowNum : 即pageSize
page : 即pageNum
传参可以设置别名
prmNames : {"page":"page", "rows":"rows", "order":"order"}
jqgrid 如何解析服务端返回数据
服务端返回数据格式为
{
rows : [{},{},{}],
page : "1",
total : "2",
records : "6"
}
jsonReader如下设置
jsonReader : {
root: "rows", //数据模型
page: "page",//数据页码
total: "total",//数据总页码
records: "records",//数据总记录数
}
colModel（描述如何渲染表格）
label : 表格字段名称
name : row属性名称
width : 相对长度
jqgrid 根据结果渲染表格
{ label: '任务状态', name: 'status', width: 75, formatter:
function(value,options, row){
if(value==10){
return '<span class="label label-warning">未启用</span>';
}else if (value ==20){
return '<span class="label label-success">已启用</span>';
}
}}
注：row是取的是 data[i]
jqgrid API
1.获取所有的数据
获取所有数据
2.设置表格数据
jQuery("#jqGrid").jqGrid('setGridParam', {
data: data
}).trigger("reloadGrid");
3.删除选中行及数据
var rowIds = $("#jqGrid").jqGrid('getGridParam', 'selarrrow');
for (var i = 0; i < rowIds.length; i++) {
$("#jqGrid").jqGrid('delRowData', rowIds[i]);
}
jqGrid翻页
在html中加入div
image.png
在 构造jqgrid时加入
image.png
