ExtJs案例(一) ~~ Grid元件載入更多
目錄
Grid元件載入更多
一、需求
最近,有個新的需求,用Ext Grid元件載入資料之後,點選“載入更多”按鈕,會在Grid表格後面追加新的內容。要求:
- 只返回後面追加的內容,不會返回原先的內容
- 設定Grid表格的滾動條在最下面
- 設定載入更多的文字+總條數
二、載入更多
參考網上一大堆的程式碼,無非是兩種:
1、 動態取值後,前臺另新增一條記錄~~演示程式碼如下:
因為store提供了一個add/insert的方法,這個方法的作用是:追加資料到store後面,insert可以在指定的位置追加,而add而是追加到最後面。
function |
嘗試改造成,下面的結構:
|
然後也可以追加。
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、嘗試改造成,下面的結構: ~~ 靜態結構
|
點選觸發函式之後,發現也可以追加。證明自己的思路完成沒有問題。
2、編寫後臺程式碼:
|
3、改造前端程式碼 ~~ 動態結構
|
至此,我們已經完成了 載入更多的需求開發。
相關推薦
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 函式如下: