layui使用table.render实现表格跨页勾选+搜索

html://随便写的,大概是这么个页面
<div>
    <input type="hidden" name="store_id" value="{$store_id}">
    <input type="hidden" name="id" value="{$id}">
    <input name="online_id" value="{$online_id}" placeholder="输入ID" class="layui-input"/>
    <input name="code" value="{$code}" placeholder="输入code" class="layui-input"/>
    <button class="layui-btn layui-btn-xs search-btn"><i class="layui-icon">&#xe615;</i> 搜 索</button>
</div>
    <table lay-data="{id:'lowest_price'}" lay-filter="price-filter" id="lowest_price-listing-table"></table>

<script type="text/javascript">
var checkArray = [];
var currentArray ;
let store_id = $('input[name="store_id"]').val();
let id = $('input[name="id"]').val();
    layui.use(['table','form'], function()
    {
       var table = layui.table;
       var form = layui.form;
       var url = "{:url ('lowestPriceListing')}"+"store_id="+store_id+"&id="+id;
        table.render({
            elem: '#lowest_price-listing-table'
            ,url: url
            ,even: true
            ,page: true
            ,limit: 10 //每页显示的条数(默认:10)
            ,id: 'lowest_price'
            ,cols: [[
            {type: 'checkbox'} // 多选
            ,{field: 'product_image', title: '图片', width: 120, height: 100, align: 'center',
            templet: function (d)
             {
               return "<div><img data-tips-image='"+d.main_image+"' src='"+d.main_image+"' style='width: 80px;height: 80px;border:1px solid #ccc;'></div>";
             }
             }
            ]]
            //回调函数,可用于渲染table页面
            ,done: function(res)
            {
                currentArray = res.data ;
                var table = $('#lowest_price-listing-table').next('.layui-table-view');
                let isCheck;
                $.each(currentArray,function (key,val)
                {
                    isCheck = $.inArray(val.online_id,checkArray);
                    if(isCheck > -1)
                    {
                         table.find('table>tbody>tr').eq(key).find('td').eq(0).find('input[type=checkbox]').prop('checked', true);                        
                    }
                })
                form.render('checkbox');
            }
        });

        //监听行单击事件,这里是根据后端返回的online_id作为判断是否选中的依据
        table.on('checkbox(price-filter)', function(obj)
        {
            let checkData = obj.data ;
            // 全选中
            if(obj.type == 'all' && obj.checked)
            {
                let checkStatus = table.checkStatus('lowest_price');
                data = checkStatus.data;
                $.each(data,function (index,item)
                {
                    if(checkArray.indexOf(data[index].online_id) == -1)
                    {
                        checkArray.push(data[index].online_id) ;
                    }
                })
            }
            // 全不选中
            else if(obj.type == 'all' && !obj.checked)
            {
                let currentIndex;
                $.each(currentArray,function (index,item)
                {
                    currentIndex = $.inArray(item.online_id,checkArray);
                    if(currentIndex > -1)
                    {
                        checkArray.splice(currentIndex, 1);
                    }
                })
            }
            //单选
            else
            {
                let online_id = checkData.online_id ;
                let checkIndex = $.inArray(online_id,checkArray);
                if(checkIndex > -1)
                {
                    checkArray.splice(checkIndex, 1);
                }else
                {
                    checkArray.push(online_id) ;
                }
            }
            console.log(currentArray);
            console.log(checkArray);
        });
        //搜索事件
        $('.search-btn').on('click', function()
        {
            let online_id = $('input[name="online_id"]').val();
            let code = $('input[name="code"]').val();
            table.reload('lowest_price', {
                url: url
                ,where: {
                    online_id: online_id,
                    code: code
                }
                ,page: {
                    curr: 1
                }
                ,limit: 10
            });
        })
    });
</script>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值