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

时间:2013-09-21 19:33:12

标签: jquery-jtable

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

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

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

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

4 个答案:

答案 0 :(得分:4)

您不需要破解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;
}

答案 1 :(得分: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;
}

答案 2 :(得分: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 //字段不会传回任何值,因此请勿在更新查询中包含它们。

答案 3 :(得分:0)

下拉列表的更简单版本

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

无需禁用所有选项:)