Question

我已经使用了几个月的jqGrid，我很高兴这样做：）

我在ASP.NET Web应用程序中成功使用jqGrid，一切正常。我决定使用jqGrid表单编辑，因为实体有很多属性我需要应对。据我所知，如果colModel包含5个cols，它们会出现在模态对话框表单（编辑操作）上，如果属性具有editable：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个，但是其中只有7个由jqGrid显示;我需要其他人因为我想在网格上编辑记录时以模态弹出窗口显示它们。

现在，我想写下更清晰的代码：我建议在构建弹出窗口时在编辑按钮上添加这3个以上的字段，而不是在colModel中列出它们

Answer 1

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

为了一般理解，重要的是要知道当jqGrid创建编辑表单时，它也会将所有隐藏字段放在表单中。它简化了在表单提交时向服务器发送隐藏字段的过程。因此，您可以在网格的隐藏列中包含您计划在编辑表单中显示的任何信息。在beforeShowForm回调的实现中，您可以动态显示隐藏字段，但如果需要，可以设置'readonly'属性。例如，您网格中的'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 demo中的the answer或the demo中的the another answer。

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

1 个答案: