代码之家 › 专栏 › 技术社区 › ZeroBased_IX

基于另一个下拉列表引导多重选择筛选值

bootstrap-multiselect

0

ZeroBased_IX · 技术社区 · 9 年前

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

我有一个在父级的onChanged事件中调用的方法。我指的是通过什么过滤孩子,即

父级=部门多选
儿童=员工多选。

子元素的数据属性为 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

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

1 回复 | 直到 9 年前

1

0

ZeroBased_IX 9 年前

因为这样做的唯一方法似乎是存储multiselect的值,然后删除/添加相关值。

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

 var Cache = (function () {
         this.all = [];
        function Cache(control) {
            this.control = control;
         }

        Cache.prototype.getAll = function () {
            return this.all;
        };

        Cache.prototype.setAll = function (all) {
            this.all = all;
        };
        return 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');

     }

当我第一次使用数据提供程序填充multiselect时,我将数据添加到缓存中:

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