文章目錄

• 靜態數據表格
• resetData
• renderData()
• 示例

zui 挺好用的，樣式清新簡潔。

但是示例還不夠豐富，有些比較細節的問題，還需要自己花時間來摸索，比如數據表格的重新渲染問題。

datagrid

靜態數據表格

let myDataGrid = $('#myDataGrid').datagrid({dataSource: {cols:[{name: 'time', label: '時間', width: 132},{name: 'hero', label: '英雄', width: 134},{name: 'action', label: '動作', width: 109},{name: 'target', label: '目標', width: 109},{name: 'desc', label: '描述', width: 287}],array:[{time: '00:11:12', hero:'幻影刺客', action: '擊殺', target: '斧王', desc: '幻影刺客擊殺了斧王。'},{time: '00:13:22', hero:'幻影刺客', action: '購買了', target: '隱刀', desc: '幻影刺客購買了隱刀。'},{time: '00:19:36', hero:'斧王', action: '購買了', target: '黑皇杖', desc: '斧王購買了黑皇杖。'},{time: '00:21:43', hero:'力丸', action: '購買了', target: '隱刀', desc: '力丸購買了隱刀。'}]} });

如果對表格中的數據更新后，如何重新渲染？

resetData

這個方法在官方文檔上沒有提及，但是很重要。

通過查看其接口，可以發現：

resetData = function(dataId, data, pager){}

• 第一個參數是 dataId，是 dataSource 的一個屬性，可以通過 dataSource.dataId 來獲取。
• 第二個參數是 data，是更新后的數據；

renderData()

重新渲染所有行及單元格。

示例

let newData = [{{time: '00:11:12', hero:'幻影刺客', action: '擊殺', target: '斧王', desc: '幻影刺客擊殺了斧王。'}}]; let dg = myDataGrid.data("zui.datagrid"); dg.resetData(dg.dataSource.dataId, newData); dg.renderData()

這樣就可以對表格進行更新了。

備注：
對于靜態數據，如果初始化時為空，則無法正常添加，需要在初始化時預置一定數量的空行！！！

如何有其他更好用的方案，歡迎指點告之。

總結

以上是生活随笔為你收集整理的ZUI datagrid 数据表格重新渲染问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。