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私有的方法.
|
EasyUI ComboGrid的绑定，上下键和回车事件，输入条件查询的更多相关文章
- 【原】EasyUI ComboGrid 集成分页、按键示例
需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下键在表格中移动选择行数据: 4.可以使用回车键在表格中选中行数据: 5.在下拉框的文本框中输入内容,能查询表格: 6. ...
- easyui combogrid下拉表格的分页/按键/动态搜索
作者:xfl4629712 < easyui combogrid下拉表格的分页/按键/动态搜索 > 需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下 ...
- 表单（中）-EasyUI Combogrid 组合网格、EasyUI Numberbox 数字框、EasyUI Datebox 日期框、EasyUI Datetimebox 日期时间框、EasyUI Calendar 日历
EasyUI Combogrid 组合网格 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults.通过 $.fn.combogrid.defaults 重写 ...
- EasyUI ComboGrid 分页
一.使用场景 下拉框可以很方便地为我们提供选择功能,通过下拉框我们可以便捷地选择某个值,而不需要手动输入.在EasyUI中有ComboGrid与之对应.ComboGrid既可以当中下拉框来使用,又可以 ...
- 【EasyUI】Combobox的联动和onChange/onSelect事件绑定
[效果图] (1)当选择“产品名称”这个查询项目时,运算条件只有“等于”和“不等于”,如下图所示. (2)当用户选择可以进行数值计算的查询项目时,运算条件就会有很多,如下图所示. [实现代码] 1.H ...
- easyui tagbox 自动触发回车事件
新版本的 easyui 加入了 tagbox 控件,允许用户通过回车分隔的方式输入多项数据.但这个控件有一些不便,就是每输入完一项必须按回车键确认,用户很容易在输入完最后一项后忘记按回车就直接提交表单 ...
- 通过JS 给这个input加一个事件 获得焦点，回车事件绑定
通过JS 给这个input加一个事件 就是获得焦点就行了 window.onload = function(){ var oInput = document.getElementById(" ...
- jquery绑定回车事件
//回车事件绑定 $(".left-content").keyup(function(event){ var theEvent = event || window.event; v ...
- js 给元素绑定回车事件
经常会看到登录页面输入完账户密码,回车就登录了.实现方法: JQuery方法: $("#focus")为获取id为focus的元素 $("#focus").ke ...
随机推荐
- 移动端页面 弹出框滚动，底部body锁定，不滚动 / 微信网页禁止回弹效果
需求:页面有弹出层菜单,当弹出层菜单超出屏幕可视区域时,不能滚动.加上滚动后,底部body的滚动事件如何禁止,加上了overflow:hidden;还是不可用. 如下图:地区弹出框可以滚动,而底部的b ...
- 数据格式json讲解
JSON 在使用名称/值对或XML时,实际上是使用javascript从应用程序中取得数据并将数据转换成另一种数据格式.javascript不仅作为格式化语言使用,还可以使用javascript语言中 ...
- js判断中文
var reg = /^[\u4E00-\u9FA5]+$/;if(!reg.test(keywordscn)){ alert('请填写中文') return false;}
- SQL Server 2012 联机丛书离线安装
昨日根据微软官网的方式安装SQL Server 2012 联机丛书报错,无法安装: 联机丛书下载位置及安装方式: 按照给出的方式安装,无法完成,错误如下:
- 【转】 linux编程之GDB调试
GDB是一套字符界面的程序集,可以用它在linux上调试C和C++程序,它提供了以下的功能: 1 在程序中设置断点,当程序运行到断点处暂停 2 显示变量的值,可以打印或者监视某个变量,将某个变量的值显 ...
- eclipse中的web环境配置
一.tomcat的安装 直接官网下载,选择自动配置安装Exe文件. 测试: 1.启动安装目录下bin文件中的exe文件,观察是否安装完好.若出现打断文字黑框,则说明已经安装完好. 2.输入网址.htt ...
- flask笔记1-安装
1.创建应用的根目录: 2.在根目录下创建独立的虚拟python运行环境,创建完成后当前目录会有一个文件夹,即该独立环境(使用--no-site-pachages参数将不会复制任何系统python环境 ...
- MVC思想
MVC英文即Model-View-Controller,即把一个应用的输入.处理.输出流程按照Model.View.Controller的方式进行分离,这样一个应用被分成三个层--模型层.视图层.控制 ...
- org.springframework.jdbc.UncategorizedSQLException异常
用到了mysql的TRUNCATE函数,这个关键字对spring事务有影响,最后换成了ROUND函数
- 批量转换编码 (gbk -> utf8)
使用 Notepad++ 批量的转换文件编码:Mass convert a project to UTF-8 using Notepad++ 步骤如下: 1.一般 Noptepad++ 安装完后已经自 ...