利用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");//清空所選項