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)--列表组件,当列表的数据非常多时,需 ...
随机推荐
- GBDT(梯度提升树)scikit-klearn中的参数说明及简汇
1.GBDT(梯度提升树)概述: GBDT是集成学习Boosting家族的成员,区别于Adaboosting.adaboosting是利用前一次迭代弱学习器的误差率来更新训练集的权重,在对更新权重后的 ...
- linux备忘录-文件系统管理
Extx 文件系统原理 block group 每个分区(partition)的组成为 boot sector -> block group -> block group -> bl ...
- UVALive 4764 简单dp水题(也可以暴力求解)
B - Bing it Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit Status ...
- Thread suspend()挂起resume()恢复
import javax.swing.*;import java.awt.*;import java.awt.event.ActionEvent;import java.awt.event.Actio ...
- 清除浮动float (:after方法)
1. 什么时候需要清除浮动?清除浮动有哪些方法? (1)对元素进行了浮动(float)后,该元素就会脱离文档流,浮动在文档之上.在CSS中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是 ...
- 获取JNDI数据源
1 在容器中配置数据源 Tomcat <?xml version="1.0" encoding="UTF-8"?> <Context> ...
- Citrix NetScaler HA(高可用性)解析
Citrix NetScaler HA(高可用性)解析 来源 https://www.iyunv.com/thread-172259-1-1.html 1.1 NetScaler高可用概述 我 ...
- H3C交换机端口链路聚合
H3C交换机端口链路聚合 以太网链路聚合 -- 以太网链路聚合配置命令 -- lacp system-prioritylacp system-priority命令用来配置系统的LACP优先级.undo ...
- Swift中由找不到removeAll(where:)方法引起的连锁反应(上)
核心代码 section.removeAll {baseRow in if let habitRow = baseRow as? HabitRow{ let idxPath = habitRow.in ...
- 熊猫(i)
题目描述 熊猫喜欢吃数,熊猫对与每个数都有他独特的评价.具体来说,熊猫对数 xx 的评价是个四元组 (a, b, c, d)(a,b,c,d),计算方式如下: 首先将 xx 写成二进制形式(不含前导零 ...