EasyUi中的Combogrid 实现分页和动态搜索远程数据


Posted in Javascript onApril 01, 2016

jquery easyui中的combogrid比较特殊,算是combo和grid的组合,combogrid结合一个可编辑的文本框和下拉数据网格面板,可以让用户迅速找到并选择,又可以进行搜索,展示与当前输入的字符相匹配的数据。如果数据量大的情况,就需要combogrid具有分页的功能。下面给大家介绍EasyUi中的Combogrid 实现分页和动态搜索远程数据。

$('#mallid').combogrid({ 
panelWidth:500, 
idField:'mallid', //ID字段 
textField:'mallname', //显示的字段 
url:"../global/datagrid.aspx?act=malllist", 
fitColumns: true, 
striped: true, 
editable:true, 
pagination : true,//是否分页 
rownumbers:true,//序号 
collapsible:false,//是否可折叠的 
fit: true,//自动大小 
pageSize: 10,//每页显示的记录条数,默认为10 
pageList: [10],//可以设置每页记录条数的列表 
method:'post', 
columns:[[ 
{field:'mallname',title:'商城名称',width:150,sortable:true}, 
{field:'url',title:'网址',width:150} 
]], 
keyHandler: { 
up: function() {}, 
down: function() {}, 
enter: function() {}, 
query: function(q) { 
//动态搜索 
$('#mallid').combogrid("grid").datagrid("reload", { 'keyword': q }); 
$('#mallid').combogrid("setValue", q); 
} 
} 
});

最近做一个项目时用到了jquery easyui,但是官方提供的demo太简单了,有好多功能都没有相关的例子。网上的资料很少,只能自己写demo了。在这里简单记录一下。

1.easyUi combotree 实现动态加载树节点

2.easyUi combogrid 实现分页和动态搜索远程数据

下面给大家补充点知识:

一、ComboGrid常用属性参数配置

loadMsg:加载远程数据,显示的信息

idField:select中选择提交值

textField:select中选择的显示值

mode:定义如何加载DataGrid的数据文本的方式。当设置为“'remote'”模式下,什么类型的用户将被发送http请求参数名为'q'的服务器,以获取新的数据

filter:当数据加载时”mode”设置为”local”,如何选择本地数据源,返回true选择行

二、ComboGrid常用方法

options():返回选择对象

grid():返回选择dataGrid对象

setValues(values):设置元素值数组

setValue(value):设置组件的值

clear():清除组件的值

Javascript 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 #Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 #Javascript
JS中frameset框架弹出层实例代码
Apr 01 #Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 #Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 #Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 #Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 #Javascript
You might like
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
js实现点赞效果
2020/03/16 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
python中self原理实例分析
2015/04/30 Python
简单了解Python3里的一些新特性
2019/07/13 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
浅谈python3中input输入的使用
2019/08/02 Python
Python测试模块doctest使用解析
2019/08/10 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
python 数据类型强制转换的总结
2021/01/25 Python
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
小学生自我鉴定
2013/10/12 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
日化店促销方案
2014/03/26 职场文书
导师工作推荐信范文
2014/05/17 职场文书
关于旅游的活动方案
2014/08/15 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
员工离职感谢信
2015/01/22 职场文书
明星邀请函
2015/02/02 职场文书
党员自我评价范文2015
2015/03/03 职场文书
信仰纪录片观后感
2015/06/08 职场文书
国庆节主题班会
2015/08/15 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书