jqgrid表单编辑：向表单添加字段

Question

几个月以来我一直在使用 jqGrid，我真的很高兴这样做 :)

我在 ASP.NET Web 应用程序中成功使用了 jqGrid，一切正常。我决定使用 jqGrid 表单编辑，因为实体有很多我需要处理的属性。 我知道，如果 colModel 包含 5 个 col，如果属性具有可编辑：true，它们会出现在模式对话框表单（编辑操作）上。此外，我可以设置 4 个属性是可见的，最后一个是隐藏的（即使它可以出现在表单上，​​通过设置 edithidden: true）。

有没有办法可以在 colModel 中设置 4 个属性，但弹出模式表单中有一个、两个或更多字段？

编辑：

请看这段代码：

ajaxSelectOptions: { type: "POST", contentType: "application/json; charset=utf-8", },
colNames: [
        'ID', 'Code', 'Number',  'Floor (nr.)', 'Descr', 'Type', 
        'Create by', 'Creation date', 
        'Status', 'Features'],
colModel: [
        { name: 'ID', index: 'id', width: 10, align: "center", search: false, sorttype: 'int', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, editable: false, editoptions: { readonly: true} },
        { name: 'Code', index: 'Code', width: 20, align: "center", sorttype: 'text', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, editable: false, editoptions: { readonly: true} },
        { 
        name: 'Number', 
        index: 'Number', 
        width: 20, 
        align: "center", 
        sorttype: 'int', 
        searchoptions: { sopt: ['eq', 'ne', 'cn'] }, 
        editable: true, 
        editoptions: { size : 20 },
        editrules: { required: true }
        },
        {
        name: 'Floor',
        index: 'Floor',
        width: 30,
        align: "center",
        sorttype: 'int',
        search: false,
        edittype: 'select',
        editable: true,
        editoptions: {
            dataUrl: '<%# ResolveUrl("~/path/to/myCSharpWebService") %>',
            buildSelect: function (data) {
            var retValue = $.parseJSON(data);
            var response = $.parseJSON(retValue.d);

            var s = '<select id="myid" name="myid">';

            if (response && response.length) {
                for (var i = 0, l = response.length; i < l; i++) {
                s += '<option value="' + response[i]["Id"] + '">' + response[i]["Descrizione"] + '</option>';
                }
            }

            return s + "</select>";
            }
        },
        editrules: { required: true }
        },
        { name: 'Descr', index: 'Descr', width: 40, align: "center", sorttype: 'text', editable: true, editoptions: { size: 10} },
        { 
        name: 'Type', 
        index: 'Type', 
        width: 50, 
        align: "center", 
        sorttype: 'text', 
        edittype: 'select',
        editable: true,
        editoptions: {
            dataUrl: '<%# ResolveUrl("~/path/to/myCSharpWebService") %>',
            buildSelect: function (data) {
            var retValue = $.parseJSON(data);
            var response = $.parseJSON(retValue.d);

            var s = '<select id="myid2" name="myid2">';

            if (response && response.length) {
                for (var i = 0, l = response.length; i < l; i++) {
                s += '<option value="' + response[i]["Id"] + '">' + response[i]["Descrizione"] + '</option>';
                }
            }

            return s + "</select>";
            }
        },
        editrules: { required: true }
        },
        { name: 'CreatedBy', index: 'CreatedBy', align: "center", search: false, sorttype: 'text', width: 40, searchoptions: { sopt: ['eq', 'ne', 'cn'] }, editable: false, editoptions: { readonly: true} },
        { name: 'CreationDate', index: 'CreationDate', align: "center", search: false, sorttype: 'text', width: 30, searchoptions: { sopt: ['eq', 'ne', 'cn'] }, editable: false, editoptions: { readonly: true} },
        { 
        name: 'Status',
        index: 'Status', 
        width: 50, 
        hidden: true, 
        edittype: 'select',
        editable: true, 
        editrules: { edithidden: true, required: true }, 
        editoptions: {
            dataUrl: '<%# ResolveUrl("~/path/to/myCSharpWebService") %>',
            buildSelect: function (data) {
            var retValue = $.parseJSON(data);
            var response = $.parseJSON(retValue.d);

            var s = '<select id="myid3" name="myid3">';

            if (response && response.length) {
                for (var i = 0, l = response.length; i < l; i++) {
                s += '<option value="' + response[i]["Id"] + '">' + response[i]["Descrizione"] + '</option>';
                }
            }

            return s + "</select>";
            }
        }
        },
        { 
        name: 'Features',
        index: 'Features', 
        width: 50, 
        hidden: true, 
        edittype: 'select',
        editable: true, 
        editrules: { edithidden: true, required: true }, 
        editoptions: {
            dataUrl: '<%# ResolveUrl("~/path/to/myCSharpWebService") %>',
            buildSelect: function (data) {
            var retValue = $.parseJSON(data);
            var response = $.parseJSON(retValue.d);

            var s = '<select id="myid4" name="myid4">';

            if (response && response.length) {
                for (var i = 0, l = response.length; i < l; i++) {
                s += '<option value="' + response[i]["Id"] + '">' + response[i]["Descrizione"] + '</option>';
                }
            }

            return s + "</select>";
            }
        }
        }
      ],

这是我用来在我的 aspx 页面上创建网格的函数的摘录。从 colModel 可以看出，有 10 个 col，但 jqGrid 只显示了其中的 7 个；我需要其他的，因为当我在网格上编辑记录时，我想以模式弹出形式显示它们。

现在，我想写下更简洁的代码：我更愿意在构建弹出窗口时在编辑按钮单击时添加这 3 个字段，而不是在 colModel 中列出它们

Answer 1

如果我理解您的问题正确，您将能够通过在编辑表单的beforeShowForm 回调中动态设置readonly='readonly' 或disabled='disabled' 属性来实现您的要求。

为了一般理解，重要的是要知道当 jqGrid 创建编辑表单时，它也会将所有隐藏字段放入表单中。它简化了在表单提交时将隐藏字段发送到服务器。因此，您可以在网格的隐藏列中包含您计划在编辑表单中显示的任何信息。在beforeShowForm 回调的实现中，您可以动态显示隐藏字段，但如果需要，可以设置“只读”属性。例如，您的网格中的'ID'、'Code'、'CreatedBy' 和'CreationDate' 可以以方式显示。

您可以另外使用column chooser 来隐藏列，但如果确实需要，允许用户显示附加信息。您可以找到here 列选择器的使用示例。

对您的代码的一些更一般的建议。我建议您在网格中使用名为 column templates 的名称，并分享您使用的 buildSelect 的代码。

例如，如果您在网格的大多数列中使用align: "center"，您可以使用jqGrid 的cmTemplate: {align: "center"} 选项并从每一列中删除align: "center"。您还可以将在所有网格中随处使用的一些模板定义为 colModel 的 template 参数。在the answer 中，您将找到一个简单的myDateTemplate 格式化程序的示例。如果在列中使用datepicker，模板将更加复杂，但代码的共享将更加重要。请参阅来自the answer 的the demo 或来自the another answer 的the demo。