layui 分页勾选。

￡神魔★判官ぃ 2022-11-01 13:43 2阅读 0赞

话不多说直接上图，上代码  
ui:layui  
后台用的thinkphp5  
不用安装啥，只要自己有layui的js，引入后提取你需要的部分。

主要部分：parseData返回数据处理、工具栏事件、单选事件方法。

有想过按照不同页面来进行，但万一选择了页数，又发生改变，数据又对不上号，又得重新来选，就直接把所有id直接存起来，勾选后保存id，取消勾选删除id，加载后匹配id设置勾选效果。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4NzYxNTkz_size_16_color_FFFFFF_t_70]  
又不懂的可以私信我

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        {include file="common/css" /}
        <style>
            /*.layui-form-pane .layui-form-label{*/
            /*width: auto;*/
            /*}*/
            /*.layui-form-item .layui-input-inline{*/
            /*width: 100px;*/
    
            /*}*/
        </style>
        
    </head>
    <body style="padding:0px 10px;">
    
    
    <script type="text/html" id="toolAdminDemo">
        <div class="layui-btn-container" style="padding-right: 50px;text-align: right">
            <button class="layui-btn layui-btn-sm" style="float: left;" lay-event="getCheckData">全选</button>
            <button class="layui-btn layui-btn-sm"  lay-event="uploadCheckData">导出所选项</button>
        </div>
    </script>
    
    
    <script type="text/html" id="barAdminDemo">
        <a class="layui-btn layui-btn-xs" lay-event="look">查看</a>
    </script>
    <script type="text/html" id="rank">
        {
       {d.LAY_TABLE_INDEX+1}}
    </script>
    <script type="text/html" id="statusTpi">
        {
       {#  if(d.status == 1){ }}
        <span style="color: #2fa8ec">未巡查</span>
        {
       {#  } }}
        {
       {#  if(d.status == 2){ }}
        <span style="color: #2fa8ec">已巡查</span>
        {
       {#  } }}
    </script>
    
    
    <table class="layui-hide" id="LAY_table_user" lay-filter="listTable"></table>
    
    <div id="test1"></div>
    
    
    {include file="common/js" /}
    
    <script>
        var page_ = 1;
        var idsData = [];
        layui.use(['table','form', 'layedit', 'laydate','laypage'], function(){
            var table = layui.table,
                form = layui.form,
                layer = layui.layer ;
    
            var counts_ = 0;
            var data_ = [];
            //方法级渲染
    
            var tableIns = table.render({
                id: 'testReload',
                text:'请求异常了',
                totalRow: true,
                elem: '#LAY_table_user',
                url: 'Jkdigit/getlist',//实际请求地址
    //            data:[{
    //                id:1,
    //                title:'11111'
    //            },{
    //                id:2,
    //                title:'2222'
    //            },{
    //                id:3,
    //                title:'3333'
    //            },{
    //                id:4,
    //                title:'114444111'
    //            }],
                toolbar: '#toolAdminDemo', //开启头部工具栏，并为其绑定左侧模板
                defaultToolbar: [
                    { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                        title: '刷新',
                        layEvent: 'refresh',
                        icon: 'layui-icon-refresh'
                    },
                    'filter',
                    'exports',
                    'print',
                    { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                        title: '导出全部xls',
                        layEvent: 'getExcel',
                        icon: 'iconfont icon-Shape'
                    },
                ],
                page:true,
                height: 'full-80',//高度最大化
                limit:2,
                limits:[1,2,3,10,15,20,30,50,100],
                parseData:function (res) {
                    var resdata_ = res.data;
                    //页数默认为1减去1
                    var pageIds = idsData;
                    for(var i in resdata_){
                        for(var k in pageIds){
                            if(resdata_[i].id === pageIds[k]){
                                resdata_[i].LAY_CHECKED = true
                            }
                        }
                    }
                    data_ = resdata_
                    counts_ = res.count;
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": resdata_ //解析数据列表
                    };
                },
                where:{
                    title:'',
                    phone:'',
                    code:''
                },
                done: function(res, curr, count){},
                title:'xxxx',
                cols: [[ //表头
                    {type: 'checkbox', fixed: 'LAY_CHECKED'},
                    {field: 'rank', title: '序号', width: 80,  fixed: 'left', templet: '#rank' },
                    {field: 'title',minWidth: 100,title: '名称'},
                    {fixed: 'right', title:'操作', toolbar: '#barAdminDemo', width:150}
                ]]
            });
    
            var $ = layui.$, active = {
                reload: function(){
                    //执行重载
                    lodinlist(1, {
                        title: $('#title').val()
                    });
                }
            };
    
            //数据加载处理
            function lodinlist(curr,where) {
                console.log(curr,'===')
                table.reload('testReload', {
                    page: {
                        curr: curr //重新从第 curr 页开始
                    },
                    where:where
                }, 'data');
    
            }
    
            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
    
            //监听工具条
            table.on('tool(listTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'look'){
                    layer.msg('ID：'+ data.id + ' 的查看操作');
                }
    
            });
            //工具栏事件(添加、刷新)
            table.on('toolbar(listTable)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    //自定义头工具栏右侧图标 - 提示
                    case  'getCheckData':
                        console.log('依据条件直接进行筛选')
                        break;
                    case 'uploadCheckData':
                        //执行重载
                        console.log('下载地址方法')
    
                        console.log(idsData)
                        break;
                    case 'refresh':
                        //执行重载
                        lodinlist(1,{
                            title: '',
                        })
                        break;
                };
            });
            //单选事件方法
            table.on('checkbox(listTable)', function(obj){
                var page_id = page_-1;
                if(obj.type == 'all'){
                    var newData_ = [];
                    for(var i in data_){
                        newData_.push(data_[i].id)
                    }
                    switch (obj.checked){
                        case true:
                            idsData = idsData.concat(newData_)
                            break;
                        case false:
                            for(var i in idsData){
                                for(var k in newData_){
                                    if(idsData[i] == newData_[k]){
                                        idsData.splice(i,1);
                                    }
                                }
                            }
                            break;
                    }
                }else {
                    switch (obj.checked){
                        case true:
                            idsData.push(obj.data.id);
                            break;
                        case false:
                            for(var i in idsData){
                                if(idsData[i] == obj.data.id){
                                    idsData.splice(i,1);
                                }
                            }
                            break;
                    }
                }
                console.log('当前选中的数据',idsData)
            });
    
        })
    </script>
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4NzYxNTkz_size_16_color_FFFFFF_t_70]: /images/20221024/3982abf89f694ce6b987704c539b4768.png