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)--列表组件,当列表的数据非常多时,需 ...
随机推荐
- shell之route命令相关
使用下面的 route 命令可以查看 Linux 内核路由表. # route Destination Gateway Genmask Flags Metric Ref Use Iface 192.1 ...
- UVa 11806 - Cheerleaders (组合计数+容斥原理)
<训练指南>p.108 #include <cstdio> #include <cstring> #include <cstdlib> using na ...
- mssql发布订阅事项
在发布订阅过程中遇到2个需求: 1.在原有的发布快照中增加发布内容,追加模式需要在追加的表中设计一个主键,要不然没有办法进行发布的,另外还得注意将这两个字段进行更改: select immediate ...
- 201621123034 《Java程序设计》第11周学习总结
作业11-多线程 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 源代码阅读:多线程程序BounceThread ...
- 用iFrame模拟Ajax上传文件
前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法 ...
- AB序列 凹函数的性质
链接:https://www.nowcoder.com/acm/contest/113/B来源:牛客网 题目描述 给长度为n的序列A,长度为m的序列B.可以给A序列里每个元素加上x且B序列里每个元素减 ...
- 向mysql中批量插入数据的性能分析
MYSQL批量插入数据库实现语句性能分析 假定我们的表结构如下 代码如下 CREATE TABLE example (example_id INT NOT NULL,name VARCHAR( 5 ...
- python使用openpyxl操作excel
def initExcel(): file_path = "test.xlsx" file = load_workbook(file_path) table = file[&quo ...
- es6+最佳入门实践(3)
3.数组扩展 3.1.扩展运算符 扩展运算符用三个点(...)表示,从字面上理解,它的功能就是把数组扩展开来,具体形式如下: let arr = [1, 2, 3]; console.log(...a ...
- ui_modules和ui_method
## 06ui.py #coding:utf-8 import tornado.httpserver import tornado.ioloop import tornado.options impo ...