DataTable Editor Dependent() -只显示/隐藏某些值取决于第一个选择的值

DataTable Editor Dependent() - Show/Hide only certain values depending on first selected value

本文关键字:取决于 第一个 选择 隐藏 Dependent Editor 显示 -只 DataTable      更新时间:2023-09-26

我在DataTable Editor实例中有两个选择字段和一个工作依赖(),看起来像这样:

editor.dependent( 'account_sectors2.sector_id', function ( val ) {
    return ( val == null ) ?
        { hide: ['account_sectors3.sector_id'] } :
        { show: ['account_sectors3.sector_id'] }; 
} );

到目前为止,每次如果我选择第一个选择的值,例如(11,23,31 -33,…)我得到第二个选项的所有选择选项值。但是我想要的是,根据第一个选择的值只显示第二个选择值的某些值,例如像这样

价值观:

11
|_111
|_112
|_113
|_114
23
|_236
31-33
|_311
|_312
|_315
|_325
|_332
|_334
|_335

如何做到这一点?

datatable.php

Field::inst( 'account_sectors2.sector_id' )
    ->options( 'sectors2', 'NaicsCode2', 'NaicsTitle2' ),      
Field::inst( 'sectors2.NaicsTitle2' ),               
Field::inst( 'account_sectors3.sector_id' )
    ->options( 'sectors3', 'NaicsCode3', 'NaicsTitle3' }
),     
Field::inst( 'sectors3.NaicsTitle3' )

返回的json如下:

{
"data":[
...
],
"options":{
  "account_sectors2.sector_id":[
     {
        "label":"Agriculture, Forestry, Fishing and Hunting",
        "value":"11"
     },
     {
        "label":"Construction",
        "value":"23"
     },
     {
        "label":"Manufacturing",
        "value":"31-33"
     },
     {
        "label":"Mining, Quarrying, and Oil and Gas Extraction",
        "value":"21"
     },
     {
        "label":"Utilities",
        "value":"22"
     }
  ],
  "account_sectors3.sector_id":[
     {
        "label":"Animal Production and Aquaculture",
        "value":"112"
     },
     {
        "label":"Apparel Manufacturing",
        "value":"315"
     },
     {
        "label":"Beverage and Tobacco Product Manufacturing",
        "value":"312"
     },
     {
        "label":"Chemical Manufacturing",
        "value":"325"
     },
     {
        "label":"Computer and Electronic Product Manufacturing",
        "value":"334"
     },
     {
        "label":"Construction of Buildings",
        "value":"236"
     },
     {
        "label":"Crop Production",
        "value":"111"
     },
     {
        "label":"Electrical Equipment, Appliance, and Component Manufacturing",
        "value":"335"
     },
     {
        "label":"Fabricated Metal Product Manufacturing",
        "value":"332"
     },
     {
        "label":"Fishing, Hunting and Trapping",
        "value":"114"
     },
     {
        "label":"Food Manufacturing",
        "value":"311"
     },
     {
        "label":"Forestry and Logging",
        "value":"113"
     }
  ]
},
"files":[
],
"draw":1,
"recordsTotal":"20",
"recordsFiltered":"20"
}

在dependent()函数中也可以进行回调。我想这就是该走的路……但我正在努力实现它。

editor.dependent( 'account_sectors2.sector_id', function ( val, data, callback ) {
  $.ajax( {
    url: 'datatable.php',
    dataType: 'json',
    success: function ( json ) {
        callback( json );
    }
} );
} );

您需要在成功函数中设置依赖选择,如下面的代码片段

editor.dependent( 'account_sectors2.sector_id', function ( val, data, callback ) {
var test= new Array({"label" : "Any", "value" : "Any"});
$.ajax({
    url: document.location.origin+'/Nexus/php/GetUnits.php',
    dataType: 'json',
    success: function (json) {
        console.log( 1, JSON.stringify( json ) );
        for(var a=0;a < json.length;a++){
            obj= { "label" : json[a][0], "value" : json[a][1]};
            test.push(obj);
        }
        console.log( 2, JSON.stringify( json ) );
        editor.field('your destination field').update(test);
        callback(test);
    }
});

这里有讨论