easyui combotree组合树的使用

jsp

<select id="cc" class="easyui-combotree" style="width:200px;" data-options="url:'tree_data1.json',required:true"> </select>

 

js

$('#cc').combotree({ url: 'tree_data1.json', required: true });

若需要进行复杂的控制，如单选节点，并且可以取消选择，可通过如下进行控制：

$("#cc").combotree({  
    multiple : true,//设置可以多选，显示多选框，不设置不会出现多选框  
    url: 'tree_data1.json',//data : [{……},{……},{……}],//数据省略 
    required: false,  
    checkbox : true,//显示多选框  
    cascadeCheck : false, //取消级联操作
    onlyLeafCheck : true,//只在叶子节点显示多选框  
    onBeforeSelect : function(node){  
        $(this).tree("check", node.target);//控制点击文字时也能勾选  
        return false;//避免不是选择勾选框而是点击文字出现黄色的选中条纹  
    },  
    onBeforeCheck : function(node, checked){//控制只能选一项  
        if(checked){//当前为选中操作  
            var nodes = $(this).tree("getChecked");  
            //控制只能选一项，选中某一项后后面不能再勾选  
            if(nodes.length > 0){  
                for(var i=0; i<nodes.length; i++){  
                    $(this).tree("uncheck", nodes[i].target);//清除之前选中的项  
                }  
            }  
        }  
    }  
});  

 

tree_data1.json 格式如下（接口中返回JsonArray即可）：

json来自：(http://www.jeasyui.net/demo/tree_data1.json)

[{
	"id":1,
	"text":"My Documents",
	"children":[{
		"id":11,
		"text":"Photos",
		"state":"closed",
		"children":[{
			"id":111,
			"text":"Friend"
		},{
			"id":112,
			"text":"Wife"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"Program Files",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

 

其中亦可借鉴：https://www.cnblogs.com/fanshuyao/p/8968908.html