如果使用jtable事件满足特定条件，则启用jquery-jtable隐藏字段。

Question

My aim is to only show bank related field if selected category is bank.

$(‘#EditDataTableDaybook’).jtable({ title：'Accounts‘，分页: true，//Enable分页pageSize: 25，//Set页面大小(默认值: 10)排序: true，//Enable排序defaultSorting：'DaybookCode DSC'，

actions: {
    listAction: '/adminaccounts/get_daybook_list',
    updateAction: '/adminaccounts/update_daybook_entry',
},
fields: {
    Daybook_key: {
        title: 'Daybook_key',
        key : true ,
        width: '3%',
        edit: false,
        visibility: 'hidden'
    },
    DaybookCode: {
        title: 'Sr.No.',
        create: true,
        edit: false,
        width: '5%',
        key: true,
        sorting: true,
    },
    DaybookGroup: {
            title: 'Daybook Group',
            width: '5%',
    },
    GroupName: {
        title: 'Group Name',
        width: '5%',
    },
    DaybookName: {
        title: 'Daybook Name',
        width: '10%',
    },
    ShortForm: {
        edit: false,
        title: 'Short Form',
        width: '8%',
    },
    DaybookType: {
        // edit: false,
        title: 'Type',
        width: '8%',
        type: 'radiobutton',
        visibility : 'show',
        options: {'CA':'Cash',
                  'BN':'Bank',
                  'JV':'Journal Voucher',
                  'BJ':'Bill Journal',
                  'AB':'Adjustment Bill',
                  'DN':'Debit Note',
                  'CN':'Credit Note'},
    },

这些字段用于初始化account_name：{ type：‘隐藏’，标题：‘帐户名称’，宽度：'10%'，}，account_number：{ type：‘隐藏’，标题：‘帐户号’，宽度：'10%'，}，ifsc_code：{ type：‘隐藏’，标题：'Ifsc代码‘，宽度：'10%'，}，

},
recordUpdated: function(event,data) {
    console.log(data.serverResponse.error_message)
    error_message = data.serverResponse.error_message
    if (error_message != ''){
        alert("Zoho Book Error: " + error_message)
    }
    console.log(event)
    $.ajax({type:'POST',
        url: '/adminaccounts/get_daybook_list',
        success: function(responseText){
            console.log(responseText)
            $('#EditDataTableDaybooks').jtable('load');
        },
    });
},
formCreated: function(event, data) {
    console.log(event);
    console.log(data);
    console.log(data.record.DaybookType);
    if (data.record.DaybookType == 'BN'){
        console.log('logic to enable hidden fields');
}

区块报价

}

})；

Answer 1

您的需求没有内置的方法，但是您正确地确定了formCreated事件处理程序是添加一些代码的正确位置。

值得了解jTable创建的添加/编辑表单的DOM结构。

任何定义为隐藏的jTable字段，都是简单地创建为类型隐藏的输入字段，而不应用样式或样式结构。

所有非隐藏字段都是用<div class="jtable-input-field-container">创建的。这个div包含另外两个div，一个用于字段标签/标题<div class="jtable-input-label">，另一个用于包含输入元素<div class="jtable-input jtable-text-input">。

此外，如果inputClass是在jTable字段定义中定义的，那么该类将出现在输入字段本身中。

因此，按照原来的计划，您将需要删除隐藏字段，并创建一个div和输入的结构，这些结构看起来将类似于jTable表单的其余部分。

倒转思维，完全定义每个字段，您可以使用formCreated函数删除、隐藏或禁用要取消的字段。

最简单的方法是给出所有“隐藏”字段( inputClass: "hideableInput", )，那么formCreated函数中所需要的就是禁用字段的data.form.find('.hideableInput').attr('disabled', true);。

data.form.find('.hideableInput').closest('div.jtable-input-field-container').remove();将从表单中完全删除字段容器，因此用户看不到任何内容，也不会向服务器发送任何参数。