ComboTreeGrid（树形表格下拉框）

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

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

依赖关系

• combo
• treegrid

使用案例

创建树形表格下拉框

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

<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}
        ]]">

2. 使用Javascript通过已经定义的<select>或<input>标签来创建数据表格下拉框。

属性

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

属性名	属性值类型	描述	默认值
idField	string	ID字段名称。	null
textField	string	要显示在文本框中的文本字段。	null
limitToGrid	boolean	限制输入的值只能是树形表格中的值。	false

事件

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

方法

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

方法名	方法参数	描述
options	none	返回属性对象。
grid	none	返回数据表格对象。下面的例子显示了如何获取选择的行： var g = $('#cc').combogrid('grid'); // 获取数据表格对象 var r = g.datagrid('getSelected'); // 获取选择的行 alert(r.name);
setValue	value	设置组件值。 代码示例： $('#cc').combogrid('setValue', '002'); $('#cc').combogrid('setValue', {id:'003',name:'name003'});
setValues	values	设置组件值数组。 代码示例： $('#cc').combogrid('setValues', ['001','007']); $('#cc').combogrid('setValues', ['001','007',{id:'008',name:'name008'}]);
clear	none	清除组件的值。