首先我们先看一下前台的绑定事件
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私有的方法.
|