ComboTree（树形下拉框）

扩展自$.fn.iCombo.defaults和$.fn.tree.defaults。使用$.fn.iCombotree.defaults重写默认值对象。

树形下拉框结合选择控件和下拉树控件。它与combobox(下拉列表框)类似，但是将下拉列表框的列表替换成了树形控件。该控件支持树状态复选框，方便多选操作。

依赖关系

• combo
• tree

用法

使用标签创建树形下拉框。

<select id="cc" data-toggle="topjui-combotree" data-options="width:200,url:'get_data.php',required:true"></select>

使用Javascript创建树形下拉框。

<input id="cc" value="01">

$('#cc').iCombotree({
    url: 'get_data.php',
    required: true
});

属性

树形下拉框属性扩展自combo(自定义下拉框)和tree(树形控件)，树形下拉框重写的属性如下：

属性名	属性值类型	描述	默认值
getFatherIdsUrl	string	一个URL从远程站点请求当前节点所有父节点的数据(编辑时自动展开树形结构到当前节点)	""
expandUrl	string	一个URL从远程站点请求当前节点的子节点数据	""
editable	boolean	定义用户是否可以直接输入文本到字段中。	false
textField	string	要绑定到该组件对应的底层数据结构的字段名。	null

事件

该控件的事件完全继承自combo(自定义下拉框)和tree(树形控件)。

方法

树形下拉框方法扩展自combo(自定义下拉框)，树形下拉框新增和重写的方法如下：

方法名	方法参数	描述
options	none	返回属性对象。
tree	none	返回树形对象。见下方代码示例。
loadData	data	读取本地树形数据。见下方代码示例。
reload	url	再次请求远程树数据。通过'url'参数重写原始URL值。
clear	none	清空控件的值。
setValues	values	设置组件值。值可以是节点的"id"值或"id"和"text" 键值对。见下方代码示例。
setValue	value	设置组件值数组。见下方代码示例。

方法代码示例

tree方法示例：

以下的例子显示了如何得到选择的树节点：

var t = $('#cc').iCombotree('tree');    // 获取树对象
var n = t.tree('getSelected');        // 获取选择的节点
alert(n.text);

loadData方法示例：

$('#cc').iCombotree('loadData', [{
    id: 1,
    text: 'Languages',
    children: [{
        id: 11,
        text: 'Java'
    },{
        id: 12,
        text: 'C++'
    }]
}]);

setValues方法示例：

$('#cc').iCombotree('setValue', 6);
// set value with {id,text} pairs
$('#cc').iCombotree('setValue', {
    id: 61,
    text: 'text61'
});

setValue方法示例：

$('#cc').iCombotree('setValues', [1,3,21]);
$('#cc').iCombotree('setValues', [1,3,21,{id:73,text:'text73'}]);