含义
树形下拉框结合选择控件和下拉树控件。它与combobox(下拉列表框)类似，但是将下拉列表框的列表替换成了树形控件。该控件支持树状态复选框，方便多选操作。
依赖
- combo
- tree
用法
标签创建
<select id="cc" class="easyui-combotree" style="width:200px;"
data-options="url:'get_data.php',required:true"></select>
javascript创建
<input id="cc" value="01">
<input id="cc" value="01">
$('#cc').combotree({
url: 'get_data.php',
required: true
});
属性
| 属性名 | 类型 | 含义 | 默认值 |
|---|---|---|---|
| editable | boolean | 用户是否可以直接输入文本到字段中 | false |
树形下拉框属性扩展自combo(自定义下拉框)和tree(树形控件)，树形下拉框重写的属性如下：
| 属性名 | 类型 | 含义 | 默认值 |
|---|---|---|---|
| editable | boolean | 用户是否可以直接输入文本到字段中 | false |
事件
该控件的事件完全继承自combo(自定义下拉框)和tree(树形控件)。
方法
| 方法名 | 参数 | 含义 | 列子 |
|---|---|---|---|
| options | none | 返回属性对象 | |
| tree | none | 返回树形对象 | var t = $('#cc').combotree('tree'); // 获取树对象var n = t.tree('getSelected'); // 获取选择的节点alert(n.text); |
| loadData | data | 读取本地树形数据 | $('#cc').combotree('loadData', [{id: 1,text: 'Languages',children: [{id: 11,text: 'Java'},{id: 12,text: 'C++'}]}]); |
| reload | url | 再次请求远程树数据 | |
| clear | none | 情况控件的值 | |
| setValues | values | 设置组件值数组 | $('#cc').combotree('setValues', [1,3,21]); |
| setValue | value | 设置组件值 | $('#cc').combotree('setValue', 6); |
树形下拉框方法扩展自combo(自定义下拉框)，树形下拉框新增和重写的方法如下：
| 方法名 | 参数 | 含义 | 列子 |
|---|---|---|---|
| options | none | 返回属性对象 | |
| tree | none | 返回树形对象 | var t = $('#cc').combotree('tree'); // 获取树对象var n = t.tree('getSelected'); // 获取选择的节点alert(n.text); |
| loadData | data | 读取本地树形数据 | $('#cc').combotree('loadData', [{id: 1,text: 'Languages',children: [{id: 11,text: 'Java'},{id: 12,text: 'C++'}]}]); |
| reload | url | 再次请求远程树数据 | |
| clear | none | 情况控件的值 | |
| setValues | values | 设置组件值数组 | $('#cc').combotree('setValues', [1,3,21]); |
| setValue | value | 设置组件值 | $('#cc').combotree('setValue', 6); |
我的demo
image
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>form-combotree - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function() {
var data = [{
id: 1,
text: 'Languages',
children: [{
id: 11,
text: 'Java'
},{
id: 12,
text: 'C++'
}]
},{
id: 2,
text: 'book',
children: [{
id: 13,
text: 'xxx1'
},{
id: 14,
text: 'ccc'
}]
}];
$('#cc').combotree({
required: true
});
$('#cc').combotree('loadData',data );
$('#cc1').combotree({
required: true
});
$('#cc1').combotree('loadData',data );
$('#cc2').combotree({
required: true,
multiple: true,
height:50
});
$('#cc2').combotree('loadData',data );
})
function setvalue(){
$.messager.prompt('SetValue','Please input the value(1,2,3,etc):',function(v){
if (v){
$('#cc1').combotree('setValue',v);
}
});
}
</script>
</head>
<body>
<h2>Basic Form combotree </h2>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="New Topic" style="width:400px">
<div style="padding:10px 60px 20px 60px" >
<div>combotree</div>
<input id="cc" >
</div>
<div style="padding:10px 60px 20px 60px" >
combotree action
<div style="margin:20px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setvalue()">SetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert('key:'+$('#cc1').combotree('getValue'))">GetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#cc1').combotree('disable')">Disable</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#cc1').combotree('enable')">Enable</a>
</div>
<input id="cc1" >
</div>
<div style="padding:10px 60px 20px 60px" >
<div>combotree multiple</div>
<input id="cc2" >
</div>
</div>
</body>
</html>
