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