如果使用 jtable 事件满足某个条件，则启用 jquery-jtable 隐藏字段答案

【问题标题】：Enable jquery-jtable hidden fields if a certain condition is met using jtable events如果使用 jtable 事件满足某个条件，则启用 jquery-jtable 隐藏字段
【发布时间】：2021-06-11 08:28:12
【问题描述】：

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

$('#EditDataTableDaybooks').jtable({ 标题：'账户日记'， paging: true, //启用分页 pageSize: 25, //设置页面大小（默认：10） sort: true, //启用排序 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'},
    },

这些字段在初始化时保持隐藏帐户名称： { 类型：'隐藏'，标题：'帐户名称'，宽度：'10%'， }, 帐号： { 类型：'隐藏'，标题：'帐号'，宽度：'10%'， }, ifsc_code: { 类型：'隐藏'，标题：'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');
}

块引用

});

【问题讨论】：

标签： javascript jquery forms jquery-jtable

【解决方案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">。

此外，如果在 jTable 字段定义中定义了 inputClass，则该类将出现在输入字段本身中。

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

换个思路，完全定义每个字段，你可以使用 formCreated 函数来移除、隐藏或禁用你想要抑制的字段。

最简单的方法是给所有“隐藏”字段inputClass: "hideableInput",，然后在formCreated 函数中只需要data.form.find('.hideableInput').attr('disabled', true); 来禁用这些字段。

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

【讨论】：