layui获取checkbox的值table列表lists页选中checkbox

最新推荐文章于 2025-09-11 02:12:58 发布

原创最新推荐文章于 2025-09-11 02:12:58 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

77 篇文章

订阅专栏

本文介绍了一个用于管理门店活动的界面设计，包括活动搜索、筛选、分页展示及门店选择功能，通过layui组件实现交互，提供了门店CODE和名称的输入框，以及活动列表的展示。

{extend name="public/base" /}
{block name="main"}
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a><cite>官方活动</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh"></i>
    </a>
</div>
<div class="x-body">
    <div class="layui-row review-filter layui-form">

        <div class="layui-inline">
            <input class="layui-input" placeholder="活动CODE" name="STORE_CODE" id="STORE_CODE">
        </div>
        <div class="layui-inline">
            <input class="layui-input" placeholder="活动名称" name="STORE_NAME" id="STORE_NAME">
        </div>

        <button id="sreach" class="layui-btn" data-type="reload" lay-submit="" lay-filter="sreach"><i class="layui-icon layui-icon-search"></i></button>

    </div>


<input id="STORE_CODE_LISTS" type="text">
    <table id="activity_list_table" class="layui-table" lay-filter="activity_list"></table>
</div>

<script type="text/html" id="ACTIVITY_STATUS">
</script>


<style>
    .layui-laydate-hint{display:none;}//屏蔽layui date js错误提示
</style>

<script>

    layui.use('laydate', function(){
        var laydate = layui.laydate; //见：https://www.layui.com/doc/modules/laydate.html

        //执行一个laydate实例
        laydate.render({
            elem: '#BDATE',
            format: 'yyyy-MM-dd HH:mm:ss'
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#EDATE',
            format: 'yyyy-MM-dd 23:59:59'
        });
    });

    layui.use(['form', 'table'], function(){
        var table = layui.table;
        table.render({
            elem: '#activity_list_table',
            url: '/admin/storelists/getList/', //数据接口
            page: true, //开启分页
            limit: 20,
            limits: [20,50,100],
            cols: [[ //表头
                {checkbox: true},
                {field: 'PKID', title: 'ID', width:80,},
                {field: 'STORE_CODE', title: '门店CODE', width:100},
                {field: 'STORE_NAME', title: '门店名称', width:360},
            ]]
        });

        $("#sreach").click(function () {
            table.reload('activity_list_table', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                url: '/admin/storelists/getList/'
                ,where: {
                    STORE_CODE:$('#STORE_CODE').val(),
                    STORE_NAME:$('#STORE_NAME').val(),
                } //设定异步数据接口的额外参数
                //,height: 300
            });
        });

        //选择checkbox事件，获取选中的值，并赋值给父层
        table.on('checkbox(activity_list)', function(obj){
            var checkStatus = table.checkStatus('activity_list_table');
            var data = checkStatus.data;
            console.log(data);

            var STORE_CODE_ARY  = new Array();;//选中的checkbox
            var STORE_HTML      = '';
            $.each(data, function (n, value) {
                STORE_CODE_ARY[n] = value.STORE_CODE;
                STORE_HTML      += "<div>【"+value.STORE_CODE+"】 "+value.STORE_NAME+"</div>";
            });
            console.log(STORE_CODE_ARY);
            window.parent.$("#STORE_CODE_LISTS").val(STORE_CODE_ARY);
            window.parent.$("#STORE_HTML").html(STORE_HTML);

        });

    });


</script>
{/block}

底层（父层）代码

        <div class="layui-form-item">
            <label class="layui-form-label">参与门店</label>
            <div class="layui-input-inline" style="width:300px;">
                <a class="layui-btn" id="select_store" onclick="x_admin_show('选择门店','/admin/storelists', 640, 640)">选择</a>
            </div>
        </div>
        <div style="display: ;"><input type="text" id="STORE_CODE_LISTS"></div>
        <div class="layui-form-item">
            <label class="layui-form-label"> </label>
            <div class="layui-input-inline" id="STORE_HTML" style="min-height: 100px;">
                <?php
                $result_store = $row ? $row['result_store'] : [];
                $index_store = 0;
                foreach ($result_store as $row_store):
                    ?>
                    <div style="width:300px;">
                        【<?php echo $row_store['STORE_CODE'];?>】 <?php echo $row_store['STORE_NAME'];?>
                    </div>
                    <?php
                    $index_store++;
                endforeach;
                ?>
            </div>
        </div>

参照：

table.on('checkbox(member)', function(obj){
              var checkStatus = table.checkStatus('layui_table_member');
              var data = checkStatus.data;
              console.log(data);
          });


<table id="layui_table_member" lay-filter="member" ></table>