扩展自$.fn.iCombo.defaults和$.fn.iTreegrid.defaults。使用$.fn.iCombotreegrid.defaults重写默认值对象。
树形表格下拉框结合了可编辑文本框控件和下拉树形表格面板控件,该控件允许用户快速从树形表格中选择一条或多条记录。
• combo
• treegrid
1. 使用标签创建一个数据表格下拉框。
2. 使用Javascript通过已经定义的< select>或< input>标签来创建数据表格下拉框。
$(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 | 返回数据表格对象。下面的例子显示了如何获取选择的行:var g = $('#cc').iCombotreegrid('grid'); // 获取数据表格对象 var r = g.iDatagrid('getSelected'); // 获取选择的行 alert(r.name); |
setValue | value | 设置组件值。 代码示例: $('#cc').iCombotreegrid('setValue', '002'); $('#cc').iCombotreegrid('setValue', {id:'003',name:'name003'}); |
setValues | values | 设置组件值数组。 代码示例: $('#cc').iCombotreegrid('setValues', ['001','007']); $('#cc').iCombotreegrid('setValues', ['001','007',{id:'008',name:'name008'}]); |
clear | none | 清除组件的值。 |