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 清除组件值.