经典模块化前端框架LayUI——表格+表格重载

 layui.use('table', function(){
     var table = layui.table;

     //方法级渲染
     //展示已知数据
    table.render({
        elem: '#WarningTable'
        ,cols: [[ //标题栏
            {field: 'id', title: '序号', align:"center",style:"vertical-align: middle;text-align: center;",width: 250, sort: true}
            ,{field: 'TerminalID', title: '终端ID',align:"center",style:"vertical-align: middle;text-align: center;", width: 380}
            ,{field: 'Info', title: '告警信息', align:"center",style:"vertical-align: middle;text-align: center;",minWidth: 400}
        ]]
        ,id: 'testReload'//产生重载的id
        ,data: []
        ,even: true
        ,page: true //是否显示分页
        ,limits: [5, 7, 10]
        ,limit: 5 //每页默认显示的数量
    });

    //点击产生数据重载
    var $ = layui.$, active = {
        reload: function(){
         //表格数据重载(testReload为对应的重载id)
          table.reload('testReload', {
                  data:Data
                  //Data为数据向量
              }
              , 'data');
        }
    };

//点击重载
    $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
});

主要是根据Reload这个函数实现的数据重载。

发布了28 篇原创文章 · 获赞 4 · 访问量 8716

猜你喜欢

转载自blog.csdn.net/Yolandalt7777777/article/details/104075729