ZUI数据表格刷新数据

HTML

<link rel="stylesheet" href="https://easysoft.github.io/zui/dist/css/zui.min.css">
<link rel="stylesheet" href="https://easysoft.github.io/zui/dist/lib/datatable/zui.datatable.min.css">
<script src="https://easysoft.github.io/zui/dist/js/zui.min.js"></script>
<script src="https://easysoft.github.io/zui/dist/lib/datatable/zui.datatable.js        "></script>
<div class="datatable" id="datatableExample">
  <i class="icon icon-spin icon-spinner"></i> 正在加载,请稍后...
</div>

<button type="button" id="updateDatatableBtn" class="btn btn-primary"><i class="icon icon-random"></i> 随机更新评分</button>

CSS

body {
  padding: 20px;
}

JavaScript

$(function() {
		// 准备数据
    var data = {
        cols: [ // 定义列
            { width: 50, text: '#', type: 'number', flex: false, colClass: 'text-center' },
            { width: 'auto', text: '名称', type: 'string', flex: false, colClass: '' },
            { sort: 'down', width: 120, text: '时间', type: 'date', flex: true, colClass: '' },
            { width: 100, text: '类型', type: 'string', flex: true, colClass: 'text-center' },
            { sort: false, width: 400, text: '描述', type: 'string', flex: true, colClass: 'nobr' },
            { width: 'auto', text: '评分', type: 'number', flex: false, colClass: 'text-center text-important' },
            { width: 60, text: '操作', type: 'number', flex: false, colClass: 'text-center text-primary' }
        ],
        rows: [ // 定义行
        		/*此行中的每一列数据存放在数组中,注意与列定义的顺序一致*/
            { checked: false/*取消选中*/, data: [1, "张三2", "2016-03-01", "任务", "例子文本...", 90, '<i class="icon icon-pencil"></i>'] },
            { checked: false, data: [2, "李四", "2016-03-023", "待办", "例子文本例子文本例子文本例子文本...", 80, '<i class="icon icon-pencil"></i>'] },
            { checked: false, data: [3, "王五", "2016-03-03", "项目", "例子文本例子文本例子文本例子文本例子文本例子文本例子文本...", 90, '<i class="icon icon-pencil"></i>'] },
            { checked: false, data: [4, "赵六", "2016-03-04", "任务", "例子文本例子文本例子文本...", 70, '<i class="icon icon-pencil"></i>'] },
            { checked: false, data: [5, "孙七", "2016-03-05", "项目", "例子文本例子文本...", 80, '<i class="icon icon-pencil"></i>'] }
        ]
    };
    
    // 初始化数据表格,empty方法作用是清空占位内容
    $('#datatableExample').empty().datatable({
        data: data,
        checkable: true,
        sortable: true,
        //fixedLeftWidth: '30%', // 左侧固定列总宽度
        //fixedRightWidth: '30%' // 又侧固定列总宽度
    });

		// 当点击按钮时,调用 $().datatable('load', new Data|function) 来更新数据表格
    $('#updateDatatableBtn').on('click', function() {
        $('#datatableExample').datatable('load', function(originData, datatable) {
        		//...