2. 程式人生 > >ExtJs案例（一） ~~ Grid元件載入更多

ExtJs案例（一） ~~ Grid元件載入更多

阿新 • • 發佈：2019-01-14

目錄

一、需求

Grid元件載入更多

一、需求

最近，有個新的需求，用Ext Grid元件載入資料之後，點選“載入更多”按鈕，會在Grid表格後面追加新的內容。要求：

  1. 只返回後面追加的內容，不會返回原先的內容
  2. 設定Grid表格的滾動條在最下面
  3. 設定載入更多的文字+總條數

二、載入更多

參考網上一大堆的程式碼，無非是兩種：

1、 動態取值後，前臺另新增一條記錄~~演示程式碼如下：

因為store提供了一個add/insert的方法，這個方法的作用是：追加資料到store後面，insert可以在指定的位置追加，而add而是追加到最後面。

function

loadMore(){
    var record = Ext.data.Record.create([
        {name:'code',type:'string',mapping:'0'},
        {name:'desc',type:'string',mapping:'1'}
    ]);
    var newRecord = new record({code:'全部',desc:'全部'});
    var DataGrid = Ext.getCmp('gridPanel');
    // store新增最新內容
   
DataGrid.getStore().add(
        newRecord
    );
}

嘗試改造成，下面的結構：

function loadMore(){

    var cc = [{OpenId:123456,RoleName:'小鄭',age:23},{OpenId:654321,RoleName:'小欣',age:21}]

    var DataGrid = Ext.getCmp('gridPanel');

    // store新增最新內容

    DataGrid.getStore().add(

        cc

    );

}

然後也可以追加。

2、 動態取值後 - 後臺另新增一條記錄~~演示程式碼如下：

這個不貼程式碼，說白了：就是無效率查詢。舉個例子：原本查找出100條資料，點選 “載入更多”按鈕，想要載入多50條，直接在後臺查詢150條資料，返回給前端。Store接收到資料之後，就會顯示150條，前端人員看著像是載入多了50條，實際是返回的是150條，效率很低。

三、整理思路

1、前臺資料增加用到了Ext.data.Record，思考Ext.data.Record的資料能不能與後臺進行互動，如果能與後臺進行互動的話，那麼record資料直接從後臺獲取，這樣子就搞定了。

嘗試結果：Ext.data.Record是前端物件，沒辦法跟後臺進行資料互動

2、進一步思考，其實newRecord = new record({code:'全部',desc:'全部'});這句程式碼，說白了，只要我能獲取到一個數據物件，將資料物件傳給Ext.data.Record，不就可以了。而我們資料可以通過Ext.ajax的方式獲取，恍然大悟，覺得之前想法太笨了。

四、程式碼編寫

1、嘗試改造成，下面的結構： ~~ 靜態結構

function loadMore(){

    var cc = [{OpenId:123456,RoleName:'小鄭',age:23},{OpenId:654321,RoleName:'小欣',age:21}]

    var DataGrid = Ext.getCmp('gridPanel');

    // store新增最新內容

    DataGrid.getStore().add(

        cc

    );

}

點選觸發函式之後，發現也可以追加。證明自己的思路完成沒有問題。

2、編寫後臺程式碼：

@RequestMapping("/test")

  @ResponseBody

  public BusiResult test() {

    List<Map<String,String>> lists = new ArrayList<Map<String,String>>();

    BusiResult busiResult = new BusiResult(BusiStatus.SUCCESS);

  

    Map<String,String> map = new HashMap<String, String>();

    map.put("OpenId","123456");

    map.put("RoleName","小鄭");

    map.put("age","23");

  

    Map<String,String> map1 = new HashMap<String, String>();

    map1.put("OpenId","654321");

    map1.put("RoleName","小欣");

    map1.put("age","21");

  

    lists.add(map);

    lists.add(map1);

  

    busiResult.setData(lists);

    return busiResult;

}

3、改造前端程式碼 ~~ 動態結構

function loadMore(){

    // 同步請求

    Ext.Ajax.request({

        url: '/game/chat/go',

        method: 'post',

        // async: false,

        params : {

            scrollId: scrollId

        },

        success: function (action, options) {

            var result = Ext.decode(action.responseText);

            if (result.code != 0) {

                Ext.Msg.alert('提示', result.message);

                console.log("日誌服耗時: " + result.extra);

            } else {

                var hitss = result.data;

                var DataGrid = Ext.getCmp('gridPanel');

                // store新增最新內容

                DataGrid.getStore().add(

                    hitss

                );

            }

        },

        failure: function (action, options) {

            Ext.MessageBox.hide();

            Ext.Msg.alert('提示', '請求後臺失敗');

        }

    });

   

}

至此，我們已經完成了 載入更多的需求開發。

相關推薦

ExtJs案例（一） ~~ Grid元件載入更多

目錄 一、需求 Grid元件載入更多 一、需求 最近，有個新的需求，用Ext Grid元件載入資料之後，點選“載入更多”按鈕，會在Grid表格後面追加新的內容。要求： 只返回後面追加的內容，不會返回原先的內容 設定Grid表格的滾動條在最下面

PyQt5進階（一）——讓視窗裝載更多的控制元件

1. QTabWidget的使用 視窗上側有標籤，選擇不同標籤進入不同佈局頁面 import sys from PyQt5.QtWidgets import * class TabDemo(QTabWidget): def __init__(self, parent=No

webpack開發案例（一）

sele tle 參數說明 logs css 直接 [] ima -128 案例一（基本打包） 基本前置條件 步驟一： <!DOCTYPE html> <html> <head> <meta charset="ut

shell腳本案例（一）批量創建用戶

shell 批量創建用戶 for linux 案例需求用shell腳本批量建立Linux用戶實現要求：創建用戶student1到student50,指定組為student組！而且每個用戶需要設定一個不同的密碼！ 實現腳本 #!/bin/bash grep ‘student‘ /etc/grou

WPF自定義控制元件（一）の控制元件分類

原文: WPF自定義控制元件（一）の控制元件分類 一、什麼是控制元件（Controls）         控制元件是指對資料和方法的封裝。控制元件可以有自己的屬性和方法，其中屬性是控制元件資料的簡單訪問者，方法則是控制元件的一些簡單而可見的功能、控制元件建

unity Socket TCP連線案例（一）

非常清晰的demo 服務端 using System; using System.Collections; using System.Collections.Generic; using System.Net; using System.Net.Sockets; using Syste

unity Socket TCP連接案例（一）

mon star connect color 服務器 void ipaddress field .get 非常清晰的demo 服務端 using System; using System.Collections; using System.Collectio

ExtJs學習（一）~~ 簡述概念+自己學習過程

一、學習經歷 記得第一次接觸ExtJs的時候，覺得ExtJs相對於經常使用的Bootstrap非常複雜，在網上下載了兩套比較好的教程，花了很多的時間看完，最後也獨立寫了簡單Border佈局頁面模板出來，最終完成的效果是：頭部是固定的展示資訊，左邊是手風琴的選單欄，右邊是點選

ExtJs初探（一）- 下載及配置入專案（eclipse+Springboot+maven）

剛剛開始接觸ExtJs的小白，首先先摸一下“敵人” 的底，然後是下載，最後把其配置入你的專案中，本文使用的是ext-6.6.0-trial，下載地址：https://www.sencha.com/products/extjs/evaluate/ 一、什麼是ExtJs ExtJs是用Jav

Mybatis框架學習（一）——核心元件

Mybatis的核心元件 Mybatis的核心元件分為4個部分： SqlSessionFactoryBuilder(構造器)： 它會根據配置或者程式碼來生成SqlSessionFactory，採用的是分步構建的Builder模式。 SqlSessionFact

SpringBoot的IOC模組註解及簡單案例（一）

本文將會講到SpringBoot的IOC模組下的註解進行總結，主要目的是為了方便之後查詢註解和快速應用。 將會以：元件註冊，生命週期，屬性賦值，自動裝配來進行區分。示例程式碼的註解很重要 一、元件註冊 1、@Configuration：標註在類上。主要是告訴 Sprin

HTML+CSS簡單的登陸+註冊介面仿照案例（一）

是新手在練習html+css，所以裡面的很多程式碼會比較冗雜，不是很簡潔，會慢慢提高水平的。1.整體介面分為三大部分：導航、主要內容、尾部資訊內容；主要內容細分為：左側欄（頁面資訊部分）、右側欄（登陸板塊）2.導航：裡面有四個li標籤,每個li標籤裡面都有一個a標籤，讓其右浮

JVM類載入機制詳解（一）JVM類載入過程

首先Throws（丟擲）幾個自己學習過程中一直疑惑的問題： 1、什麼是類載入？什麼時候進行類載入？ 2、什麼是類初始化？什麼時候進行類初始化？ 3、什麼時候會為變數分配記憶體？ 4、什麼時候會為變數賦

Python初學者好玩案例（一）：最短的抓取網頁圖片程式碼，只有10行

這幾天閒來無事，又研究了一下Python的基礎內容，首先研究的是如何抓取網頁資料。 發現大神們通常在初級教程裡就要寫很多程式碼，真讓我們這些初學者無所適從。 加上Python的各種版本不同，也會讓初學者頭腦，在此提醒初學者，看資料一定要注意軟體版本號。 還是按照我的原則，凡

dataTables分頁展示資料注意事項(案例)（一）

dataTables可以高效的提供大量資料的表格展示： 程式碼如： 前臺： table = $('#example').DataTable(             {                 "ajax" : "/c",                 "orde

【Clion-Ubuntu-dlib】執行一個dlib案例（一）（如何在clion編譯器中配置CMakeLists）

目錄 第一步：新建一個dlib專案 第二步：執行一個案例hello world 第三步：配置CMakeList cmake_minimum_required(VERSION 2.8) project(cpp_eval) set(

說說EMC解決方案中的那些產品和案例（一）

認識我們 由於工作和興趣關係，我們作為一個團隊，平時一直密切關注著儲存業界的相關產品和最新資訊，也會把一些好的諮詢和經驗整理成文分享出來。去年我們釋出的兩個系列，【網路基本功-細說網路那些事兒】和【一站式學習Wireshark】，獲得了很多人的好評。我們希望在不同的線上和社

Hadoop學習筆記—20.網站日誌分析專案案例（一）專案介紹

網站日誌分析專案案例（一）專案介紹：當前頁面一、專案背景與資料情況1.1 專案來源　　本次要實踐的資料日誌來源於國內某技術學習論壇，該論壇由某培訓機構主辦，匯聚了眾多技術學習者，每天都有人發帖、回帖，如圖1所示。圖1 專案來源網站-技術學習論壇　　本次實踐的目的就在於通過對該

pytorch使用（一）處理並載入自己的資料

pytorch使用（一）資料處理 個人認為，資料處理或許是在完成一篇論文中最耗費時間的，特別是大多情況下，需要在很多個庫上做實驗。 pytorch官方支援很多庫，使用torchvision來完成資料的處理，點這裡可以看到支援的庫並不是很多。在這裡

WinForm系列（一）-控制元件listview

listview控制元件使用的時候發現不如datagview控制元件好使，很多時候通過dataset集合獲取後，顯示的效果不是自己想要的，比如獲取一些資料庫表名後，顯示的時候很亂。 比如想分行顯示，想一行顯示幾個的時候，用起來不是很好用。 如載入一個ds 函式如下：