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

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（）：清除组件的值

赞 (0)

相关推荐

  • 简介EasyUI datagrid editor combogrid搜索框的实现

    首先需要datagrid editor对combogrid的扩展,这个是别人实现的: $.extend($.fn.datagrid.defaults.editors, { combogrid: { init: function (container, options) { var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container); in

  • easyui combogrid实现本地模糊搜索过滤多列

    这几天在项目中前台使用到了easyui 的 combogrid插件为用户提供点选数据项的功能.由于数据项的内容可能有很多,所以仅仅是点选还不够,需要能够对用户的输入进行过滤,即根据用户的输入将某一列与用户输入匹配的数据项筛选保留下来. 实现这一功能需要以下几个步骤: 1.声明一个combogrid <div class="fitem"> <label>盘条基本信息编号:</label> <input class="easyui-com

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

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

  • jQuery EasyUI中DataGird动态生成列的方法

    EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍EasyUI中DataGird动态生成列的方法. DataGird动态生成列,实际上就是控制DataGird的 columns 属性值,下面通过ajax异步调用后台columns的数据,进行绑定. <table id="dg"></table> <script>

  • Android实现listview动态加载数据分页的两种方法

    Android实现listview动态加载数据分页的两种方法

    在android开发中,经常需要使用数据分页,比如要实现一个新闻列表的显示,或者博文列表的显示,不可能第一次加载就展示出全部,这就需要使用分页的方法来加载数据,在android中Handler经常用来在耗时的工作中,它接收子线程发送的数据,并使用数据配合更新UI,AsyncTask是在一个线程中执行耗时操作然后把结果传给UI线程,不需要你亲自去管理线程和句柄. 一.使用Handler+线程方法 1.基础知识 Handler在android系统中,主要负责发送和接收消息,它的用途主要有以下两种:

  • 浅析jQuery EasyUI中的tree使用指南

    本文记录的是带领成员开发一个小模块功能的时候,需要用到弹出窗口加载树状级联单位选择,最后决定用采用jQuery+EasyUI插件进行开发.但是在使用EasyUI中tree的插件时,碰到了不少麻烦.为了提供弹出树的显示速度,就采用异步加载数节点值,首先先加载根节点,然后根据点击的节点展开加载子节点. 往往结果和预期的都不一样,困惑了几天,展开后子节点是动态加载了,但是收缩后无法清空之前填充的数据:第二次在展开时,子节点又被重复加载了一遍,造成了数据重复显示,并没有提供清除子节点的方法.想尽了各种办

  • EasyUI中的dataGrid的行内编辑

    这个js代码是别人写的,可能不是最好的,但我个人觉得首先能帮助别人解决功能问题的话就特别好.我稍加修改后用在了自己的项目上了,这里贴出来分享一下.后台用的TinkPHP因为都是查增删改比较简单,这里就不贴了.前台效果图因为比较懒,也不贴了. $(function () { var datagrid; //定义全局变量datagrid var editRow = undefined; //定义全局变量:当前编辑的行 datagrid = TskupluAddPacket.datagrid({ ur

  • easyui 中的datagrid跨页勾选问题的实现方法

    easyui 中的datagrid跨页勾选问题的实现方法

    easyui的datagrid分页显示数据,如果有需求要求勾选多条数据且不再同一页中,easyui会保存在其他页选中的数据吗? 一开始在网上查阅有人说easyui中没有此方法,需要自己写,但其实至少在1.4版本后只要在datagrid中加入   idField:'id',给每条数据id属性,easyui就默认就会保留之前勾选的信息,如果没有id,才会出现换页后,之前勾选的信息没有的情况.所以说网络是个好东西,但你要有分辨的能力! 下面是部分代码: $weldingBomInstanceGrid=

  • EasyUI中的tree用法介绍

    真的是太忙了,本应该有好多东西可以写,但是没什么闲时间,每次想到写的时候,来点事就又给忘了.10月最后一天了,在忙也得把这篇文章写完,不然又得多一个空白月了. 这是之前带领成员开发一个小模块功能的时候,需要用到弹出窗口加载树状级联单位选择,最后决定用采用jQuery+EasyUI插件进行开发.但是在使用EasyUI中tree的插件时,碰到了不少麻烦.为了提供弹出树的显示速度,就采用异步加载数节点值,首先先加载根节点,然后根据点击的节点展开加载子节点. 往往结果和预期的都不一样,困惑了几天,展开后

  • IntelliJ IDEA中ajax开发实现分页查询示例

    JavaEE三层架构实现ajax分页查询 开发环境: 系统 window10 IDE:IntelliJ IDEA2017.3.2 数据库:MySQL5.5 数据库连接工具: Navicat 浏览器:chrome 版本号 65.0.3325.181 第一步:代码实现之前期准备 在IDEA中开发前期配置的工作,网上的帖子很多,我 在这里就不再赘述.主要说三点 在服务器的配置中,红色框框的两项要选择update classes and resource ,选择了之后可以实现热部署. 要在此处填写项目的

  • django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例

    1.首先,界面上有个按钮触发操作: <button type="button" class="layui-btn layui-btn-normal" id="user_list">用户列表</button> 2.点击这个按钮触发之后,会弹出一个对话框并请求view,从数据库中得到数据并产生动态表格, 其中script代码如下: <script> layui.use(['table'], function ()

随机推荐