5

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

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

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

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

4

4 回答 4

4

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

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;
}
于 2013-11-05T10:30:42.180 回答
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;
}
于 2015-03-19T02:52:31.247 回答
1

我不得不破解 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// 字段不会传回任何值，因此不要将它们包含在更新查询中。

于 2013-09-28T22:17:56.933 回答
0

更简单的下拉版本

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

无需禁用所有选项:)

于 2015-10-23T14:25:27.867 回答