jquery-jable：如何在编辑表单中将字段显示为只读？答案

【问题标题】：jquery-jable: How to display a field as read-only in the edit form?jquery-jable：如何在编辑表单中将字段显示为只读？
【发布时间】：2013-09-21 19:33:12
【问题描述】：

我有一个预先填充了公司 LAN IP 地址的表，其中包含关联数据、状态等字段。(jquery-)jtable 字段集合是这样配置的。

fields: {
  id: { title: 'ID'},
  ip: { title: 'IP address, edit: false }
  more: { ... }
}

这可行，但问题是当编辑对话框弹出时，用户看不到正在编辑的记录的 IP 地址，因为 jtable 的编辑表单没有显示该字段。

我已通读文档，但看不到任何在编辑表单中将字段显示为只读的方法。有什么想法吗？

【问题讨论】：

标签： jquery-jtable

【解决方案1】：

您不需要破解 jTable 库资产，这只会在您想要更新到更高版本时导致痛苦。您需要做的就是通过 jTable 字段选项“input”创建自定义输入，在此处查看示例字段设置以完成您需要的操作：

JobId: {
    title: 'JobId',
    create: true,
    edit: true,
    list: true,
    input: function (data) {
        if (data.value) {
            return '<input type="text" readonly class="jtable-input-readonly" name="JobId" value="' + data.value + '"/>';
        } else {
            //nothing to worry about here for your situation, data.value is undefined so the else is for the create/add new record user interaction, create is false for your usage so this else is not needed but shown just so you know when it would be entered
        }
    },
    width: '5%',
    visibility: 'hidden'
},

以及简单的样式类：

.jtable-input-readonly{
    background-color:lightgray;
}

【讨论】：

这不需要是输入。它可以是一个跨度： if (data.value) { return '' +data.value + ''; } 其他 { }
它可以是任何你想要的 HTML 完全取决于你想要如何显示

【解决方案2】：

我有简单的解决方案：

formCreated: function (event, data) 
{
    if(data.formType=='edit') {
        $('#Edit-ip').prop('readonly', true);
        $('#Edit-ip').addClass('jtable-input-readonly');
    }
},

对于下拉菜单，禁用除当前选项之外的其他选项：

$('#Edit-country option:not(:selected)').attr('disabled', true);

以及简单的样式类：

.jtable-input-readonly{
     background-color:lightgray;
}

【讨论】：

【解决方案3】：

我不得不破解 jtable.js。从第 2427 行开始。更改的行用“*”标记。

            //Do not create element for non-editable fields
            if (field.edit == false) {
               //Label hack part 1: Unless 'hidden' we want to show fields even though they can't be edited. Disable the 'continue'.
*              //continue;      
            }

            //Hidden field
            if (field.type == 'hidden') {
                $editForm.append(self._createInputForHidden(fieldName, fieldValue));
                continue;
            }

            //Create a container div for this input field and add to form
            var $fieldContainer = $('<div class="jtable-input-field-container"></div>').appendTo($editForm);

            //Create a label for input
            $fieldContainer.append(self._createInputLabelForRecordField(fieldName));

            //Label hack part 2: Create a label containing the field value.
*           if (field.edit == false) {
*               $fieldContainer.append(self._myCreateLabelWithText(fieldValue));
*               continue;       //Label hack: Unless 'hidden' we want to show fields even though they can't be edited.
*           }

            //Create input element with it's current value

在 _createInputLabelForRecordField 之后添加这个函数（大约 1430 行）：

/* Hack part 3: Creates label containing non-editable field value.
*************************************************************************/
_myCreateLabelWithText: function (txt) {
   return $('<div />')
     .addClass('jtable-input-label')
     .html(txt);
},

对于 Metro 主题，字段名称和值都将为灰色。

小心您要传回的更新脚本。 //edit: false// 字段不会传回任何值，因此不要将它们包含在更新查询中。

【讨论】：

这不应该被标记为答案，你不应该改变第三方库，当你想更新到最新版本时会发生什么：打开/关闭原则。在面向对象编程中，开放/封闭原则指出“软件实体（类、模块、函数等）应该对扩展开放，对修改关闭”；

【解决方案4】：

更简单的下拉菜单版本

$('#Edit-country').prop('disabled',true);

无需禁用所有选项:)

【讨论】：