0

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

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

  • 父 = 部门多选
  • 孩子 = 员工多选。

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

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

4

1 回答 1

0

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

我决定使用一个基本的 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');

     }

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

 if(cache != null){
             cache.setAll(this.dataToAdd);
         }
于 2015-08-03T07:24:18.703 回答