35. EasyUI ComboTreeGrid（树形表格下拉框）

扩展自.fn.combo.defaults和.fn.treegrid.defaults。使用$.fn.combotreegrid.defaults重写默认值对象。（该组件自1.5版开始可用）

树形表格下拉框结合了可编辑文本框控件和下拉树形表格面板控件，该控件允许用户快速从树形表格中选择一条或多条记录。

依赖关系

combo
treegrid

使用案例

创建树形表格下拉框

使用标签创建一个数据表格下拉框。

<input class="easyui-combotreegrid" data-options="
        width:'100%',
        panelWidth:500,
        label:'Select Item:',
        labelPosition:'top',
        url:'treegrid_data1.json',
        idField:'id',
        treeField:'name',
        columns:[[
            {field:'name',title:'Name',width:200},
            {field:'size',title:'Size',width:100},
            {field:'date',title:'Date',width:100}
        ]]">
<input id="cc" name="name">
$(function(){
    $('#cc').combogrid({
        value:'006',
        width:'100%',
        panelWidth:500,
        label:'Select Item:',
        labelPosition:'top',
        url:'treegrid_data1.json',
        idField:'id',
        treeField:'name',
        columns:[[
            {field:'name',title:'Name',width:200},
            {field:'size',title:'Size',width:100},
            {field:'date',title:'Date',width:100}
        ]]
    });
});

属性

树形表格下拉框的属性扩展自combo(自定义下拉框)和treegrid(树形表格)，combotreegrid新增属性如下：

属性名	属性值类型	描述	默认值
idField	string	ID字段名称。	null
treeField	string	要显示在文本框中的文本字段。	null
textField	string	要绑定到该组件对应的底层数据结构的字段名。（该属性自1.5.2版开始可用）	null
limitToGrid	boolean	限制输入的值只能是树形表格中的值。	FALSE

事件

数据表格下拉框事件完全扩展自combo(自定义下拉框)和treegrid(数据表格)。

方法

数据表格下拉框的方法扩展自combo(自定义下拉框)，数据表格下拉框新增或重写的方法如下：

方法名	方法参数	描述
options	none	返回属性对象。
grid	none	返回数据表格对象。
setValue	value	设置组件值
setValues	values	设置组件值数组。
clear	none	清除组件的值。

代码示例：

grid:
下面的例子显示了如何获取选择的行：

var g = $('#cc').combogrid('grid'); // 获取数据表格对象
var r = g.datagrid('getSelected'); // 获取选择的行
alert(r.name);

setValue:

$('#cc').combogrid('setValue', '002');
$('#cc').combogrid('setValue', {id:'003',name:'name003'});

setValues:

$('#cc').combogrid('setValues', ['001','007']);
$('#cc').combogrid('setValues', ['001','007',{id:'008',name:'name008'}]);