jqGrid常用API

jqGrid常用API

基本设置

首先引入官方的JS包 —链接地址— 因为是属于jquery的插件，所以必须先引入jquery的官方包。

<!-- 引入jQuery -->
<script src="../../lib/jq/jquery-1.11.3.min.js" type="text/javascript"></script>
<!-- 引入JS -->
<script src="../../lib/jqgrid/grid.locale-cn.js" type="text/javascript"></script>
<script src="../../lib/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>

使用远程数据填充表格

通过请求接口返回的JSON填充表格

$(function(){
  $("#jqGrid").jqGrid({
    url: '../sys/menu/list', //ajax加载数据
    datatype: "json",
    // colNames:['姓名','年龄', '性别', '工资'], //手动设置表头,可通过下面label设置
    colModel: [ 
      { label: '姓名', name: 'name', index: "name", width: 50 },
      { label: '年龄', name: 'age', index: "age", width: 50},
      { label: '性别', name: 'gender', index: "gender", width: 50},
      { label: '工资', name: 'salary', index: "salary", width: 50},
      { label: '辈份', name: 'level', index: "level", width: 50,
       // 格式化函数
       formatter: function(cellValue,options,rowObject){
         console.log(cellValue,options,rowObject);
         if(cellValue == "长辈"){
           return '<a href="javascript:;">'+cellValue+'</a>'
         }else{
           return cellValue
         }
       }},
      { label: '工资等级', name: 'type', index: "type", width: 50}
    ],
    width:"100%",
    viewrecords: true,//定义是否要显示总记录数
    height: 300,//表格高度
    rowNum: 10,//行数
    rowList : [10,30,50],//行数切换选项值
    rownumbers: true, //如果为ture则会在表格左边新增一列，显示行顺序号
    rownumWidth: 25, //如果rownumbers为true，则可以设置column的宽度
    autowidth:true,//自动宽度
    multiselect: true,//定义是否可以多选
    pager: "#jqGridPager",//底部的分页栏在html中的id
    // 后台返回的json对象为page所以这里使用page.xxx
    jsonReader : {
      root: "page.list",
      page: "page.currPage",
      total: "page.totalPage",
      records: "page.totalCount"
    },
    prmNames : {
      page:"page", 
      rows:"limit", 
      order: "order"
    },
    // 表格填充完毕后的方法
    gridComplete:function(){
      //隐藏grid底部滚动条
      $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
    }
  });

加载本地JSON数据

如果想使用自己的Ajax加载完的数据填充表格就可以使用该方法

$(function(){
  $("#jqGrid").jqGrid({
    // url: '../sys/menu/list', //不想使用grid的ajax把该代码注释掉即可
    datatype: "json",
    // colNames:['姓名','年龄', '性别', '工资'], //手动设置表头,可通过下面label设置
    colModel: [ 
      { label: '姓名', name: 'name', index: "name", width: 50 },
      { label: '年龄', name: 'age', index: "age", width: 50},
      { label: '性别', name: 'gender', index: "gender", width: 50},
      { label: '工资', name: 'salary', index: "salary", width: 50},
      { label: '辈份', name:
        .... 后面省略保持和上面一致

直接赋值

$("#jqGrid")[0].addJSONData(r) //r里面的json对象必须和上面初始化参数配置好的page.xxx保持一致
//比如，上面定义的json为page.xxx那么自定义的ajax返回的是page{xxx:[],xxx{}}

遍历赋值

//假设返回的json为 r 中有个 list 集合
for (let k in r.list) {
  $("#jqGrid").jqGrid("addRowData",k,rows[k]);//给指定行赋值
}

常用方法

得到所有勾选的行

获得选中的单行

// 获得选中行的id,单指一行,如果选择多行,返回的是最后一行
let rowId = $("#jqGrid").jqGrid("getGridParam","selrow")
console.log(rowId);//未选中就是null
let row = $("#jqGrid").jqGrid('getRowData',k);//获得该行对象
console.log(row)

获得所有选中的行

// 获得所有选中行的id
let rowIds = $("#jqGrid").jqGrid("getGridParam","selarrrow")
console.log(rowIds);//未选中就是空数组

// 获得选择的row的对象
for (let k in rowIds) {
  let row = $("#jqGrid").jqGrid('getRowData',k);
  console.log(row);
}

填充指定单元格

//参数1：固定
//参数2：单元格的row的id
//参数3：填充单元格的值
//参数4：填充单元格的 name 字段值
$("#jqGrid").jqGrid('setCell',i,k,enums[k2].name)

获得所有的行

官方提供的方法存在BUG就是拿不到最后一行

官方的方法是：

let rs = $("#jqGrid").jqGrid('getRowData')
//该种方式永远取得少最后一行

我们可以通过另外一种方式获得

let rows = []
let ids = $("#jqGrid").jqGrid('getDataIDs');//获得所有的rowId
console.log(ids)
for(let i= 0; i < ids.length; i++){
  let row = $("#jqGrid").jqGrid('getRowData',ids[i])
  console.log(row)
  rows.push(row) // 存放到row数组
}  
console.log(rows)

表格重新加载

我们需要在指定的位置重新加载表格的数据的时候，官方提供一个方法

$("#jqGrid").jqGrid('setGridParam',{ 
  postData : { name : vm.q.name, page:page },
  /*ajaxGridOptions : {//通过该设置改变ajax设置参数
         type:"post",
         async:false
  }*/
}).trigger("reloadGrid");

改变ajax设置

我们想改变jqGrid的默认ajax设置，官方提供了一种方式，但是要求版本必须是3.6

$("#jqGrid").jqGrid({
  url: '../tpoorsmemberinfo/list',
  ajaxGridOptions : {   //通过该设置改变ajax设置参数
    type:"get",
    async : true
  },
  ...

改变请求的参数的值

每次ajax请求后台的之前我们想要添加自己的自定义的值

$("#jqGrid").jqGrid({
  url: '../tpoorsmemberinfo/list',
  serializeGridData : function(postdata) {
    console.log("postdata",postdata)
    //使用选择器拿到postData对象  
    console.log("postData : ",$("#jqGrid").jqGrid()[0].p.postData)    
    console.log("this  : ",this ) //是当前表格的DOM对象
    postdata.page = 1;
    postdata.limit = 10;
    return postdata;
  },
  ...

总结

这里对自己用到的一些方法进行了总结,更多的方法的使用还请参考官方文档，描述的很详细：

—中文官方文档—