JQGrid - 在编辑表单中显示附加列

Question

我有一个包含 30 多列的 JQGrid 表。我认为这些列的内联编辑不会对用户友好。所以我想在网格模式下显示几列，并且仅当用户打开该行的编辑表单时才显示所有列。这可能吗？在教程中找不到这个。

提前谢谢你！

Answer 1

如果你想显示而不是编辑列，那么viewGridRow 的用法就像editGridRow 的用法一样。此外，我建议您考虑使用columnChooser，它允许用户隐藏/显示网格的列或更改其顺序。例如，您可以在网格中仅显示 30 行的子集，使用 navGrid 添加查看详细信息按钮（您需要使用 view: true 选项）并使用 navButtonAdd 添加带有列选择器的自定义按钮。您还可以在ondblClickRow 回调中显式调用viewGridRow。需要在所有隐藏列的定义中添加属性editrules: {edithidden: true}，这些列需要在查看/编辑/添加表单中可见/可编辑

生成的网格可能类似于the following demo 或此处的样子：

$(function () {
  "use strict";
  var mydata = [
    { id: "10",  invdate: "2007-10-01", name: "test1",  note: "note1",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
    { id: "20",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
    { id: "30",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
    { id: "40",  invdate: "2007-10-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
    { id: "50",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
    { id: "60",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
    { id: "70",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
    { id: "80",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
    { id: "90",  invdate: "2007-09-01", name: "test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
    { id: "100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
    { id: "110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
    { id: "120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
  ],
      $grid = $("#list"),
      initDateEdit = function (elem) {
        $(elem).datepicker({
          dateFormat: "dd-M-yy",
          autoSize: true,
          changeYear: true,
          changeMonth: true,
          showButtonPanel: true,
          showWeek: true
        });
      },
      initDateSearch = function (elem) {
        var $self = $(this);
        setTimeout(function () {
          $(elem).datepicker({
            dateFormat: "dd-M-yy",
            autoSize: true,
            changeYear: true,
            changeMonth: true,
            showWeek: true,
            showButtonPanel: true,
            onSelect: function () {
              if (this.id.substr(0, 3) === "gs_") {
                // call triggerToolbar only in case of searching toolbar
                setTimeout(function () {
                  $self[0].triggerToolbar();
                }, 100);
              }
            }
          });
        }, 100);
      },
      numberTemplate = {formatter: "number", align: "right", sorttype: "number",
                        editrules: {number: true, required: true},
                        searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }};

  $grid.jqGrid({
    datatype: "local",
    data: mydata,
    colNames: ["Client", "Date", "Closed", "Shipped via", "Notes", "Tax", "Amount", "Total"],
    colModel: [
      { name: "name", align: "center", editable: true, width: 65, editrules: {required: true} },
      { name: "invdate", width: 80, align: "center", sorttype: "date",
       formatter: "date", formatoptions: { newformat: "d-M-Y" }, editable: true, datefmt: "d-M-Y",
       editoptions: { dataInit: initDateEdit },
       searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
      { name: "closed", width: 70, align: "center", editable: true, formatter: "checkbox",
       edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
       stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
      { name: "ship_via", width: 105, align: "center", editable: true, formatter: "select",
       edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
       stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
      { name: "note", width: 60, sortable: false, editable: true, edittype: "textarea", hidden: true },
      { name: "tax", width: 52, editable: true, template: numberTemplate, hidden: true  },
      { name: "amount", width: 75, editable: true, template: numberTemplate, hidden: true },
      { name: "total", width: 60, template: numberTemplate }
    ],
    cmTemplate: {editable: true, editrules: {edithidden: true}},
    rowNum: 10,
    rowList: [5, 10, 20],
    pager: "#pager",
    gridview: true,
    autoencode: true,
    ignoreCase: true,
    sortname: "name",
    viewrecords: true,
    sortorder: "desc",
    rownumbers: true,
    shrinkToFit: false,
    height: "auto",
    ondblClickRow: function (rowid) {
      $(this).jqGrid("viewGridRow", rowid);
    }
  });
  $.extend($.jgrid.view, {
    caption: "View Record Details",
    recreateForm: true
  });
  $grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false, search: false, refresh: false, view: true,
                                     viewtitle: "View details of selected row"
                                    });
  $grid.jqGrid("navButtonAdd", "#pager", {
    caption: "",
    buttonicon: "ui-icon-calculator",
    title: "Choose Columns to display in the grid",
    onClickButton: function () {
      $(this).jqGrid("columnChooser");
    }
  });
});

.ui-jqgrid-hdiv { overflow-y: hidden; }

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/plugins/ui.multiselect-fixed.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
  $.jgrid.no_legacy_api = true;
  $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/plugins/jQuery.jqGrid.columnChooser.js"></script>

<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>

顺便可以使用formoptions 的rowpos 和colpos 属性以多栏形式显示添加/编辑/查看表单的信息。对应的代码示例见the answer。