摘要:作者注是基于擴展的原生表格插件,設計理念來源于的組件該庫基于,暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發過程中遇到的問題和解決思路,歡迎討論和指正。
作者注:jsu.Table是基于jQuery擴展的原生表格插件,設計理念來源于Element.ui的Table組件(該UI庫基于vue.js,暫時未找到jQuery版本因此在此造輪子)。本文將記錄jsu系列所有組件開發過程中遇到的問題和解決思路,歡迎討論和指正。廢話少說,下面開始進入主題!先看效果
上圖為固定表頭 + 嵌套表格 + 可展開列 + MVVM編輯表格數據等功能測試效果。
... | 文本 | 枚舉 | 簡介 | 編輯簡介 | 編輯注冊時間 |
---|
注解①:展開行模板
注解③:可編輯單元格模板
注解③:單元格內容顯示模板
Javascript主要代碼
// 模擬數據 var data = []; for (var i = 0; i < 5; i++) { data.push({ name: "name_" + (i + 1), gender: "MALE", date: new Date().getTime(), note: "我是加粗內容", birthday: new Date().getTime() }); } // 應用插件 var table = jsu.Table($(".grid_2"), true, true); table.data(data);如何使用詳細API可在控制臺查閱jsu.Table.dir或進入/test.../index.html查閱,這里列出部分內容:
設計目的作者準備為jsu.Table實現以下功能:
基礎表格數據展示(已實現)
列順序調整(已實現)
列寬調整(已實現)
表頭固定(已實現)
左側列固定(已實現)
右側列固定(開發中)
用戶可配置隱藏/顯示部分列數據
單元格縱向合并 ---- 合并行
單元格橫向合并 ---- 合并列
其中4 / 5 / 6可參考office word的凍結功能。組件結構圖:
遇到的問題固定表頭寬度何時確定 / 以及修正?
開始調整列寬時隱藏$top,調整結束后顯示$top。由于使用中可能存在內容動態變更(并非通過 table.data API去修改,導致寬度超出當前列寬/行高),通過內部API checkScroll()來修正。多部件表格時交換列順序無效($top未交換表頭, $main交換正常)?
在啟用固定表頭/列時,暫時取消列順序交換功能左側固定列滾動時機
當啟用左側固定列時如果同時配置了表頭固定,通過添加左側頂部固定表頭實現上下滾動左側固定列與expand類型內容如何同步
待修復左側固定列隱藏滾動條后,鼠標在左側固定列無法滾動表格
待修復文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54708.html
相關文章
jsu系列之表格組件 ---- jsu.Table
摘要:作者注是基于擴展的原生表格插件,設計理念來源于的組件該庫基于,暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發過程中遇到的問題和解決思路,歡迎討論和指正。 作者注:jsu.Table是基于jQuery擴展的原生表格插件,設計理念來源于Element.ui的Table組件(該UI庫基于vue.js,暫時未找到jQuery版本因此在此造輪子)。本文將記錄jsu系列所有組件開發過程...
jsu系列之表格組件 ---- jsu.Table
摘要:作者注是基于擴展的原生表格插件,設計理念來源于的組件該庫基于,暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發過程中遇到的問題和解決思路,歡迎討論和指正。 作者注:jsu.Table是基于jQuery擴展的原生表格插件,設計理念來源于Element.ui的Table組件(該UI庫基于vue.js,暫時未找到jQuery版本因此在此造輪子)。本文將記錄jsu系列所有組件開發過程...
【從零入門系列-5】Spring Boot 之 前端展示
摘要:務必在之前引入最新的核心文件為了偷懶,我們這里引入的第三方庫文件都是采用的方式,也可以選擇把庫下載到本地然后再引用。 文章系列 【從零入門系列-0】Spring Boot 之 Hello World 【從零入門系列-1】Spring Boot 之 程序結構設計說明 【從零入門系列-2】Spring Boot 之 數據庫實體類 【從零入門系列-3】Spring Boot 之 數據庫操作...
【從零入門系列-5】Spring Boot 之 前端展示
摘要:務必在之前引入最新的核心文件為了偷懶,我們這里引入的第三方庫文件都是采用的方式,也可以選擇把庫下載到本地然后再引用。 文章系列 【從零入門系列-0】Spring Boot 之 Hello World 【從零入門系列-1】Spring Boot 之 程序結構設計說明 【從零入門系列-2】Spring Boot 之 數據庫實體類 【從零入門系列-3】Spring Boot 之 數據庫操作...
vue總結系列--組件化
摘要:觸發事件可以攜帶數據,這些數據被用于傳遞給綁定了事件的其它組件的回調函數上,進而被傳遞給其它組件。父組件可以在回調函數里做任何事情,頗有靈活性。一般情況下,父組件會在回調函數中更新自己的狀態數據。 上一篇博文梳理了vue的數據驅動和響應式相關的特性,這一篇博文就來梳理vue的一個很重要的特性,組件化。自定義組件之于vue,其意義不亞于函數之于C,java之類的編程語言。函數是計算機科學...
發表評論
0條評論
soasme
男|高級講師
TA的文章
閱讀更多
tensorflow
閱讀 3564·2023-04-26 02:05
GDI繪制Winform工作流組件、具有獨立圖層的增刪處理、防PPT效果
閱讀 2002·2021-11-19 11:30
外貿網站如何選擇服務器?外貿網站服務器價格多少錢?
閱讀 4201·2021-09-30 09:59
新型硅陽極電池走向市場,有望改變電子設備和電動汽車市場
閱讀 3174·2021-09-10 10:51
安科視頻監控產品中的遠程代碼執行漏洞允許黑客入侵設備
閱讀 2604·2021-09-01 10:30
raksmart:韓國獨立服務器測評(大陸優化線路)
閱讀 1469·2021-08-11 11:20
css3 動畫(二)貝塞爾曲線
閱讀 2614·2019-08-30 15:54
CSS雙飛翼布局
閱讀 562·2019-08-30 10:49
閱讀需要支付1元查看