本篇內(nèi)容主要講解“怎么讓Table組件無(wú)限可能”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么讓Table組件無(wú)限可能”吧!
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),臺(tái)州企業(yè)網(wǎng)站建設(shè),臺(tái)州品牌網(wǎng)站建設(shè),網(wǎng)站定制,臺(tái)州網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,臺(tái)州網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶成長(zhǎng)自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
技術(shù)實(shí)現(xiàn)
1. 實(shí)現(xiàn) Table 動(dòng)態(tài)渲染
一般我們渲染表格, 大多數(shù)是預(yù)先將表格結(jié)構(gòu)寫(xiě)好, 比先定義好columns再向后端請(qǐng)求數(shù)據(jù)填充表格, 如下:
const columns = [ { title: '姓名', dataIndex: 'name', key: 'name', }, { title: '年齡', dataIndex: 'age', key: 'age', }, { title: '住址', dataIndex: 'address', key: 'address', }, ]; const dataSource = [ { key: '1', name: '徐小夕', age: 18, address: '杭州夕湖區(qū)', } ]; <Table dataSource={dataSource} columns={columns} />
這種業(yè)務(wù)場(chǎng)景雖然可以滿足大部分后臺(tái)管理系統(tǒng)的Table需求, 也可以使用 antd 或者 element構(gòu)建, 但是對(duì)于 lowcode 系統(tǒng)而言, 很多模塊都是不確定的, 我們需要根據(jù)協(xié)議和數(shù)據(jù)來(lái)驅(qū)動(dòng) Table 的渲染.
比如我們?cè)?strong> H5-Dooring中配置了一個(gè)表單, 我們要統(tǒng)計(jì)分析表單的數(shù)據(jù), 由于表單項(xiàng)是不確定的, 所以我們無(wú)法提前定義好一個(gè) table schema.
那如何來(lái)動(dòng)態(tài)渲染這個(gè) Table 呢? 這里給大家提供一個(gè)思路, 基于數(shù)據(jù)驅(qū)動(dòng) + 協(xié)議層約束. 類似于國(guó)外 SAP 的 低代碼平臺(tái), 完全基于 odata 協(xié)議, 我們可以約束表單的提交數(shù)據(jù)格式, 然后結(jié)合用戶提交的數(shù)據(jù), 動(dòng)態(tài)提取出 Table 所需的 columns, 最后再渲染 Table 組件.
協(xié)議層主要約束不同字段的展示類型, 比如字符串, 按鈕, 鏈接, 標(biāo)簽等, 用戶在提交表單之后會(huì)攜帶協(xié)議層對(duì)應(yīng)的 flag 和用戶輸入的值, 這有利于我們解析器渲染Table時(shí)可以對(duì)不同的列展示不同的類型. 如下:
筆者這里簡(jiǎn)單實(shí)現(xiàn)一個(gè)demo, 如下:
// table數(shù)據(jù)源 let tableData = res.map((item:any,i:number) => ({ ID: nanoid(8), ...item })); let baseRow = tableData[0], keys = Object.keys(baseRow); setColumns(() => { const baseColumn = keys.map(item => { return { title: item, dataIndex: item, key: item, width: item === 'ID' ? 0 : null, render: (v:any) => { if(typeof v === 'object') { return <> { v.map(item => <Tag color="#2F54EB">{ item.label || item }</Tag>) } </> } return item === 'ID' ? '' : v } } }) baseColumn.push({ title: '操作', key: 'operation', fixed: 'right', width: 100, render: (row) => <a onClick={() => handleDel(row)}>刪除</a>, }) return baseColumn })
以上我們就實(shí)現(xiàn)了一個(gè)動(dòng)態(tài) Table渲染方案, 案例中使用了 react, 大家也可以使用熟悉的 vue3.0.
2. Table 排序, 多列排序, 自定義搜索
Table排序, 多列排序?qū)崿F(xiàn)方式也很簡(jiǎn)單, 我們只需要自定義 Table頭部, 對(duì)排序字段提升為 Table的公共 State, 最后通過(guò)排序標(biāo)識(shí)和排序方法進(jìn)行排序即可. 目前 antd4.0已經(jīng)支持多列排序, 大家可以直接參考學(xué)習(xí)即可, 如下:
對(duì)于自定義搜索, 也就是文章開(kāi)頭的 demo 展示的列搜索, 我們可以采用如下方案實(shí)現(xiàn):
const getColumnSearchProps = dataIndex => ({ filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => ( <div style={{ padding: 8 }}> <Input ref={node => { searchInput = node; }} placeholder={`Search ${dataIndex}`} value={selectedKeys[0]} onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])} onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)} style={{ width: 188, marginBottom: 8, display: 'block' }} /> <Space> <Button type="primary" onClick={() => handleSearch(selectedKeys, confirm, dataIndex)} icon={<SearchOutlined />} size="small" style={{ width: 90 }} > 搜索 </Button> <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}> 重置 </Button> </Space> </div> ), filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />, onFilter: (value, record) => record[dataIndex] ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) : '', onFilterDropdownVisibleChange: visible => { if (visible) { setTimeout(() => searchInput.select(), 100); } }, render: text => searchedColumn === dataIndex ? ( <Highlighter highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }} searchWords={[searchText]} autoEscape textToHighlight={text ? text.toString() : ''} /> ) : ( text ), });
此時(shí)我們只需要對(duì)動(dòng)態(tài)生成的columns每一列添加自定義頭部即可:
{ title: item, dataIndex: item, key: item, ...getColumnSearchProps(item) }
antd4.0 中也有詳細(xì)的使用方式, 這里筆者就不一一介紹了, 效果如下:
大家也可以在 H5-Dooring 的管理后臺(tái)中查看具體效果.
3. 批量導(dǎo)入 Excel 數(shù)據(jù)渲染 Table
在很多數(shù)據(jù)分析后臺(tái)中我們需要處理很多電子表格, 用傳統(tǒng)的excel手動(dòng)錄入的方式將慢慢被淘汰. 比如不同渠道方收集到了很多業(yè)務(wù)數(shù)據(jù), 整理到 excel 中, 那如何快速保存到自己的后臺(tái)系統(tǒng)中呢? 一般的思路如下:
通過(guò)表單的方式一條條錄入
后臺(tái)解析文件處理成規(guī)范的可入庫(kù)數(shù)據(jù)結(jié)構(gòu)
前端實(shí)現(xiàn)一件導(dǎo)入 excel, 自動(dòng)同步數(shù)據(jù)
第一種方案由于效率太低, 適合C端用戶手動(dòng)錄入, 我們暫時(shí)忽略, 筆者將實(shí)現(xiàn)一下第三種方案. 實(shí)現(xiàn)思路如下:
這里我們用到了 XLSX 這個(gè)庫(kù), 結(jié)合 FileReader API. 我們通過(guò)FileReader 拿到excel文件的二進(jìn)制數(shù)據(jù), 然后傳給 XLSX 解析成 js object, 最后通過(guò)筆者寫(xiě)的 table 渲染器生成符合規(guī)范的table數(shù)據(jù)結(jié)構(gòu). 源碼如下:
// 解析并提取excel數(shù)據(jù) let reader = new FileReader(); reader.onload = function(e) { let data = e.target.result; let workbook = XLSX.read(data, {type: 'binary'}); let sheetNames = workbook.SheetNames; // 工作表名稱集合 let draftArr = {} sheetNames.forEach(name => { let worksheet = workbook.Sheets[name]; // 只能通過(guò)工作表名稱來(lái)獲取指定工作表 for(let key in worksheet) { // v是讀取單元格的原始值 if(key[0] !== '!') { if(draftArr[key[0]]) { draftArr[key[0]].push(worksheet[key].v) }else { draftArr[key[0]] = [worksheet[key].v] } } } }); // 得到table合法的數(shù)據(jù)產(chǎn)物 const sourceData = Object.values(draftArr); } reader.readAsBinaryString(file);
拿到合法的table 數(shù)據(jù)源之后我們就可以進(jìn)行第一節(jié)說(shuō)的動(dòng)態(tài)渲染 Table 的邏輯了.
通過(guò)以上的方式, 我們可以實(shí)現(xiàn)任何結(jié)構(gòu)的excel表格的導(dǎo)入. 在導(dǎo)入后我們可以自動(dòng)發(fā)送請(qǐng)求存儲(chǔ)到我們的業(yè)務(wù)后臺(tái)中.
4. 將 Table 數(shù)據(jù)導(dǎo)出為 Excel
類似的, 上面我們介紹了將 excel 導(dǎo)入 table, 同樣我們也可以將Table 導(dǎo)出為 excel, 進(jìn)行數(shù)據(jù)的分發(fā), 本地化, 比如我們最近流行的在線文檔等應(yīng)用. 筆者這里簡(jiǎn)單講一下實(shí)現(xiàn)思路:
也就是我們第3節(jié)說(shuō)的反解析. excel 文件生成筆者采用 js-export-excel 這個(gè)庫(kù), 基于它筆者實(shí)現(xiàn)了一個(gè)開(kāi)箱即用的方法, 避免大家燒腦造輪子. 如下:
import ExportJsonExcel from 'js-export-excel'; const generateExcel = () => { let option:any = {}; //option代表的就是excel文件 let dataTable = []; //excel文件中的數(shù)據(jù)內(nèi)容 let len = list.length; if (len) { for(let i=0; i<len; i++) { let row = list[i]; let obj:any = {}; for(let key in row) { if(typeof row[key] === 'object') { let arr:any = row[key]; obj[key] = arr.map((item:any) => (typeof item === 'object' ? item.label : item)).join(',') }else { obj[key] = row[key] } } dataTable.push(obj); //設(shè)置excel中每列所獲取的數(shù)據(jù)源 } } let tableKeys = Object.keys(dataTable[0]); option.fileName = tableName; //excel文件名稱 option.datas = [ { sheetData: dataTable, //excel文件中的數(shù)據(jù)源 sheetName: tableName, //excel文件中sheet頁(yè)名稱 sheetFilter: tableKeys, //excel文件中需顯示的列數(shù)據(jù) sheetHeader: tableKeys, //excel文件中每列的表頭名稱 } ] let toExcel = new ExportJsonExcel(option); //生成excel文件 toExcel.saveExcel(); //下載excel文件 }
5. 基于 Table 數(shù)據(jù)自動(dòng)生成多維度可視化報(bào)表
在后臺(tái)管理系統(tǒng)和 BI 平臺(tái)中我們會(huì)遇到很多數(shù)據(jù)分析和報(bào)表展示的需求, 接下來(lái)筆者將來(lái)介紹一下如何基于 Table 數(shù)據(jù)動(dòng)態(tài)生成多維度可視化分析報(bào)表.
筆者在之前的文章中介紹過(guò) 度量行這個(gè)概念, 對(duì)于數(shù)據(jù)分析而言, 我們也要考慮可分析維度的概念, 比如什么是可分析的, 什么是不可分析的. 比如我們又一個(gè)表格, 里面有如下結(jié)構(gòu):
對(duì)于聯(lián)系方式而言, 它是不可度量的, 即分析該項(xiàng)指沒(méi)有任何價(jià)值, 所以在自動(dòng)生成多維度分析中我們理論上不因該分析它, 基于這個(gè)原理, 我們來(lái)設(shè)計(jì)一個(gè)簡(jiǎn)單的自動(dòng)生成多維度可視化報(bào)表的方案.
5.1 基于數(shù)據(jù)源獲取維度數(shù)據(jù)
我們針對(duì)具有范圍屬性的維度進(jìn)行度量, 生成度量數(shù)據(jù), 代碼如下:
const generateDistData = (key:string, list:any) => { let distDataMap:any = {}, distData = [] list.forEach((item:any) => { // 當(dāng)前緯度的類別 let curKey = typeof item[key] === 'object' ? item[key][0].label : item[key]; if(distDataMap[curKey]) { distDataMap[curKey]++; }else { distDataMap[curKey] = 1; } }) // 生成目標(biāo)數(shù)組 for(let key in distDataMap) { distData.push({name: key, value: distDataMap[key]}) } return distData }
此時(shí)我們只需要根據(jù)維度的字段, 即可獲取某一維度的數(shù)據(jù)值, 后通過(guò)可視化組件渲染即可.
5.2 基于某一維度生成可視化報(bào)表
我們用@ant-design/charts, 代碼如下:
<div className={styles.anazlyHeader}> <div className={styles.anazlyItem}> <span>分析緯度: </span> <Select style={{ width: 120 }} onChange={(v) => handleAnazlyChange(0, v)} defaultValue={keys[0]}> { keys.map((item,i) => { return <Option value={item} key={i}>{ item }</Option> }) } </Select> </div> </div> <div className={styles.anazlyContent}> { !!config && <Pie {...config} /> } </div>
實(shí)現(xiàn)效果如下:
6. 實(shí)現(xiàn)簡(jiǎn)單的 Table 編輯器
實(shí)現(xiàn) Table編輯器其實(shí)筆者在 前端如何一鍵生成多維度數(shù)據(jù)可視化分析報(bào)表 已經(jīng)詳細(xì)分析過(guò)了,也集成在了H5-Dooring的可視化組件編輯器中, 具體 demo 如下:
到此,相信大家對(duì)“怎么讓Table組件無(wú)限可能”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
本文名稱:怎么讓Table組件無(wú)限可能
文章網(wǎng)址:http://bm7419.com/article44/pcioee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、網(wǎng)站導(dǎo)航、服務(wù)器托管、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)