• layui动态数据表格-分页


    数据结构

     $list = [
                ['id'=>1,'username'=>'2'],
                ['id'=>2,'username'=>2]
            ];
            $json['code'] = 0;
            $json['msg'] = '1';
            $json['count'] = 2;
            $json['data'] = $list;
            return json($json);

    代码:

    <script>
        layui.use('table', function(){
            var table = layui.table;
    
            table.render({
                elem: '#tab-content'
                //,url:'/test/table/demo1.json'
                ,url: "{:url('user/lists')}"
                ,toolbar: '#toolbarDemo'
                ,title: '用户数据表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'ID', 80, fixed: 'left', unresize: true, sort: true}
                    ,{field: 'name', title: '管理员', 80}
                    ,{field: 'role_name', title: '角色组', 80, sort: true}
                    ,{field: 'email', title: '邮箱', 80}
                    ,{field: 'status', title: '状态',  177}
                    ,{field: 'add_time', title: '添加时间',  150, sort: true}
                    ,{field: 'update_time', title: '修改时间',  150, sort: true}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', 150}
                ]]
                ,page: 1
            });
    
            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了:'+ data.length + '');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;
                };
            });
    
            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    layer.prompt({
                        formType: 2
                        ,value: data.email
                    }, function(value, index){
                        obj.update({
                            email: value
                        });
                        layer.close(index);
                    });
                }
            });
        });
    </script>
  • 相关阅读:
    System.Web.Mvc.HttpHeadAttribute.cs
    System.Web.Mvc.HttpOptionsAttribute.cs
    System.Web.Mvc.HttpDeleteAttribute.cs
    sqlite-dbeaver-heidisql
    java实现圆周率
    java实现圆周率
    java实现圆周率
    java实现圆周率
    java实现圆周率
    java实现最近距离
  • 原文地址:https://www.cnblogs.com/wesky/p/9682732.html
Copyright © 2020-2023  润新知