combogrid 摘要

标签：

可装载组合框 - ComboBox

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

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

Dependencies

• combo

使用方法（Usage Example）

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

从<input>标记创建combobox.

使用javascript创建combobox

创建两个依赖的combobox

json数据转换示例:

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‘));
//        });    
    }

combogrid 摘要

标签：

原文地址：http://www.cnblogs.com/azhqiang/p/4443863.html