combogrid 摘要

可装载组合框 - ComboBox

继承自$.fn.combo.defaults,通过$.fn.combobox.defaults覆盖默认值

combobox显示的是一个可以编辑的文本框和一个下拉列表.允许用户从里面选择一个或者是多个值,用户可以直接输入值到列表顶部,或者可以从列表选择一个或多个现有值.

Dependencies

• combo

使用方法（Usage Example）

从<select>元素和一个预定义结构创建combobox.

1. <select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
2. <option value="aa">aitem1</option>
3. <option>bitem2</option>
4. <option>bitem3</option>
5. <option>ditem4</option>
6. <option>eitem5</option>
7. </select>

从<input>标记创建combobox.

1. <input id="cc" class="easyui-combobox" name="dept"
2. data-options="valueField:‘id‘,textField:‘text‘,url:‘get_data.php‘" />

使用javascript创建combobox

1. <input id="cc" name="dept" value="aa">

1. $(‘#cc‘).combobox({
2. url:‘combobox_data.json‘,
3. valueField:‘id‘,
4. textField:‘text‘
5. });

创建两个依赖的combobox

1. <input id="cc1" class="easyui-combobox" data-options="
2. valueField: ‘id‘,
3. textField: ‘text‘,
4. url: ‘get_data1.php‘,
5. onSelect: function(rec){
6. var url = ‘get_data2.php?id=‘+rec.id;
7. $(‘#cc2‘).combobox(‘reload‘, url);
8. }" />
9. <input id="cc2" class="easyui-combobox" data-options="valueField:‘id‘,textField:‘text‘" />

json数据转换示例:

1. [{
2. "id":1,
3. "text":"text1"
4. },{
5. "id":2,
6. "text":"text2"
7. },{
8. "id":3,
9. "text":"text3",
10. "selected":true
11. },{
12. "id":4,
13. "text":"text4"
14. },{
15. "id":5,
16. "text":"text5"
17. }]

Properties

这些属性继承至 combo,下面是combobox的一些新增属性.

<input class="easyui-combobox" data-options="
		valueField: ‘label‘,
		textField: ‘value‘,
		data: [{
			label: ‘java‘,
			value: ‘Java‘
		},{
			label: ‘perl‘,
			value: ‘Perl‘
		},{
			label: ‘ruby‘,
			value: ‘Ruby‘
		}]" />

$(‘#cc‘).combobox({
	filter: function(q, row){
		var opts = $(this).combobox(‘options‘);
		return row[opts.textField].indexOf(q) == 0;
	}
});

$(‘#cc‘).combobox({
	formatter: function(row){
		var opts = $(this).combobox(‘options‘);
		return row[opts.textField];
	}
});

Events

事件继承至 combo, 以下是combobox的新增事件.

// 在从远程服务器加载数据之前改变请求参数
$(‘#cc‘).combobox({
	onBeforeLoad: function(param){
		param.id = 2;
		param.language = ‘js‘;
	}
});

Methods

方法继承至 combo,以下是combobox的新增的或者是重写的方法.

$(‘#cc‘).combobox(‘reload‘);  //使用原始URL重新加载列表数据
$(‘#cc‘).combobox(‘reload‘,‘get_data.php‘);  //使用新的URL重新加载列表数据

$(‘#cc‘).combobox(‘setValues‘, [‘001‘,‘002‘]);

$(‘#cc‘).combobox(‘setValues‘, ‘001‘);

combox 例子

//打开运输工具BOX
    function open_Transport_box(){
        var transTool= $(‘#transTool‘).combogrid({
            rownumbers:true,//显示序号 
            pageSize: 5,//每页显示的记录条数，默认为10  
            pageList: [5,10],//可以设置每页记录条数的列表  
            pagination: true,//是否显示分页栏
            nowrap: true,//数据是否换行
            striped: true,//数据背景颜色交替
            panelWidth:400,//容器宽度
            fitColumns:true,//自适应列宽
            width:120,
            //delay:300,
            mode: ‘remote‘, //远程加载数据
            idField:‘x_code‘,//唯一列
            textField:‘x_cn‘,//显示文本列
            url:‘transportToolAction.do?method=findTransToolCode‘,//URL
            columns:[[
                {field:‘x_code‘,title:‘注册号‘,width:60},
                {field:‘x_name‘,title:‘企业名称‘,width:100},
                {field:‘x_cn‘,title:‘x_cn‘,hidden:true,width:120}
            ]],
            //点击赋值
            onClickRow:function(){
                $(‘#transTool‘).val( $(‘#transTool‘).combogrid(‘getValue‘));
            },onLoadSuccess:function(){
                var grid= $(‘#transTool‘).combogrid(‘grid‘);
                var rs=$(grid).datagrid(‘getRows‘);
                if(rs.length>0){
                    var d=rs[0];
                    $(‘#transTool‘).combogrid(‘grid‘).datagrid(‘selectRecord‘,d.x_code);
                }
            }
        });
        //回车赋值
        transTool.combogrid(‘textbox‘).keyup(function(event) {    
            if (event.keyCode == ‘13‘) {
                $(‘#transTool‘).val( $(‘#transTool‘).combogrid(‘getValue‘));
            }
        });
        transTool.combogrid(‘textbox‘).blur(function() {    
            alert(23);
        });
//        //失去焦点赋值
//        $("input").blur(function(){
//            alert($(‘#transTool‘).combogrid(‘getValue‘));
//            $(‘#transTool‘).val( $(‘#transTool‘).combogrid(‘getValue‘));
//        });    
    }