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 相关文章推荐
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
详解javascript高级定时器
Dec 31 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
简介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中多维数组的foreach遍历示例
2014/06/13 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
python Django连接MySQL数据库做增删改查
2013/11/07 Python
Python实现包含min函数的栈
2016/04/29 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
机修工工作职责
2014/02/21 职场文书
人事部经理岗位职责
2014/03/07 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
三项教育活动实施方案
2014/03/30 职场文书
村庄绿化方案
2014/05/07 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
《颐和园》教学反思
2016/02/19 职场文书
Python实现简单的猜单词
2021/06/15 Python
Django+Celery实现定时任务的示例
2021/06/23 Python
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
Java Redisson多策略注解限流
2022/09/23 Java/Android