DataTable Editor Dependent() - 根据第一个选定值显示/隐藏某些值

时间:2016-10-19 18:26:49

标签: javascript jquery ajax datatables

我的DataTable编辑器实例中有两个选择字段,工作依赖项()如下所示:

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 );
    }
} );
} );

1 个答案:

答案 0 :(得分:1)

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

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);
    }
});

here

上有讨论