0

我有我的网格。我想在我的 jqGrid 中有一个带有添加/编辑/删除选项的操作列。我阅读了 JqGrid 的文档，我了解到 JqGrid 使用格式化程序操作为此提供了功能，我在我的代码中实现了相同的功能，但我的操作列仍然未定义。这是我的代码，我传递了四个参数 1.Grid_id 2.Pager_id 3.Colname 4.url （获取远程数据）

({
  setUpNormalGrid: function(grid_id, pager_id, url, col_name) {
    var Jroot, col_sort, colmod, colname, groupingView, headers, i, keys, minusIcon, plusIcon, root, type;
    col_sort = this.get("sort");
    keys = this.get("colmod");
    type = this.get("Htype");
    root = this.get("root");
    Jroot = root + ".result";
    grid_id = "#" + grid_id;
    pager_id = "#" + pager_id;
    i = 0;
    colname = col_name;
    colname.unshift("Actions");
    colmod = [];
    i = 0;
    colmod.push({
      name: "act",
      index: "act",
      width: 35,
      align: "center",
      sortable: false,
      formatter: "actions"
    });
    while (i < keys.length) {
      if (col_sort[i]) {
        colmod.push({
          align: "center",
          name: keys[i],
          index: keys[i],
          width: 35,
          sorttype: col_sort[i]
        });
      } else {
        colmod.push({
          name: keys[i],
          index: keys[i],
          width: 40
        });
      }
      i++;
    }
    debugger;
    jQuery(grid_id).jqGrid({
      url: url,
      datatype: "json",
      mtype: "GET",
      height: "100%",
      rowNum: 40,
      rowList: [20, 30, 40, 50],
      jsonReader: {
        root: Jroot,
        repeatitems: false,
        page: root + ".currpage",
        total: root + ".totalpages",
        records: root + ".totalrecords",
        repeatitems: false
      },
      colNames: colname,
      colModel: colmod,
      viewrecords: true,
      gridview: true,
      autoencode: true,
      ignoreCase: true,
      pager: pager_id,
      pgtext: "Page",
      hidegrid: false,
      paging: true,
      grouping: true,
      groupingView: {
        groupField: ['cadet.name'],
        groupColumnShow: [true],
        groupText: ['<b>Cadet {0}</b>'],
        hideFirstGroupCol: true,
        groupCollapse: false,
        groupOrder: ['asc'],
        plusicon: 'ui-icon-circle-plus',
        minusicon: 'ui-icon-circle-minus',
        groupDataSorted: true
      },
      loadComplete: function(data) {
        var groups, idSelectorPrefix, l, _results;
        i = void 0;
        groups = $(this).jqGrid("getGridParam", "groupingView").groups;
        l = groups.length;
        idSelectorPrefix = "#" + this.id + "ghead_0_";
        i = 0;
        _results = [];
        while (i < l) {
          if (groups[i].cnt === 1) {
            $(idSelectorPrefix + i).hide();
          }
          _results.push(i++);
        }
        return _results;
      }
    });
    groupingView = $(grid_id).jqGrid("getGridParam", "groupingView");
    plusIcon = groupingView.plusicon;
    minusIcon = groupingView.minusicon;
    $(grid_id).click(function(e) {
      var $groupHeader, $target;
      $target = $(e.target);
      $groupHeader = $target.closest("tr.jqgroup");
      if ($groupHeader.length > 0) {
        if (e.target.nodeName.toLowerCase() !== "span" || (!$target.hasClass(plusIcon) && !$target.hasClass(minusIcon))) {
          $(this).jqGrid("groupingToggle", $groupHeader.attr("id"));
          return false;
        }
      }
    });
    if (type === "header") {
      headers = this.get("headers");
      jQuery(grid_id).jqGrid("setGroupHeaders", {
        useColSpanStyle: true,
        groupHeaders: headers
      });
    }
    jQuery(grid_id).jqGrid("setGridWidth", jQuery("#content").width(), true);
  }
});

在我的 colmod 中，我为我的操作列推送了第一个对象（在 colname 中推送了“操作”）。当我运行代码时，我的操作列中出现了未定义的列。请帮助。我已经阅读了相同的 jqGrid 文档。这是相同的屏幕截图，如您所见，操作列未定义。

4

1 回答 1

0

我使用一种简单的方法在“gridComplete”中将按钮添加到 jqgrid 我在运行时创建我的按钮并将它们附加到我的网格中，定义我想在按钮的“onclick”中执行什么

$("#myGrid").jqGrid({
datatype: "local",
colNames: ["Column 1", "Column 2", "Columen 3", "Add", "Edit", "Delete"],
colModel: [
    { name: "Column 1" },
    { name: "Column 2" },
    { name: "Columen 3" },
    { name: "actionAdd" },
    { name: "actionEdit" },
    { name: "actionDelete" }
],
scrollOffset: 0,
rowNum: 1000,
height: 100,
width: 750,
viewrecords: true,
loadonce: true,
gridComplete: function () {
    var grid = jQuery("#myGrid");
    var ids = grid.jqGrid('getDataIDs');
    for (var i = 0; i < ids.length; i++) {
        var rowId = ids[i];
        // create button in runtime
        var buttonAdd = "<input type='button' value='Add' onclick=\"addRecord(" + rowId + ");\" />";
        var buttonEdit = "<input type='button' value='Edit' onclick=\"editRecord(" + rowId + ");\" />";
        var buttonDelete = "<input type='button' value='Edit' onclick=\"DeleteRecord(" + rowId + ");\" />";

        // add button to the grid
        grid.jqGrid('setRowData', rowId, { actionAdd: buttonAdd });
        grid.jqGrid('setRowData', rowId, { actionEdit: buttonEdit });
        grid.jqGrid('setRowData', rowId, { actionDelete: buttonDelete });

    }
}});

您还可以在页脚中添加按钮，例如默认网格操作

$('#myGrid').jqGrid('navButtonAdd', '#myGrid-Pager', {
        caption: "",
        width: 100,
        buttonicon: "ui-icon-pencil",
        onClickButton: function () {
            // your add function goes here
        }
    });
于 2014-12-11T06:48:42.193 回答