easyui combogrid 按需加载,点击下拉加载
功能优点:减少不必要的http请求,减少服务器查询压力,降低额外的浏览器渲染,提高呈现速度
开发分享: combogrid 点击才请求的功能实现
简要:我分析了费用系统,和现在全网的写法.并不满意.都是要么全部请求,要么部分请求.
费用系统中是发起了请求,然后报404错误(伪地址的方式实现的)这种带来的缺陷是依旧发起了http请求,在
页面中大量存在combogrid的话就会问题突出.
因此在新的mcp2.0中我们尝试着首次加载10个,但这10条数据并不一定有意义,也就意味着还是浪费了带宽.
在对比全网分析下,依旧没有好的方案.找到官方demo一个一个查看分析.最后得出如下思路.
1.url初始化为空,直接不请求
2.在点击下拉时候再去请求
3.键入空格之后再起请求.简言之就是按需加载,多余走开.
onShowPanel: 是核心部分改造.
以下是代码
$('#divorder').find('#CustomerID').combogrid({
panelWidth: 400,
idField: 'PartnerID',
mode: 'remote',
textField: 'PartnerNameCN',
method: 'get',
url:'',
fitColumns: true,
columns: [[
{ title: 'ID', field: 'PartnerID', hidden: true },
{ title: '中文名称', field: 'PartnerNameCN', align: 'left', width: 300 },
{ title: '业务伙伴代码', field: 'PartnerCode', width: 100, align: 'left' },
{ title: '联系人', field: 'ContactPerson', align: 'left', hidden: true },
{ title: '电话', field: 'Tel', align: 'left', hidden: true },
{ title: '地址', field: 'Address', align: 'left', hidden: true },
]], onShowPanel: function () {
$('#CustomerID').combogrid('grid').datagrid('options').url = '/Master/Partner/GetPartnerListForCombox?keyValue ='+"";
$('#CustomerID').combogrid('grid').datagrid('reload');
},
});
以上是我的分享,关键是思路.代码非常简单.希望大家在新的项目中使用此方法.感谢!
easyui combogrid 按需加载,点击下拉加载的更多相关文章
- 微信小程序实现上拉和下拉加载更多
在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更 ...
- 微信小程序中如何实现分页下拉加载?(附源码)
转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...
- iscroll5 上拉,下拉 加载数据
我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...
- 集成iscroll 下拉加载更多 jquery插件
一个插件总是经过了数月的沉淀,不断的改进而成的.最初只是为了做个向下滚动,自动加载的插件.随着需求和功能的改进,才有了今天的这个稍算完整的插件. 一.插件主功能: 1.下拉加载 2.页面滚动到底部自动 ...
- 转:zTree树控件实战篇:针对多个下拉加载zTree树应该如何做出合理的配置
今天有一个zTree的朋友遇到一个非常棘手的问题,才研究zTree树控件两天就被上头催着看成果,很是苦恼.他面对的问题就是页面内多个地方需要下拉在其文本框下方加载zTree树,由于对zTree下拉加载 ...
- Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载
随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...
- dropload.js下拉加载更多
项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...
- H5页面下拉加载更多(实用版)
近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有. 醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件 还可以,但是 ...
- Flutter学习笔记(25)--ListView实现上拉刷新下拉加载
如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...
随机推荐
- Vuex, api, SSR, module
vuex https://vuex.vuejs.org/zh/guide/actions.html 单向数据流 单例模式 & 多个组件共享状态 State & 状态注入 Vue.use ...
- P3200 [HNOI2009]有趣的数列
题目描述 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai}: (2)所有的奇数项满足a1<a3<...<a2n ...
- 关于ECDSA/ECC(密钥加密传输)和ECDSA/ECDH(密钥磋商)
关于ECDSA/ECC(密钥加密传输)和ECDSA/ECDH(密钥磋商) 来源: https://blog.csdn.net/xueyepiaoling/article/details/6243337 ...
- [洛谷P1792][国家集训队]种树
题目大意:给出由$n$个数组成的环,取某个数就可以得到它的分数,相邻的两个数不能同时取.问取$m$个数可以得到的最大分数. 题解:建一个大根堆,贪心取,每个点记录前驱后继,取一个点就把前驱后继设成不能 ...
- 命令__shell数字-字符串比较
shell常用逻辑判断 -b file 若文件存在且是一个块特殊文件,则为真 -c file 若文件存在且是一个字符特殊文件,则为真 -d file 若文件存在且是一个目录,则为真 -e file 若 ...
- 方伯伯的OJ ( onlinejudge )
方伯伯的OJ 题目描述 方伯伯正在做他的OJ.现在他在处理OJ 上的用户排名问题. OJ 上注册了n 个用户,编号为1 ∼ n,一开始他们按照编号排名.方伯伯会按照心情对这些用户做以下四种操作,修改用 ...
- 【POJ 2976 Dropping tests】
Time Limit: 1000MSMemory Limit: 65536K Total Submissions: 13849Accepted: 4851 Description In a certa ...
- 【BZOJ 5048 塌陷的牧场】
Time Limit: 25 Sec Memory Limit: 256 MBSubmit: 77 Solved: 34[Submit][Status][Discuss] Description ...
- Vue组件中的单项数据流
当子组件中的input v-model 父组件的值时不能直接绑定props的值要使用计算属性,向下面的写法,因为props是单项数据流,子组件不能改变父组件的状态,直接绑定会报错. 还可以这样写:但是 ...
- 平面ray trace的数据结构加速
yy了一个数据结构.. 首先考虑到,平面ray trace对应的scene是planar graph with coordinates,特点是除端点外无相交. 我们考虑对所有端点建立kd-tree,注 ...