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

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

清除组件值.

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

  1. 【原】EasyUI ComboGrid 集成分页、按键示例

    需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下键在表格中移动选择行数据: 4.可以使用回车键在表格中选中行数据: 5.在下拉框的文本框中输入内容,能查询表格: 6. ...

  2. easyui combogrid下拉表格的分页/按键/动态搜索

    作者:xfl4629712  <  easyui combogrid下拉表格的分页/按键/动态搜索  > 需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下 ...

  3. 表单(中)-EasyUI Combogrid 组合网格、EasyUI Numberbox 数字框、EasyUI Datebox 日期框、EasyUI Datetimebox 日期时间框、EasyUI Calendar 日历

    EasyUI Combogrid 组合网格 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults.通过 $.fn.combogrid.defaults 重写 ...

  4. EasyUI ComboGrid 分页

    一.使用场景 下拉框可以很方便地为我们提供选择功能,通过下拉框我们可以便捷地选择某个值,而不需要手动输入.在EasyUI中有ComboGrid与之对应.ComboGrid既可以当中下拉框来使用,又可以 ...

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

    [效果图] (1)当选择“产品名称”这个查询项目时,运算条件只有“等于”和“不等于”,如下图所示. (2)当用户选择可以进行数值计算的查询项目时,运算条件就会有很多,如下图所示. [实现代码] 1.H ...

  6. easyui tagbox 自动触发回车事件

    新版本的 easyui 加入了 tagbox 控件,允许用户通过回车分隔的方式输入多项数据.但这个控件有一些不便,就是每输入完一项必须按回车键确认,用户很容易在输入完最后一项后忘记按回车就直接提交表单 ...

  7. 通过JS 给这个input加一个事件 获得焦点,回车事件绑定

    通过JS 给这个input加一个事件 就是获得焦点就行了 window.onload = function(){ var oInput = document.getElementById(" ...

  8. jquery绑定回车事件

    //回车事件绑定 $(".left-content").keyup(function(event){ var theEvent = event || window.event; v ...

  9. js 给元素绑定回车事件

    经常会看到登录页面输入完账户密码,回车就登录了.实现方法: JQuery方法: $("#focus")为获取id为focus的元素 $("#focus").ke ...

随机推荐

  1. 让PHP开发者事半功倍的十大技巧

    如果你使用一面大镜子作为冲浪板会发生什么?或许你会在较短的时间内征服海浪,但是你肯定从内心深处明白,这不是冲浪的正确选择.同样的道理也适用于PHP编程,尽管这样的类比听起来有一些古怪.我们经常听到有人 ...

  2. Kinect外包团队(长年承接微软Kinect体感项目外包,有大型Kinect案例)

    承接Kinect体感企业项目.游戏项目外包 北京公司.专业团队,成员为专业WPF产品公司一线开发人员,有大型产品开发经验: 提供优质的售后服务,保证产品质量,轻量级产品可以提供规范清晰的源代码,有业务 ...

  3. thinkphp3.2自定义配置文件

    扩展配置可以支持自动加载额外的自定义配置文件,并且配置格式和项目配置一样. 设置扩展配置的方式如下(多个文件用逗号分隔): // 加载扩展配置文件 'LOAD_EXT_CONFIG' => 'u ...

  4. linux网卡混杂模式

    混杂模式就是接收所有经过网卡的数据包,包括不是发给本机的包,即不验证MAC地址.普通模式下网卡只接收发给本机的包(包括广播包)传递给上层程序,其它的包一律丢弃.一般来说,混杂模式不会影响网卡的正常工作 ...

  5. memset函数

    函数介绍 void *memset(void *s, int ch, size_t n); 函数解释:将s中前n个字节 (typedef unsigned int size_t )用 ch 替换并返回 ...

  6. contiki-rime-单跳单播

    rucb是单跳单播的最顶层,将数据以块为单位进行传输(Bulk transfer). ruc,Reliable communication,保证可靠通信,主要实现确认和序列功能. suc,Stubbo ...

  7. VB发送后台按键和组合键

    http://files.cnblogs.com/files/liuzhaoyzz/VB%E5%8F%91%E9%80%81%E5%90%8E%E5%8F%B0%E7%BB%84%E5%90%88%E ...

  8. 前台jquery+ajax+json传值,后台处理完后返回json字符串,如何取里面的属性值?(不用springmvc注解)

    一.取属性值 前台页面: function select(id){ alert("hfdfhdfh"+id); $.ajax({ url:"selectByid.jsp& ...

  9. call 和 apply使用

      call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.因为 JavaScript 的函数存在「定义时上下文」 ...

  10. 【转】[特征选择] An Introduction to Feature Selection 翻译

    中文原文链接:http://www.cnblogs.com/AHappyCat/p/5318042.html 英文原文链接: An Introduction to Feature Selection ...