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

Posted 2023-05-09

【中文标题】如果使用 jtable 事件满足某个条件，则启用 jquery-jtable 隐藏字段

【英文标题】：Enable jquery-jtable hidden fields if a certain condition is met using jtable events

【发布时间】：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');

块引用

);

【参考方案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(); 会从表单中完全移除字段容器，因此用户看不到任何内容，也不会向服务器发送任何参数。