JQGrid-以编辑形式显示其他列 [英] JQGrid - show additional columns in edit form
问题描述
我有一个JQGrid表，其中有30多个列.我认为这些列的内联编辑将不是用户友好的.所以我想在网格模式下显示几列，并且仅在用户打开此行的编辑表单时显示所有列.这可能吗?在教程中找不到此内容.
I have a JQGrid table which has more than 30 columns. I think inline editing of these columns will not be user-friendly. So i would like to show several columns in grid mode, and show all columns only when user opens edit form of this row. Is this possible? Could not find this in tutorials.
提前谢谢！
推荐答案
如果要显示而不是要编辑列，请使用 editGridRow .此外，我建议您考虑使用 columnChooser 它允许用户隐藏/显示网格的列或更改其顺序.例如，您只能在网格中显示30行的子集，请使用 navGrid 添加查看详细信息"按钮(您需要使用view: true选项)并使用 navButtonAdd 添加带有列选择器的自定义按钮.您还可以在ondblClickRow回调内部显式调用viewGridRow.一项需要在所有隐藏列的定义中添加属性editrules: {edithidden: true}，这些隐藏列需要在查看/编辑/添加表单中可见/可编辑
If you want to show and not to edit the columns then the usage of viewGridRow as the usage of editGridRow. Moreover I would suggest you to consider to use columnChooser which allows user to hide/show columns of the grid or to change its order. For example you can display in the grid only subset of 30 rows, use navGrid to add View Details button (you need use view: true option) and use navButtonAdd to add custom button with column chooser. You can additionally makes explicit call of viewGridRow inside of ondblClickRow callback. One need add the properties editrules: {edithidden: true} in the definition of all hidden columns which need be visible/editable in View/Edit/Add forms
生成的网格看起来像以下演示或就像这里:
The resulting grid can look like on the following demo or like here:
$(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>
通过这种方式，您可以使用答案.
By the way you can use rowpos and colpos properties of formoptions to display information of Add/Edit/View forms in multicolumn form. See the answer for the corresponding code example.
这篇关于JQGrid-以编辑形式显示其他列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
