EasyUI ComboGrid的绑定，上下键和回车事件，输入条件查询

首先我们先看一下前台的绑定事件

1.先定义标签

<input id="cmbXm" type="text" style="width: 100px;" />

2.cmbgrid的绑定方法，这里先全部列出代码，接下来我们分别看看各个属性的意思

$(‘#cmbXm‘).combogrid({
                panelWidth: 570,
                idField: ‘PATIENT_NO‘,
                textField: ‘NAME‘,
                url: ‘/Ashx/yzxt.ashx?flag=GetData‘,
                Dalay: 200,
                method: ‘get‘,
                cache: false,
                pagination: true,
                columns: [[{
                    field: "PATIENT_NO",
                    title: "住院编号",
                    width: 50
                },

            {
                field: ‘NAME‘,
                title: ‘姓名‘,
                width: 150
            },
            {
                field: ‘SEX‘,
                title: ‘性别‘,
                width: 60,
                formatter: function (value) {
                    if (value == 1) return "男";
                    else if (value == 0) return "女";
                    else return "未知";
                }
            },
            {
                field: ‘BIRTHDAY‘,
                title: ‘出生日期‘,
                width: 70,
                formatter: StFormatter
            },
            {
                field: ‘BAH‘,
                title: ‘病案号‘,
                width: 60
            },
            {
                field: ‘CURR_BED‘,
                title: ‘床位号‘,
                width: 60
            },
            {
                field: ‘BRXZMC‘,
                title: ‘病人性质‘,
                width: 60
            }]],
                onSelect: function (recordidex) {
                    var record = $("#cmbXm").combogrid("grid").datagrid("getSelected");

                    setPatient(record);

                },
                keyHandler: {
                    enter: function () {

                        var pClosed = $("#cmbXm").combogrid("panel").panel("options").closed;
                        if (!pClosed) {
                            $("#cmbXm").combogrid("hidePanel");
                        }
                        var record = $("#cmbXm").combogrid("grid").datagrid("getSelected");
                        if (record == null || record == undefined) return;
                        else {
                            setPatient(record);
                        }
                    },
                    up: function () {
                        var pClosed = $("#cmbXm").combogrid("panel").panel("options").closed;
                        if (pClosed) {
                            $("#cmbXm").combogrid("showPanel");
                        }
                        var grid = $(‘#cmbXm‘).combogrid("grid");
                        var rowSelected = grid.datagrid("getSelected");
                        if (rowSelected != null) {
                            var rowIndex = grid.datagrid("getRowIndex", rowSelected);
                            if (rowIndex > 0) {
                                rowIndex = rowIndex - 1;
                                grid.datagrid("selectRow", rowIndex);
                            }
                        } else if (grid.datagrid("getRows").length > 0) {
                            grid.datagrid("selectRow", 0);
                        }
                    },
                    down: function () {
                        var pClosed = $("#cmbXm").combogrid("panel").panel("options").closed;
                        if (pClosed) {
                            $("#cmbXm").combogrid("showPanel");
                        }
                        var grid = $(‘#cmbXm‘).combogrid("grid");
                        var rowSelected = grid.datagrid("getSelected");
                        if (rowSelected != null) {
                            var totalRow = grid.datagrid("getRows").length;
                            var rowIndex = grid.datagrid("getRowIndex", rowSelected);
                            if (rowIndex < totalRow - 1) {
                                rowIndex = rowIndex + 1;
                                grid.datagrid("selectRow", rowIndex);
                            }
                        } else if (grid.datagrid("getRows").length > 0) {
                            grid.datagrid("selectRow", 0);
                        }
                    },
                    query: function (q) {
                        $(‘#cmbXm‘).combogrid("setValue", null);
                        $(‘#cmbXm‘).combogrid("grid").datagrid("clearSelections");
                        $(‘#cmbXm‘).combogrid("grid").datagrid("reload", {
                            ‘xm‘: q,
                            ‘STATUS‘: $(‘#selzt‘).val(),
                            ‘sid1‘: new Date().getTime(),
                            ‘sid2‘: Math.round(Math.random() * 1000)
                        });
                        $(‘#cmbXm‘).combogrid("textbox").val(q);
                    }
                }
            });

3.数据源的获取，在ashx文件中的返回查询的数据

private void GetData()
{
string tiaojian =Request["xm"];
 DataTable dt= ExecuteQuery("select * from table where xm like"+tiaojian);
                string l_strJson = Common.Common.ConvertEntityToJson(dt);
int total=dt.Rows.Count;
string s = "{\"total\":" + total + ",\"rows\":" + l_strJson + "}";
                Response.Write(s);
                Response.End();
}

其中idField和textField分别表示ComboGrid的保存值和显示值。

url指向返回数据源的地址，这里是一个ashx文件

通常后台通过odbc获取到DataTable之后，转换为json格式，应为我们这里采用了分页，所以返回到前台我们需要的格式应该为以下的形式

string s = "{\"total\":" + total + ",\"rows\":" + data + "}";

total为数据源的行数量，data为DataTable转换后的json字符串。

colums的格式和dataGrid是一样的[[{field:"字段名",title:"列名",width:"长度"}]]

在onselect事件中，我们通过var record =$("#cmbXm").combogrid("grid").datagrid("getSelected")可以获取到当前选中的行数据，取到绑定数据源当中的各个字段值(record.字段名称),然后去进行一系列其他操作

接下来我们在enter事件中希望ComboGrid能够关闭

 var pClosed = $("#cmbXm").combogrid("panel").panel("options").closed;//获取panel当前的状态
 if (!pClosed) {
  $("#cmbXm").combogrid("hidePanel");//如果是打开状态就将其隐藏
 }//do somthing else

当我们按↑时，选择上一行的数据

 up: function () {
                        var pClosed = $("#cmbXm").combogrid("panel").panel("options").closed;
                        if (pClosed) {
                            $("#cmbXm").combogrid("showPanel");
                        }
                        var grid = $(‘#cmbXm‘).combogrid("grid");
                        var rowSelected = grid.datagrid("getSelected");
                        if (rowSelected != null) {
                            var rowIndex = grid.datagrid("getRowIndex", rowSelected);
                            if (rowIndex > 0) {
                                rowIndex = rowIndex - 1;
                                grid.datagrid("selectRow", rowIndex);
                            }
                        } else if (grid.datagrid("getRows").length > 0) {
                            grid.datagrid("selectRow", 0);
                        }
                    }

选↓时选择下一行的数据

  down: function () {
                        var pClosed = $("#cmbXm").combogrid("panel").panel("options").closed;
                        if (pClosed) {
                            $("#cmbXm").combogrid("showPanel");
                        }
                        var grid = $(‘#cmbXm‘).combogrid("grid");
                        var rowSelected = grid.datagrid("getSelected");
                        if (rowSelected != null) {
                            var totalRow = grid.datagrid("getRows").length;
                            var rowIndex = grid.datagrid("getRowIndex", rowSelected);
                            if (rowIndex < totalRow - 1) {
                                rowIndex = rowIndex + 1;
                                grid.datagrid("selectRow", rowIndex);
                            }
                        } else if (grid.datagrid("getRows").length > 0) {
                            grid.datagrid("selectRow", 0);
                        }
                    }

输入条件查询时，返回我们条件查询的结果

 query: function (q) {
                        $(‘#cmbXm‘).combogrid("setValue", null);
                        $(‘#cmbXm‘).combogrid("grid").datagrid("clearSelections");
                        $(‘#cmbXm‘).combogrid("grid").datagrid("reload", {
                            ‘xm‘: q,
                            ‘STATUS‘: $(‘#selzt‘).val(),
                            ‘sid1‘: new Date().getTime(),
                            ‘sid2‘: Math.round(Math.random() * 1000)
                        });
                        $(‘#cmbXm‘).combogrid("textbox").val(q);
                    }

这里xm是传到后台方法中的数据，通过reload方法重新加载数据源

一般我们查询语句是select * from table where xm like ‘%‘+Request["XM"] and status= Request["STATUS"],这样我们就可以通过输入的值q参数，去刷新数据源。

至于ComboGrid的赋值取值语句，参考官方的文档也很容易找到，下面列举一些比较常用的方法

$(‘#cmbGrid‘).combogrid("textbox").val();//获取cmbGrid的文体上显示值

$(‘#cmbGrid‘).combogrid("getValue");//获取cmbGrid的实际值

$(‘#cmbGrid‘).combogrid("setValue", null);//设置cmbGrid的值

$("#cmbGrid").combogrid("grid").datagrid("getSelected");//获取cmbGrid选中行

 

最后给出EasyUI ComboGrid的官方API说明，希望对大家有所帮助。

用法

Markup

<select id="cc" name="dept" style="width:250px;"></select>

<input id="cc" name="dept" value="01">

jQuery

$(‘#cc‘).combogrid(options);

For example:

$(‘#cc‘).combogrid({

panelWidth:450,

value:‘006‘,

idField:‘code‘,

textField:‘name‘,

url:‘datagrid_data.json‘,

columns:[[

{field:‘code‘,title:‘Code‘,width:60},

{field:‘name‘,title:‘Name‘,width:100},

{field:‘addr‘,title:‘Address‘,width:120},

{field:‘col4‘,title:‘Col41‘,width:100}

]]

});

Dependencies

  • combo
  • datagrid

属性

Extend from $.fn.combo.defaults and $.fn.datagrid.defaults.
Override defaults with $.fn.combogrid.defaults.

Properties

大多数的属性和combo与datagrid的属性是相同的，下面列出一些combogrid私有的属性.


名称
类型
描述
默认值

loadMsg
string
当datagrid加载远程数据时显示的一个提示消息.
null

idField
string
id名称.
null

textField
string
在文本框中显示的字段.
null

mode
string
定义在文本改变时如何加载列表数据.如果组合框从服务器加载就设为
‘remote‘.
local

filter
function(q, row)
当‘mode‘设定为‘local‘如何去选择本地数据.返回true则选择行.

事件

The events extend from combo and datagrid.

方法

大多数的方法和combo与datagrid的方法是相同的，下面列出一些combogrid私有的方法.


名称
参数
默认值

options
none
返回组件对象.

grid
none
返回datagrid对象.

setValues
values
用数组设定为组件的值.

setValue
value
设定组件的值.

clear
none
清除组件值.
时间： 2024-10-20 11:04:29

EasyUI ComboGrid的绑定，上下键和回车事件，输入条件查询的相关文章

js实现标签绑定回车事件

给一个input 绑定一个回车事件, 如搜索框 输入内容后敲回车键执行某个事件 <input id="freeText" type="text" value=""> $("#freeText").keypress(function (evt) { evt = (evt) ? evt : ((window.event) ? window.event : ""); var key = evt.key

EasyUI ComboGrid 分页

一.使用场景 下拉框可以很方便地为我们提供选择功能,通过下拉框我们可以便捷地选择某个值,而不需要手动输入.在EasyUI中有ComboGrid与之对应.ComboGrid既可以当中下拉框来使用,又可以进行搜索,展示与当前输入的字符相匹配的数据. 一般我们有两种方式使用ComboGrid.一种是将数据先获取,带到页面,然后在页面加载的时候进行渲染:另一种是当页面加载完成后,通过ajax请求后台服务,获取json数据,再进行渲染.这两种方式在一般的应用中都可以使用,也不存在其他问题.然而当数据量大的

【EasyUI】Combobox的联动和onChange/onSelect事件绑定

[效果图] (1)当选择“产品名称”这个查询项目时,运算条件只有“等于”和“不等于”,如下图所示. (2)当用户选择可以进行数值计算的查询项目时,运算条件就会有很多,如下图所示. [实现代码] 1.HTML代码 <table cellpadding="0" cellspacing="1" border="0"> <tr> <td>选择查询项目:</td> <td><input id

EasyUI combogrid/combobox过滤时限制只能选择现有项

EasyUI combogrid/combobox过滤时限制只能选择现有项,有需要的朋友可以参考下. 在使用EasyUI的combogrid时可以通过输入进行过滤,达到快速选择的目的,但是手工输入不存在的项也不会出错,结果提交到数据库后就会产生错误. 比如idField是int型的,输入的数据通过是检索textField,并非int型,无法提交到后台. 如果直接禁止输入,在选项多的时候就很难快速选择了. 现在的解决方案是通过多个事件来判断是否输入了不存在的项目: $("#artName"

Ext tab键事件和回车事件

1 listeners: { 2 afterRender: function(thisForm, options){ 3 this.keyNav = Ext.create('Ext.util.KeyNav', this.el, { 4 enter: function(){//回车事件 5 Ext.getCmp("codeInfoindex").focus(true); 6 }, 7 tab:function(){//tab键事件 8 Ext.getCmp("codeInfoi

easyui-combobox绑定回车事件注意事项

回车事件的定义的位置必须是easyui-combobox数据加载的后面,才有效果. HTML文件: <select id="aucBrandNo" class="easyui-combobox" name="aucBrandNo" style="width: 160px;" data-options="required:true,onHidePanel:function(){validateComboboxIn

AngularJs 相应回车事件

最近做项目,要用到AngularJs,之前也有用过一点点,但仅限于数据的绑定,这次项目要整个前端需要使用这个框架,可能是不熟悉的原因,感觉这代码搞起来非常的不便利,:现总结一个响应回车事件: <!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="http://apps.bdimg.c

js回车事件

回车事件使用的是HTML的Event对象,通过keyCode推断被敲击的键. <intput type="text" onkeydown="Click()"> <script type="text/javascript"> function Click(){ if(event.keyCode == 13){ //按下回车键 //do something } } </script> 或者: <input t

原 JS监听回车事件

原 JS监听回车事件 发表于2年前(2014-06-04 10:16)   阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦   JS监听某个输入框 ? 1 2 3 4 5 6 7 //回车事件绑定     $('#search_input').bind('keyup', function(event) {         if (event.keyCode == "13") {             //回车