Question

我有一个预填充公司LAN IP地址的表，其中包含相关数据，状态等字段。（jquery-）jtable字段集合配置如下。

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

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

我已经阅读了文档，但看不到在编辑表单中以只读方式显示字段的方法。有什么想法吗？

Answer 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;
}

Answer 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;
}

Answer 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 //字段不会传回任何值，因此请勿在更新查询中包含它们。

Answer 4

下拉列表的更简单版本

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

无需禁用所有选项：）

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

4 个答案: