改造bootstrapTreeTable外掛實現非同步載入
相信大家在使用這個外掛的時候都會發現他的缺陷。
載入大資料量的節點後展示樹表就會卡死很久。
在這個外掛的官方地址上也說明了不支援非同步載入,如果要非同步載入則使用其他的外掛。
我就在他原有的外掛基礎上做了一下改造。去掉了一些本專案中不會使用到的特性。
原有外掛叫:jquery.treegrid.extension.js
修改後的叫:jquery.treegrid.ajax.js
基本改造思路:
1、首次載入根節點與根的子節點。然後通過原有方法載入。標示一下子節點是未載入的
2、在子節點上繫結點選事件,查詢後臺資料。插入到點選行的後面緊鄰的位置(同樣也繫結點選事件)。修改點選節點的狀態
3、重新渲染節點前的展開圖示。這裡原本想改treegrid本身的,後來邏輯太複雜了。功力不夠深,所以這裡使用了笨辦法,獲取所有的行後,通過狀態標示重新手動新增Class到相應的span上
發現不知道怎麼傳附件。。。
就放到百度雲盤吧。連結: https://pan.baidu.com/s/1rMHLtUiti5zzELuh-nrJkA 密碼: sn7y
相關推薦
改造bootstrapTreeTable外掛實現非同步載入
相信大家在使用這個外掛的時候都會發現他的缺陷。載入大資料量的節點後展示樹表就會卡死很久。在這個外掛的官方地址上也說明了不支援非同步載入,如果要非同步載入則使用其他的外掛。我就在他原有的外掛基礎上做了一下改造。去掉了一些本專案中不會使用到的特性。原有外掛叫:jquery.tre
EasyUI實現非同步載入Tree
Html內容:<fieldset style="height: 350px;"> <ul id="taskTree" style="height:400px;width:250px
zTree實現非同步載入資料(使用SPRING MVC4+mybatis3.8)
1.先看效果 圖一 初始化狀態 圖二 點選根節點(凱頓兒童美語ERP資訊系統)自動載入第一層子節點(登入、註冊等子節點) 圖三 點選登入子節點會自動載入第三層子節點 2.程式碼 建立一個html檔案interfa
Angular.JS + Require.JS + angular-async-loader 來實現非同步載入 angular 模組
傳統的 angular 應用不支援非同步載入模組,必須在 module 啟動的時候,所有模組必須預載入進來。 通過使用 angular-async-loader 庫,我們可以使用 requirejs 等載入器,在 module 初始化之後,在動態非同步載入其他的 Controller, Services,
ztree實現非同步載入(點選節點,請求後臺資料,新增資料到對應節點)
首先準備好後臺資料:這裡我就不貼SQL了,因為資料是別人部落格裡面的.後面會標明出處. <script type="text/javascript" src="static/js/jquery-1.7.2.js"></script
TextView使用自定義HtmlHttpImageGetter實現非同步載入網路圖片,可限制載入圖片數量
import android.graphics.Canvas; import android.graphics.drawable.BitmapDrawable; import android.graphics.drawable.Drawable; import androi
easyui的$.messager.confirm()外掛的非同步實現。
easyui的$.messager.confirm()外掛是非同步實現的,所以有時候需要將其他function寫到回撥函式裡面去。 1 $.messager.confirm("","",function(r){ 2 if(r){ 3 alert("是非同步實現的");
Flask + Ajax + Mysql 實現網頁非同步載入(二)
Flask + Ajax + Mysql 實現網頁非同步載入(一) 二、jquery 和Ajax 實現前端請求 <script src="static/js/jquery.min.js" > </script> <script type="text/java
Flask + Ajax + Mysql 實現網頁非同步載入(一)
滾動條滑到底部時候,在當前頁面載入下一頁資料; 滾動條到達頂部時候,重新整理當前頁面。 一、flask 實現的伺服器端 @app.route('/',methods=['GET','POST']) def index(): '''新聞首頁''' page = reques
template-web.js 結合dropload.min.js下拉外掛實現下拉重新整理和上拉載入
//引入js,所需要的js已經上傳到個人資源 <script type="text/javascript" src="/web/home/js/template-web.js"></script> <link href="/web/h
turn.js 非同步載入實現翻書效果
1、閱讀翻書js /** * 電子翻書 */ //var width = 1080; //var height = 1680; var width = "10rem"; var height = "15.2rem"; window.onload = function
HTML5實現非同步上傳(不用uploadify等前端上傳外掛)
手機端一般不能用 swfupload 類似flash的上傳工具 (對 flash 支援不好) 不過現在手機瀏覽器 都支援HTML5了, 實現使用Html5 上傳檔案 ,直接 new FormData(); 這個基於XMLHttpRequest 2 新增的API
jquery.lazyload外掛實現圖片延遲載入
jquery.lazyload是一個實現圖片延遲載入的jQuery 外掛,它可以延遲載入長頁面中的圖片。在瀏覽器可視區域外的圖片在初始狀態下不會被載入,直到使用者將頁面滾動到它們所在的位置。 1.引入js檔案 <script src="//ajax.googleapis.com/ajax/l
從後臺獲得資料,前臺實現資料載入和非同步查詢
前臺頁面大體是這樣的 預設載入指定頁籤的第一頁資料, 單擊頂部頁籤時,非同步請求相應的第一頁資料 單擊底部頁碼時,非同步請求對應頁碼的資料 單擊前進和後退時,對應請求相關資料和按鈕的禁用狀態 php部分 <?php 思路:未提交頁籤則預
SpringBoot 2.x 學習筆記(5):ECharts+AJAX實現非同步資料載入
1、JavaBean package cn.hadron.eba.bean; import java.io.Serializable; public class UserBean implements Serializable{ private String usernam
ionic3實現非同步配置懶載入
懶載入實現步驟:1.增(module.ts),2.編(ts檔案裡增加@IonicPage()),3刪(移除import引用,然後改成引號)。建立一個新的ionic工程(ionic start app tabs)專案目錄如下:1.在需要懶載入的頁面建立一個新檔案:名字.modu
ajax非同步載入 實現區域性重新整理
這是用jquery進行資料互動<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-2.1.0.js"></script> <scri
ECharts3 實現 AJAX非同步載入 資料庫資料
ECharts3的文件裡其實對非同步載入說的很明白,但是示例都是生成的隨機資料,大多數應用是直接讀資料庫資料然後動態載入到ECharts圖表裡的,簡單的思路就是把需要顯示的資料庫資料封裝成json格式,然後非同步獲取json資料,解析顯示在圖表裡。 生成jso
Android實現圖片快取與非同步載入
ImageManager2這個類具有非同步從網路下載圖片,從sd讀取本地圖片,記憶體快取,硬碟快取,圖片使用動畫漸現等功能,已經將其應用在包含大量圖片的應用中一年多,沒有出現oom。 Android程式常常會記憶體溢位,網上也有很多解決方案,如軟引用,手動呼叫recycle
IOS開發之非同步載入網路圖片並快取本地實現瀑布流(一)
</pre><pre name="code" class="objc"></pre><pre name="code" class="objc">在前面的一篇部落格中,我寫了一個瀑布流照片牆的程式,由於之前的程式載入的圖片是本