首页 > 其他分享 >DevExtreme框架由于数据量太大,加载太慢,采用分页方式进行处理(基本上所有的操作都从客户端转移到了服务端)

DevExtreme框架由于数据量太大,加载太慢,采用分页方式进行处理(基本上所有的操作都从客户端转移到了服务端)

时间:2024-07-26 09:08:16浏览次数:18  
标签:const value newObj DevExtreme let result 数据量 paramName 服务端

首先我们需要引入官方的一个函数:

import CustomStore from 'devextreme/data/custom_store'; 我们需要通过这个函数去处理交互数据   先放个图:

 上图中跟分页有关的属性分别是:

1.:data-source="store" ,这个是存放数据源用的,需要用到我们上面的CustomStore 函数,

2.:remote-operations="true" ,这个是开启自定义数据源的一个参数,也就是说只有开启这个,我们才能够将数据的操作转移到服务端,页面才能够成功分页

3.@initialized="saveGridInstance",这个参数是对dom树进行刷新需要用到的,下面讲,

先说一下,获取数据源并返回到页面的实现

如下图:(先看图,代码放后面)

 

 代码如下:

import CustomStore from 'devextreme/data/custom_store';
  const isNotEmpty = (value: any) => value !== undefined && value !== null && value !== '';
  const store = new CustomStore({
    key: 'keyId',
    async load(loadOptions) {
      const paramNames = [
        'skip',
        'take',
        'requireTotalCount',
        'requireGroupCount',
        'sort',
        'filter',
        'totalSummary',
        'group',
        'groupSummary',
      ] as const;
      let newObj = {};
      let key = '';
      paramNames
        .filter((paramName) => isNotEmpty(loadOptions[paramName]))
        .map((paramName) => {
          key = paramName;
          let value = JSON.stringify(loadOptions[paramName]);
          let numValue = Number(value);
          if (!isNaN(numValue)) {
            value = numValue;
          }
          newObj[key] = value;
        });
      newObj.planId = props.planId;
      newObj.schoolId = props.schoolId;
      newObj.gradeId = props.gradeId;
      try {
        const response = await hospitalList(`http://192.168.3.52:9090/zzf/sc-tripartite-user/getUserDetailByPlanId`, newObj);
        const result = await response;
        console.log(result, '=========接口数据  ');
        spinning.value = false;

        let newArr = result.records;
        newIndex.value = loadOptions['skip'] || 0;
        for (let i = 0; i < newArr.length; ++i) {
          newArr[i].rowIndex = newIndex.value + 1;
          newIndex.value = newIndex.value + 1;
        }
        totals.value = result.total;
        return {
          data: newArr,
          totalCount: result.total,
        };
      } catch (err) {
        throw new Error('Data Loading Error');
      }
    },
  });

还有一个点,就是分页的时候我们的参数需要传number而非string

 然后说一下刷新的点,这个功能是,当我们的列表有其他的筛选条件时,接口数据返回正确,但是页面不显示!才去研究了一下

@initialized="saveGridInstance”这个写好之后

 

 这样就可以了

这篇主要说的就是这些了,这个框架确实坑大大的多,希望能帮助到不小心用到这玩意的兄弟

标签:const,value,newObj,DevExtreme,let,result,数据量,paramName,服务端
From: https://www.cnblogs.com/a973692898/p/18324561

相关文章

  • 服务端渲染中的数据获取:结合 useRequestHeaders 与 useFetch
    title:服务端渲染中的数据获取:结合useRequestHeaders与useFetchdate:2024/7/24updated:2024/7/24author:cmdragonexcerpt:摘要:本文介绍Vue服务端渲染中使用useRequestHeaders获取请求头部信息,如cookie和authorization,示例展示了如何在SSR环境下结合useFetch进行API......
  • Springboot整合WebSocket作为服务端遇到的坑
    最近遇到一个需求,对接某公有云上的坐席系统,需要接收人工坐席和客户对话的语音流,然后调用ASR(AutomaticSpeechRecognition,自动语音识别)引擎,对语音流实时转写,最后将实时转写的内容推送到kafka,供下游系统消费。大致流程图如下:标绿的系统即是我方需求对接系统。问题:上述前......
  • 『性能』List 和 HashSet 查找性能比较 (任何数据量的检索 从此只用 HashSet )
    最近优化代码性能采用此方法效率明显提升,特此与大家共勉,同时感谢作者的无私分享!原作者文字地址:https://www.cnblogs.com/shuxiaolong/p/List_HashSet.html『性能』List和HashSet查找性能比较(任何数据量的检索从此只用HashSet)结论:总数50000(5万):List检索5W次耗时2......
  • spring 服务端如何设置 Last-Modified If-Modified-Since
    在Spring框架中,设置HTTP响应头Last-Modified和处理请求头If-Modified-Since是优化缓存和减少不必要数据传输的常用策略。SpringMVC提供了灵活的机制来实现这一点。设置Last-Modified响应头要在SpringMVC中设置Last-Modified响应头,你可以在你的Controller方法中返回一个Respons......
  • spring 服务端如何设置 If-None-Match 和 ETAG
    在Spring框架中,特别是使用SpringMVC或SpringBoot时,设置ETag和处理If-None-Match请求头通常是通过一些自定义的逻辑来实现的,因为SpringMVC本身不直接提供自动化的ETag生成和验证机制。不过,你可以通过以下几种方式来实现:1.使用拦截器(Interceptor)或过滤器(Filter)你可以创建一个......
  • python的tkinter、socket库开发tcp的客户端和服务端
    一、tcp通讯流程和开发步骤1、tcp客户端和服务端通讯流程图套接字是通讯的利器,连接时要经过三次握手建立连接,断开连接要经过四次挥手断开连接。2、客户端开发流程1)创建客户端套接字2)和服务端器端套接字建立连接3)发送数据4)接收数据5)关闭客户端套接字3、服务端开发......
  • 【第3章】Spring Cloud之Nacos服务端权限认证
    文章目录前言一、默认控制台登录页二、鉴权1.相关参数2.服务端开启鉴权2.1开启鉴权2.2自定义密钥3.开启服务身份识别功能4.开启Token缓存功能三、效果四、用户列表总结前言上一章我们访问了控制台,这里为了安全我们开启Nacos的权限认证。一、默认控制台登录......
  • Nacos(二)源码分析Nacos服务端注册示例流程
    上回我们讲解了客户端配置好nacos后,是如何进行注册到服务器的,那我们今天来讲解一下服务器端接收到注册实例请求后会做怎么样的处理。首先还是把博主画的源码分析图例发一下,让大家对整个流程有一个大概的理解:图示流程地址:https://www.processon.com/view/link/5f7e895......
  • Go语言---TCP服务端以及客服端的实现
    TCP的C/S架构TCP服务器的实现监听的底层实现funcListen(network,addressstring)(Listener,error){ varlcListenConfig returnlc.Listen(context.Background(),network,address)}typeListenerinterface{ //Acceptwaitsforandreturnsthenextc......
  • 【大型实战】企业网络实验(华为核心交换、ESXI7.0vmware虚拟机、DHCP中继、服务端网络
    需求实验vmware网络配置(企业内部一般为ESXI)这样服务器虚拟机使用192.168.200.X网段才能与用户侧互通vmware虚拟机配置(DHCP服务器网络配置)打开网络管理页面nmtui重置一下网络连接(重启网卡)检查IP地址ipaddr清空交换机所有配置信息并重启#quitres......