0

私は自分のグリッドを持っています.jqGridに追加/編集/削除オプションを備えたアクション列が必要です。JqG​​rid のドキュメントを読んだところ、JqGrid がフォーマッタ アクションを使用してこの関数を提供していることを知りました。コードに同じものを実装しましたが、アクション列は未定義のままです。これが私のコードです。1.Grid_id 2.Pager_id 3.Colname 4.url (リモート データを取得するため) の 4 つのパラメータを渡しています。

({
  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 に答える