是什么

jqgrid是一个基于jquery的表格控件，可以直接使用ajax的方式和服务器端通信。获取数据并渲染表格

jqgrid 做了什么

他内部实现了 从服务器端获取数据，通过监听请求前、请求中、请求后等状态，可以方便的获取和修改数据并绘制到表格中。在内部也对数据做了一些缓存优化，在处理 table 表格数据的时候，有一定的优势。

jqGrid参数

jqGrid 事件

使用案例

jQuery("#jqgrid").jqGrid({
  url: APIPAGE["list"],
  datatype: "JSON",
  mtype: "POST",
  ajaxGridOptions: { contentType: "application/json;charset=utf-8" },
  serializeGridData: function (postData) {
    var param = {};
    //分页条件
    param.pageNumber = postData.page;
    param.pageSize = postData.rows;
    return JSON.stringify(param);
  },
  height: "auto",
  colNames: [
    "5寸图",
    "倒计时间(s)",
    "图片链接地址",
    "是否传用户参数",
    "状态",
    "操作",
  ],
  colModel: [
    {
      name: "imageUrl",
      index: "imageUrl",
      sortable: false,
      formatter: function (cellvalue, options, rowObj) {
        return "<img src=" + cellvalue + ' width="50" height="50"/>';
      },
    },
    { name: "countdownTime", index: "countdownTime", sortable: false },
    { name: "linkAddress", index: "linkAddress", sortable: false },
    {
      name: "isTransferParams",
      index: "isTransferParams",
      sortable: false,
      formatter: function (cellvalue, options, rowObj) {
        if (cellvalue == "Y") {
          return "是";
        } else {
          return "否";
        }
      },
    },
    {
      name: "status",
      index: "status",
      sortable: false,
      formatter: function (cellvalue, options, rowObj) {
        if (cellvalue == "START") {
          return "启用";
        } else {
          return "禁用";
        }
      },
    },
    { name: "act", index: "act", sortable: false },
  ],
  rowList: [5, 10, 20],
  pager: "#pjqgrid",
  viewrecords: false,
  jsonReader: {
    root: "data.list",
    page: "data.page.pageNumber",
    total: "data.page.pageTotal",
    records: "data.page.recordTotal",
    repeatitems: false,
    cell: "cell",
    id: "id",
  },
  gridComplete: function () {
    var ids = jQuery("#jqgrid").jqGrid("getDataIDs");
    for (var i = 0; i < ids.length; i++) {
      var cl = ids[i];
      be =
        "<button class='btn btn-xs btn-danger' data-toggle='tooltip' data-placement='right' title='停用' onclick=\"deleteScreen('" +
        cl +
        "');\"><i class='fa fa-pencil-square-o'></i>&nbsp;&nbsp;停用</button>&nbsp;";
      ce =
        "<button class='btn btn-xs btn-primary' data-toggle='tooltip' data-placement='right' title='修改' onclick=\"editScreen('" +
        cl +
        "');\"><i class='fa fa-lock'></i>&nbsp;&nbsp;修改</button>&nbsp;";
      var rowData = $("#jqgrid").jqGrid("getRowData", cl);
      jQuery("#jqgrid").jqGrid("setRowData", ids[i], { act: ce + be });
    }
    $(".jqgrid-rownum").removeClass("ui-state-default");
  },
  loadComplete: function () {},
  caption: null,
  autowidth: true,
});

编辑数据

// 弹框-闪屏-修改
function editScreen(rowId) {
  var rowData = jQuery("#jqgrid").jqGrid("getRowData", rowId);
  //$("#editScreenModal").modal('show');
  console.log(rowData);
}

api

1. 文档地址: https://blog.mn886.net/jqGrid/