静态数据表格

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 数据表格重新渲染问题相关推荐

datagrid数据表格当数据为0的时候页面不显示数据
如下图: datagrid数据表格当数据为0的时候页面不显示数据,为空的表格数据全是0,但是页面无法显示传递的json数据也是没问题的: 所以实在想不通,为什么easyUI datagrid 不显示 ...
Easyui之Datagrid(数据表格)
Datagrid 前言 1.概念 2.常见使用案例 3.datagrid属性 4.datagrid事件 5.datagrid方法 6.案例演示 7.为什么使用datagrid 总结前言今天为大家分 ...
DataGrid( 数据表格) 组件[5]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination ...
（五）EasyUI使用——datagrid数据表格
DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识.它是轻量级的且功能丰富.单元格合并. ...
layui 自定义request_layui中使用自定义数据格式对数据表格进行渲染
1.引入 2.页面代码编辑删除 layui.use('table', function(){ var table = layui.table; table.render({ elem: '[lay ...
datagrid数据表格使用方法
将静态HTML渲染为datagrid样式: <table class="easyui-datagrid&q ...
jQuery EasyUI API 中文文档 - DataGrid 数据表格
扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagin ...
jquery easyui DataGrid 数据表格属性
扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagin ...
JQuery Easy Ui dataGrid 数据表格 --转
转至: http://www.cnblogs.com/cnjava/archive/2013/01/21/2869876.html#events 数据表格 - DataGrid 内容概况使用方法 ...
jquery easy ui 1.3.4 数据表格(DataGrid)（8）
8.1.创建DataGrid html代码 <table id="dg"></table> $("#dg").datagrid({ // ...

ZUI datagrid 数据表格重新渲染问题

文章目录

静态数据表格

resetData

renderData()

示例

ZUI datagrid 数据表格重新渲染问题相关推荐

最新文章

热门文章