Question

我正在根据另一个数据属性的值级联多选。

我有这个方法在父级的onChanged事件中调用。通过父母我的意思是过滤孩子的是什么，即

Parent = Department Multiselect
Child = Staff Multiselect。

子元素的数据属性为data-departmentid。

function cascadeMultiselect(control, targetControl, key) {
         this.control = control;
         this.targetControl = targetControl;
         this.key = key;
         this.toHide = [];
         this.toShow =[];
         //Get controls selectedIds
         this.selectedIds = function() {
             var selected = [];
             _.each($(this.control + " option:selected"), function(c) {
                 selected.push($(c).val());
             });
             return selected;
         };

         //Now filter 
         this.filter = function() {

             //Get target control attribute values
             _.each($(targetControl + " option"), function(tc) {
                 //Use the val as an identifier
                 var val = $(tc).val();
                 var data = $(tc).attr("data-" + key);
                 data = data.split(",");

                 var isMatch = anyMatchInArray(data, this.selectedIds());

                 if(!isMatch){
                   $(tc).hide();
                 }
             });
         }

          this.filter();

          $(targetControl).multiselect('rebuild');           
     }

这样被调用：

 onChange: function() {
             cascadeMultiselect('#departmentlist', '#stafflist', "DepartmentID");
         }

问题是我无法隐藏元素。过滤器工作得很好，我试过了：

$(tc).hide(); // tc = targetControl option

我也试过刷新而不是重建。

Answer 1

因为似乎唯一的方法是存储多选的值，然后删除/添加相关值。

我决定使用一个基本的Cache类：

function cascadeMultiselect(control, targetControl, key, cache) {
         this.control = control;
         this.targetControl = targetControl;
         this.key = key;
         this.toHide = [];
         this.toShow =[];
        //To reset the multiselect
         this.reset = function(){
             $(targetControl).html('');
             $(targetControl).multiselect('dataprovider', cache.all)
         }

         //Get controls selectedIds
         this.selectedIds = function() {
             var selected = [];
             _.each($(this.control + " option:selected"), function(c) {
                 selected.push($(c).val());
             });
             return selected;
         };


         //Now filter 
         this.filter = function() {

             //Get target control attribute values
             _.each($(targetControl + " option"), function(tc) {
                 //Use the val as an identifier
                 var val = $(tc).val();
                 var data = $(tc).attr("data-" + key);
                 data = data.split(",");

                 var isMatch = anyMatchInArray(data, this.selectedIds());
                 console.log($(tc));
                 if(!isMatch){
                   $(tc).remove();
                 }
             });

         }
         //If nothing selected then reset the multiselect
           if(this.selectedIds().length == 0){
                 this.reset();
                 return;
             }else{
                 this.filter();
             }

         $(targetControl).multiselect('rebuild');

     }

现在的功能如下：

 if(cache != null){
             cache.setAll(this.dataToAdd);
         }

当我第一次使用dataprovider填充多选时，我将数据添加到缓存中：

INSERT INTO masterTable(CountryFk, CompanyName, WebSite)
SELECT CountryFk, CompanyName, min(WebSite) 
  FROM Table2 
 group by CountryFk, CompanyName;
INSERT INTO masterTable(CountryFk, CompanyName)
SELECT distinct CountryFk, CompanyName
  FROM Table1 
  LEFT JOIN masterTable
    on masterTable.CountryFk = Table1.CountryFk 
   and masterTable.CompanyName = Table1.CompanyName 
 where masterTable.CountryFk is null;

Bootstrap Multiselect基于另一个下拉列表过滤值

1 个答案: