layui 分页勾选。

最新推荐文章于 2024-08-07 02:29:47 发布

qq_28761593

最新推荐文章于 2024-08-07 02:29:47 发布

阅读量622

点赞数

分类专栏： thinkphp+layui 文章标签： layui分页勾选 layui分页 layui分页多选框

本文链接：https://blog.csdn.net/qq_28761593/article/details/114023424

版权

thinkphp+layui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

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

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

<!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>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</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" /}
<!-- 注意：如果你直接复制所有代码到本地，上述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>