Combotree - ChinaSS/Util GitHub Wiki

#Combotree Combotree组件是下拉树选择组件。 依赖于Combo和Ztree组件

代码样例

###html

<input id="combotree" type="text" />

javascript

require(["combo"], function(Combo){
     //初始化
        var combotree = Combotree({
        	combo: {
     		 	    //要渲染的input的id
              id : "combo1",
                //下拉框的类型:单选or多选
                multi : true,
              key: {
	            	idKey: "id",
	            	textKey: "name"
	            },
	            placeholder: "请选择……",
	            event: {
	            	onShowPanel: function(){
	                	console.log("show");
	                },
	                onHidePanel: function() {
	                	console.log("hide");
	                },
	                onChange: function(n, o) {
	                	console.log(n);
	                	console.log(o);
	                }
	            }
        	},
        	ztree: {
        		/*
        		async: {
        			enable: true,
        			url: getServer() + "/static/core/examples/util/combotree/combotree.json"
        		}
        		*/
        	},
        	data: {
        		url: getServer() + "/static/core/examples/util/combotree/combotree.json",
        		success: function() {
        			console.log("load data success");
        		}
        	},
            search: {
            	enable: true,
            	fields: ["name", "text"]
            }
        });

        combotree.setValue(["4", "11"]);
})

option

| 属性名称 | 属性类型 | 是否必填 | 默认值 | 说明 |:---:| :---: | :---: | :---: |:-----------------------------------:|:----:| |combo | object | 必填 | |请参考Combo组件的option | |ztree | object | 必填 | | 请参考Ztree组件的setting | |data | array | | | ztree的数据源(local) | |- | object | | | ztree的数据源(remote)详细请参考下面的remote对象 | |value | string | | | 初始化选项值。多个选项的id之间用“,”隔开 | |- | array | | | 初始化选项值。比如:["value1", "value2"]每个字符串选项都会被当作id来处理| |- | array | | | 初始化选项值。比如:[{id: "001", name: "001"}, {id: "002", name: "002"}] | |search | object | | | 详细请参考下面的search对象 | |formatter | function | | | 定义如何格式化树节点的数据,比如:
function(value){ if (value.id == "root") { value.open = true; } } |

remote

| 属性名称 | 属性类型 | 是否必填 | 默认值 | 说明 |:---:| :---: | :---: | :---: |:-----------------------------------:|:----:| |url | string | 必填 | |请求地址 | |param | object | | | 请求参数 | |success | function(data) | | | 请求成功回调 | |error | function | | | 请求失败回调 |

search

| 属性名称 | 属性类型 | 是否必填 | 默认值 | 说明 |:---:| :---: | :---: | :---: |:-----------------------------------:|:----:| |enable | boolean | | false |是否启用搜索 | |fields | array | | textKey | 要检索的属性名或字段名。比如:["name", "text"] |

event

暂无

method

方法名称 参数 说明
getCombo 获取combo组件对象
getZtree 获取ztree组件对象
setData data 设置ztree数据。data请参考上面option的data属性(local)
loadData data 设置ztree数据。data请参考上面options的data属性(remote)
clear 清空所有选项
setValue value 设置选项。value请参考上面option的value属性
⚠️ **GitHub.com Fallback** ⚠️