JQGrid – 以编辑forms显示其他列
我有一个JQGrid表，其中有30多列。 我认为这些列的内联编辑不是用户友好的。 所以我想在网格模式下显示几列，并仅在用户打开此行的编辑表单时显示所有列。 这可能吗？ 在教程中找不到这个。
先感谢您！
如果要显示而不是编辑列，则使用viewGridRow作为editGridRow的用法。 此外，我建议你考虑使用columnChooser ，它允许用户隐藏/显示网格的列或更改其顺序。 例如，您可以在网格中仅显示30行的子集，使用navGrid添加“查看详细信息”按钮（您需要使用view: true选项）并使用navButtonAdd添加带有列选择器的自定义按钮。 您还可以在ondblClickRow回调中显式调用ondblClickRow 。 需要在查看/编辑/添加表单中需要可见/可编辑的所有隐藏列的定义中添加属性editrules: {edithidden: true}
生成的网格可能与以下演示类似：
$(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: "dMY" }, editable: true, datefmt: "dMY", 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; }