含義
樹(shù)形下拉框結(jié)合選擇控件和下拉樹(shù)控件。它與combobox(下拉列表框)類(lèi)似，但是將下拉列表框的列表替換成了樹(shù)形控件。該控件支持樹(shù)狀態(tài)復(fù)選框，方便多選操作。
依賴
- combo
- tree
用法
標(biāo)簽創(chuàng)建
<select id="cc" class="easyui-combotree" style="width:200px;"
data-options="url:'get_data.php',required:true"></select>
javascript創(chuàng)建
<input id="cc" value="01">
<input id="cc" value="01">
$('#cc').combotree({
url: 'get_data.php',
required: true
});
屬性
| 屬性名 | 類(lèi)型 | 含義 | 默認(rèn)值 |
|---|---|---|---|
| editable | boolean | 用戶是否可以直接輸入文本到字段中 | false |
樹(shù)形下拉框?qū)傩詳U(kuò)展自combo(自定義下拉框)和tree(樹(shù)形控件)，樹(shù)形下拉框重寫(xiě)的屬性如下：
| 屬性名 | 類(lèi)型 | 含義 | 默認(rèn)值 |
|---|---|---|---|
| editable | boolean | 用戶是否可以直接輸入文本到字段中 | false |
事件
該控件的事件完全繼承自combo(自定義下拉框)和tree(樹(shù)形控件)。
方法
| 方法名 | 參數(shù) | 含義 | 列子 |
|---|---|---|---|
| options | none | 返回屬性對(duì)象 | |
| tree | none | 返回樹(shù)形對(duì)象 | var t = $('#cc').combotree('tree'); // 獲取樹(shù)對(duì)象var n = t.tree('getSelected'); // 獲取選擇的節(jié)點(diǎn)alert(n.text); |
| loadData | data | 讀取本地樹(shù)形數(shù)據(jù) | $('#cc').combotree('loadData', [{id: 1,text: 'Languages',children: [{id: 11,text: 'Java'},{id: 12,text: 'C++'}]}]); |
| reload | url | 再次請(qǐng)求遠(yuǎn)程樹(shù)數(shù)據(jù) | |
| clear | none | 情況控件的值 | |
| setValues | values | 設(shè)置組件值數(shù)組 | $('#cc').combotree('setValues', [1,3,21]); |
| setValue | value | 設(shè)置組件值 | $('#cc').combotree('setValue', 6); |
樹(shù)形下拉框方法擴(kuò)展自combo(自定義下拉框)，樹(shù)形下拉框新增和重寫(xiě)的方法如下：
| 方法名 | 參數(shù) | 含義 | 列子 |
|---|---|---|---|
| options | none | 返回屬性對(duì)象 | |
| tree | none | 返回樹(shù)形對(duì)象 | var t = $('#cc').combotree('tree'); // 獲取樹(shù)對(duì)象var n = t.tree('getSelected'); // 獲取選擇的節(jié)點(diǎn)alert(n.text); |
| loadData | data | 讀取本地樹(shù)形數(shù)據(jù) | $('#cc').combotree('loadData', [{id: 1,text: 'Languages',children: [{id: 11,text: 'Java'},{id: 12,text: 'C++'}]}]); |
| reload | url | 再次請(qǐng)求遠(yuǎn)程樹(shù)數(shù)據(jù) | |
| clear | none | 情況控件的值 | |
| setValues | values | 設(shè)置組件值數(shù)組 | $('#cc').combotree('setValues', [1,3,21]); |
| setValue | value | 設(shè)置組件值 | $('#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>
