使用LayUI操作資料表格

<table class="layui-hide" id="LAY_table_user" lay-filter="useruv"></table>      

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">檢視</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit">編輯</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>


 //方法級渲染
        table.render({
            elem: '#LAY_table_user'
            ,url: 'UVServlet'
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
                ,{field:'aid', title: '商戶', width:80, sort: true}
                ,{field:'uv', title: '通路量', width:80, sort: true,edit:true}
                ,{field:'date', title: '日期', width:180}
                ,{field:'datatype', title: '日期類型', width:100}
                ,{field:'right', title: '操作', width:177,toolbar:"#barDemo"}
            ]]
            ,id: 'testReload'
            ,page: true
            ,height: 600
        });      

//監聽表格複選框選擇
        table.on('checkbox(useruv)', function(obj){
            console.log(obj)
        });      

//監聽工具條
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      layer.msg('ID：'+ data.id + ' 的檢視操作');
    } else if(obj.event === 'del'){
      layer.confirm('真的删除行麼', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.alert('編輯行：<br>'+ JSON.stringify(data))
    }
  });      

此随筆或為自己所寫、或為轉載于網絡。僅用于個人收集及備忘。