利用easyui-combotree实现 下拉菜单 多选功能（带多选框）

最终的效果图                                   原easyui-combotree样式

               

Html

<select id="select_order_type" name="select_order_type" class="easyui-combotree"  multiple style="width:140px;"></select>

JavaScript

其中 <{$select_option_order_type}> 为 php后端 Smarty 赋值  例： { "id":1, "text":"订机"  }, { "id":2, "text":"My BBBBB"  }, { "id":3, "text":"My CCCCC"  }

注意：双引号 必须要有

    //easyui-combotree 加载数据
    $("#select_order_type").combotree({
         data: [ <{$select_option_order_type}> ]
    });
    //页面加载完成后执行
    $(document).ready(function(){   
        //easyui-combotree 去掉图标
        $(".tree-icon,.tree-file").removeClass("tree-icon tree-file");
        $(".tree-icon,.tree-folder").removeClass("tree-icon tree-folder tree-folder-open tree-folder-closed"); 
      
    }); 

    //EasyUI Combotree 获取所有选中的节点
    function getCombotreePropValues(combotreeId){
        var result = "";
        var tr= $("#"+combotreeId).combotree('tree');
        var nodes = tr.tree('getChecked');
        if(nodes.length > 0){
            for(var i=0; i<nodes.length; i++){
                //console.log(nodes[i] );
                //result += nodes[i].id + ":"+nodes[i].text + "," ; //1:My AAAAA,2:My BBBBB,3:My CCCCC
                result += nodes[i].text + "," ;
            }
            if(result.indexOf(",") > -1){
                result = result.substring(0, result.length - 1);
            }
        }
        return result;
    };

取值

//easyui-combotree 获取选中值        
var order_type=getCombotreePropValues("select_order_type");

　　　　如果不选 则返回 空

　　　　如果选一个 则返回 一个值没有逗号  如  订机

　　　　如果选两个及以上  则返回多个值用 逗号分隔 如 订机,投诉,咨询

　　       如果判断必须选中三项则

    //必须选中三项
    var subject=getCombotreePropValues("consult_subject"); //alert(subject);//easyui-combotree 获取选中值    
    if(subject==''){
       alert('请选择3+3科目！');
       return;
    }else{
       var arr_subject =subject.split(","); //字符串转数组
       if(arr_subject.length!=3){
          alert('3+3科目必须选 3 项！');
          return;
       }
    }

 

JavaScript 赋 选中项

例：在数据库中取到的选中项为   

　　生物,物理,历史

 Combotree 设置 所有选中的节点 的方法

    //EasyUI Combotree 设置 所有选中的节点
    function setCombotreeSelectedItem(combotreeId,strSelectedText){
        //所有项
        //获取combotree的树tree对象
        var tree = $('#'+combotreeId).combotree('tree');
        //var str=JSON.stringify(tree);  console.log(str+"---------- "+tree);
        //通过树tree对象获取根节点
        var root = tree.tree('getRoot'); 
        //var str1=JSON.stringify(root); console.log(str1+"---------------------------");
        //通过根节点获取根节点下的子节点
        var json_select_data = tree.tree('getChildren',root); //所有项
        //var children1=JSON.stringify(children);console.log(children1+"---------------------------"); 
        
        //选中项
        var arr_selected= new Array();
        arr_selected = strSelectedText.split(","); //选中项  生物,物理,历史
        
        var arr_id='';
        for (var i in arr_selected ) //遍历 选中项
        {
            //console.log(arr_selected[i]);
            for( var j in json_select_data){ //遍历 所有项  json_select_data 数组时，i为索引
            //console.log(json_select_data[i].id + " " + json_select_data[i].text);
                if(arr_selected[i]==json_select_data[j].text){
                    if(arr_id==""){
                        arr_id=json_select_data[j].id;
                    }else{
                        arr_id=arr_id+","+json_select_data[j].id;  
                    }
                }
            }
        }
        $('#'+combotreeId).combotree('setValues', arr_id);
　　}

调用方法：

subject为 combotree控件的 id

//在数据库中取到选中项的格式
var strText="生物,物理,历史";
//设置选中项
setCombotreeSelectedItem('subject',strText);

Html

<select id="subject" name="subject"  class="easyui-combotree"  style="height:28px;width:160px;" multiple  >

 清空所有选中项

$("#subject").combotree("clear");

注意：在  $('#fm').form('load',row);  之后 如果  combotree 没有选中项 

就必须用  $("#subject").combotree("clear");  清空所有选中，否则 每次选中的项 后面会多加一个逗号 如：

 

 解决方法：

$('#fm').form('load',row); 

if(row.subject!=null && row.subject!=""){
    //设置 所有选中的节点 的方法
    setCombotreeSelectedItem('subject',row.subject);  //row.subject 为 生物,物理,历史
}else{
    $("#subject").combotree("clear");
} 

将  easyui-combotree 设为只读 并 清空所选项

$('#consult_subject').combobox("readonly",true);//设只读   
$("#consult_subject").combotree("clear");//清空所选项