ComboTreeGrid(树形表格下拉框)

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


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


•   combo

•   treegrid

创建树形表格下拉框

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

                    
                

                
                $(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 返回数据表格对象。下面的例子显示了如何获取选择的行:
                            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 清除组件的值。