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私有的属性.
|
事件
The events extend from combo and datagrid.
方法
大多数的方法和combo与datagrid的方法是相同的,下面列出一些combogrid私有的方法.
|