zoukankan      html  css  js  c++  java
  • 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', 300 },
    { title: '业务伙伴代码', field: 'PartnerCode', 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');

    },
    });


    以上是我的分享,关键是思路.代码非常简单.希望大家在新的项目中使用此方法.感谢!

  • 相关阅读:
    js加载完所有的图片,适合电子相册哦~~~~
    获取路径参数的方法
    JS 对数组的常用处理
    JS date常用代码积累
    js框架设计1.4类型判断
    js框架设计1.3数组化
    js框架设计1.2对象扩展笔记
    js框架设计1.1命名空间笔记
    java 跨域
    ACM-ICPC 2018 徐州赛区网络预赛 I Characters with Hash(模拟)
  • 原文地址:https://www.cnblogs.com/benbenfishfish/p/8034095.html
Copyright © 2011-2022 走看看