ComboTreeGrid（树形表格下拉框）

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

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

依赖关系

• combo
• treegrid

使用案例

创建树形表格下拉框

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

<input data-toggle="topjui-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>标签来创建数据表格下拉框。

<input id="cc" name="name">
$(function(){
    $('#cc').iCombotreegrid({
        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	要绑定到该组件对应的底层数据结构的字段名。	null
limitToGrid	boolean	限制输入的值只能是树形表格中的值。	FALSE

事件

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

方法

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

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

方法代码示例

grid方法示例：

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

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

setValue方法示例：

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

setValues方法示例：

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