【原】EasyUI ComboGrid 集成分页、按键示例
需求：
1、下拉框下拉时出现表格；
2、表格带分页功能；
3、可以使用向上键、向下键在表格中移动选择行数据；
4、可以使用回车键在表格中选中行数据；
5、在下拉框的文本框中输入内容，能查询表格；
6、下拉框的文本框的内容变化时，表格数据按分页设置显示
效果如下：
图1、
图2、
图3、
图4、
思路：
很简单，分拆为combo、datagrid、pagination三个组件分别操作，注意结合的操作就好。
在制作的过程中，比较头痛的是整合， 大体上代码中都加了注释，有些情况大家自己试一下就明白为什么要那样做了，
比如：在分页的页改变事件中要设置表格的pageSize，是为了在文本框变化时，能强制表格按分页的pageSize显示数据。
代码：
1、html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="style/js/easyui/themes/metro-green/easyui.css" rel="stylesheet" type="text/css" />
<link href="style/js/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="style/js/easyui/jquery.min.js" type="text/javascript"></script>
<script src="style/js/easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="style/js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="style/js/biz/comboGridBiz.js" type="text/javascript"></script>
</head>
<body>
<h3>EasyUI ComboGrid 集成分页示例</h3>
<div><input id="cg" style="width:150px" /><input type="text" id="txtGender" /></div>
<input type="hidden" id="hdKeyword" />
</body>
</html>
2、js代码
$(function () {
$('#cg').combogrid({
panelWidth: 400,
idField: 'PersonId', //ID字段
textField: 'PersonName', //显示的字段
url: "ashx/ComboGridHandler.ashx?action=search",
fitColumns: true,
striped: true,
editable: true,
pagination: true, //是否分页
rownumbers: true, //序号
collapsible: false, //是否可折叠的
fit: true, //自动大小
method: 'post',
columns: [[
{ field: 'PersonId', title: '用户编号', width: 80, hidden: true },
{ field: 'PersonName', title: '用户名称', width: 150 },
{ field: 'Gender', title: '用户性别', width: 150 }
]],
keyHandler: {
up: function () { //【向上键】押下处理
//取得选中行
var selected = $('#cg').combogrid('grid').datagrid('getSelected');
if (selected) {
//取得选中行的rowIndex
var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected);
//向上移动到第一行为止
if (index > 0) {
$('#cg').combogrid('grid').datagrid('selectRow', index - 1);
}
} else {
var rows = $('#cg').combogrid('grid').datagrid('getRows');
$('#cg').combogrid('grid').datagrid('selectRow', rows.length - 1);
}
},
down: function () { //【向下键】押下处理
//取得选中行
var selected = $('#cg').combogrid('grid').datagrid('getSelected');
if (selected) {
//取得选中行的rowIndex
var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected);
//向下移动到当页最后一行为止
if (index < $('#cg').combogrid('grid').datagrid('getData').rows.length - 1) {
$('#cg').combogrid('grid').datagrid('selectRow', index + 1);
}
} else {
$('#cg').combogrid('grid').datagrid('selectRow', 0);
}
},
enter: function () { //【回车键】押下处理
//设置【性别】文本框的内容为选中行的的性别字段内容
$('#txtGender').val($('#cg').combogrid('grid').datagrid('getSelected').Gender);
//选中后让下拉表格消失
$('#cg').combogrid('hidePanel');
},
query: function (keyword) { //【动态搜索】处理
//设置查询参数
var queryParams = $('#cg').combogrid("grid").datagrid('options').queryParams;
queryParams.keyword = keyword;
$('#cg').combogrid("grid").datagrid('options').queryParams = queryParams;
//重新加载
$('#cg').combogrid("grid").datagrid("reload");
$('#cg').combogrid("setValue", keyword);
//将查询条件存入隐藏域
$('#hdKeyword').val(keyword);
}
},
onSelect: function () { //选中处理
$('#txtGender').val($('#cg').combogrid('grid').datagrid('getSelected').Gender);
}
});
//取得分页组件对象
var pager = $('#cg').combogrid('grid').datagrid('getPager');
if (pager) {
$(pager).pagination({
pageSize: 10, //每页显示的记录条数，默认为10
pageList: [10, 5, 3], //可以设置每页记录条数的列表
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
//选择页的处理
onSelectPage: function (pageNumber, pageSize) {
//按分页的设置取数据
getData(pageNumber, pageSize);
//设置表格的pageSize属性，表格变化时按分页组件设置的pageSize显示数据
$('#cg').combogrid("grid").datagrid('options').pageSize = pageSize;
//将隐藏域中存放的查询条件显示在combogrid的文本框中
$('#cg').combogrid("setValue", $('#hdKeyword').val());
$('#txtGender').val('');
},
//改变页显示条数的处理
//（处理后还是走onSelectPage事件，所以设置也写到onSelectPage事件中了）
onChangePageSize: function () { },
//点击刷新的处理
onRefresh: function (pageNumber, pageSize) {
//按分页的设置取数据
getData(pageNumber, pageSize);
//将隐藏域中存放的查询条件显示在combogrid的文本框中
$('#cg').combogrid("setValue", $('#hdKeyword').val());
$('#txtGender').val('');
}
});
}
var getData = function (page, rows) {
$.ajax({
type: "POST",
url: "ashx/ComboGridHandler.ashx?action=search",
data: "page=" + page + "&rows=" + rows + "&keyword=" + $('#hdKeyword').val(),
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
$.messager.progress('close');
},
success: function (data) {
$('#cg').combogrid('grid').datagrid('loadData', data);
}
});
};
});
3、ashx代码
/// <summary>
/// ComboGridHandler 的摘要说明
/// </summary>
public class ComboGridHandler : IHttpHandler
{
/// <summary>
///
/// </summary>
/// <param name="context"></param>
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
string action = context.Request.Params["action"]; //页数
int PageNum = Convert.ToInt32(context.Request["page"]);
//每一页多少条数据
int Record = Convert.ToInt32(context.Request["rows"]); //模拟数据
List<Person> list = MockData(); Dictionary<string, object> resultDic = new Dictionary<string, object>(); switch (action)
{
case "search": var condition = context.Request["keyword"] ?? string.Empty; List<Person> result = (from item in list
where item.PersonName.Contains(condition) //条件查询
select item).ToList<Person>(); resultDic.Add("total", result.Count);
resultDic.Add("rows", (result.Skip(Record * (PageNum - )).Take(Record)).ToList()); break;
} JavaScriptSerializer serializer = new JavaScriptSerializer(); context.Response.Write(serializer.Serialize(resultDic));
} public bool IsReusable
{
get
{
return false;
}
} /// <summary>
/// 模拟数据
/// </summary>
/// <returns></returns>
public List<Person> MockData()
{
List<Person> list = new List<Person>() {
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "叶宇", Gender = "女" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张兄家", Gender = "男" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张洋", Gender = "男" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "洪自军", Gender = "男" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "王生杰", Gender = "男" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "吴庆庆", Gender = "男" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "武建昌", Gender = "男" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘瑞", Gender = "男" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张辽", Gender = "男" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张颌", Gender = "男" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘备", Gender = "男" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘禅", Gender = "男" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘表", Gender = "男" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张震岳", Gender = "男" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张学友", Gender = "男" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张信哲", Gender = "男" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张悬", Gender = "女" },
new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张惠妹", Gender = "女" }
}; return list;
}
4、实体类代码
[Serializable]
public class Person
{
public string PersonId { get; set; } public string PersonName { get; set; } public string Gender { get; set; }
}
------------------------------------------------------------------------------
抛砖完毕，还请聪明的你给出更好更漂亮的解决方案哦
且做且珍惜
附件：完整代码下载
【原】EasyUI ComboGrid 集成分页、按键示例的更多相关文章
- easyui combogrid下拉表格的分页/按键/动态搜索
作者:xfl4629712 < easyui combogrid下拉表格的分页/按键/动态搜索 > 需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下 ...
- EasyUI DataGrid 分页实现示例
使用easyui可以很方便的开发web程序,这儿仅展示一个后台使用mvc来实现分页的示例,截图如下 示例代码如下 1. 创建模型类,代码如下 using System; using System.Co ...
- EasyUI ComboGrid的绑定，上下键和回车事件，输入条件查询
首先我们先看一下前台的绑定事件 1.先定义标签 <input id="cmbXm" type="text" style="width: 100p ...
- 问题：做EsayUI分页报错 $(...).pagination is not a function之后我把<jsp:include page="top.jsp"/>去掉就好了，有大神知道为什么吗？另外分页按键放在那里好些，我放到form表单下，就开始显示，点一下后就没有了
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
- EasyUI的datagrid分页
EasyUI的datagrid分页 前台代码: <script type="text/javascript"> $(function () { //查询 search( ...
- scroll事件实现监控滚动条并分页显示示例（zepto.js）
scroll事件实现监控滚动条并分页显示示例(zepto.js ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...
- easy-ui treegrid 实现分页 并且添加自定义checkbox
首先第一点easy-ui treegrid 对分页没有好的实现, 因为在分页的过程中是按照 根节点来分页的 后台只能先按照 根节点做分页查询 再将子节点关联进去, 这样才能将treegrid 按 ...
- easyui的datagrid分页写法小结
easyui的datagrid分页死活不起作用...沙雕了...不说了上代码 //关闭tab1打开tab2 查询Detail function refundDetail(){ $('#tt').tab ...
- 表单（中）-EasyUI Combogrid 组合网格、EasyUI Numberbox 数字框、EasyUI Datebox 日期框、EasyUI Datetimebox 日期时间框、EasyUI Calendar 日历
EasyUI Combogrid 组合网格 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults.通过 $.fn.combogrid.defaults 重写 ...
随机推荐
- 在Centos下搭建git并可以通过windows客户端访问
亲测在本地虚拟机和远程服务器上无问题,如有不懂请留言. 注意事项:以下所有操作是在root权限下操作的.1.Centos服务器版本centos6.5 2.首先安装git,使用yum在线安装 yum i ...
- CentOS：ECDSA host key "ip地址" for has changed and you have requested strict checking（转）
原文地址:http://blog.csdn.net/ausboyue/article/details/52775281 Linux SSH命令错误:ECDSA host key "ip地址& ...
- ASP.NET Aries 4.0 开源发布：已完成基础功能优化重写
主要更新: 1:增加AR.Global.GetUser() 方法返回当前登陆者的用户信息. 2:重写AR.Combobox 支持下拉树. 3:调整及扩展Input下拉的配置参数. 4:优化及新增AR. ...
- 借助GitHub托管你的项目代码
PS:话说自己注册了GitHub都很久了,却没有怎么去弄,现在系统学习一下,也把自己的学习经历总结下来share给大家,希望大家都能把GitHub用起来,把你的项目代码happy地托管起来! 一.基本 ...
- Entity Framework 6 Recipes 2nd Edition（11-4）译 -> 在”模型定义”函数里调用另一个”模型定义”函数
11-4.在”模型定义”函数里调用另一个”模型定义”函数 问题 想要用一个”模型定义”函数去实现另一个”模型定义”函数 解决方案 假设我们已有一个公司合伙人关系连同它们的结构模型,如Figure 11 ...
- 导入 cocoapods引入的第三方库头文件，提示找不到
解决办法: 1,Build Settings ->Header Search Paths 2, 双击 Header Search Paths 添加一个, $(PODS_ROOT), 选择项选: ...
- hibernate一对一外键单向关联
关联是类(类的实例)之间的关系,表示有意义和值得关注的连接. 本系列将介绍Hibernate中主要的几种关联映射 Hibernate一对一主键单向关联Hibernate一对一主键双向关联Hiberna ...
- JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
- FastCgi与PHP-fpm之间的关系
web server(比如说nginx)只是内容的分发者.比如,如果请求/index.html,那么web server会去文件系统中找到这个文件,发送给浏览器,这里分发的是静态数据.好了,如果现在请 ...
- AngularJs之七
今天接着说angularJs服务,但今天专注说一下http服务. 一:$http 是 AngularJS 应用中最常用也是最核心的服务. 服务向服务器发送请求,应用响应服务器传送过来的数据. < ...