表格列表加筛选字段功能

2022-03-31 15:12:48 阅读:1 编辑
{extend name="common/index" /}
{block name="search_box"}

<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css">
<style>
    .layui-table-tool-panel li .layui-form-checkbox[lay-skin=primary] {
        width: 100%;
        padding-left: 0;
    }
</style>
<script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>
<!--搜索栏-->
<div class="search-box">
    <div style="margin-top: 20px;">
        <div class="layui-inline">
            <select name="search_condition" id="search_condition" style="width: 200px;" class="select2" lay-ignore>
            </select>
        </div>
        <div class="layui-inline">
            <input class="layui-input" name="key" id="key" placeholder="请输入搜索内容..." autocomplete="off">
        </div>
        <div class="layui-inline">
            <input class="layui-input" name="key_ordernum" id="key_ordernum" placeholder="请输入订单号..." autocomplete="off">
        </div>
        <!--<div class="layui-inline">-->
            <!--<select name="settle_status" id="settle_status" style="width: 200px;" class="select2" lay-ignore>-->
            <!--</select>-->
        <!--</div>-->
        <button class="layui-btn" id="btnSearch">搜索</button>
    </div>
</div>

{/block}
{block name="tool_box"}
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">

    </div>
</script>
<!--工具栏-->
<!--<div class="tool-box">
    <div class="layui-btn-group">
     <a href="javascript:;" id="btnAdd" class="layui-btn layui-btn-primary layui-btn-sm">新增</a>
       <a href="javascript:;" id="btnBatchDelete" class="layui-btn layui-btn-danger layui-btn-sm">删除</a>
   </div>

</div>-->
{/block}
{block name="table_config"}
<script type="text/html" id="dataShowIndex">
    <input type="checkbox" name="show_index" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="show_index" {{ d.show_index == 1 ? 'checked' : '' }}>
</script>

<script>
    layui.use(['table','form'], function () {
        var table = layui.table;
        var form = layui.form;
        //        表格初始化
        table.render({
            elem: '#laytable'
            ,url:"{:adminurl('get_list')}"
            ,toolbar: '#toolbar'
            ,defaultToolbar: ['filter']
            ,cols: [[
                {type:'checkbox',fixed:'left'},
                {field:'store_name', width:180, title: '所属商家',sort:false},
                {field:'order_no', width:180, title: '订单号',sort:false},
                {field:'nickname', width:180, title: '购买人',sort:false},
                {field:'user_id', width:100, title: '购买人id',sort:false},
                {field:'create_time', width:180, title: '下单时间',sort:false},
                {field:'settle_status', width:100, title: '结算状态',sort:false},
                {field:'divide_money1', width:130, title: '区级池',sort:false},
                {field:'divide_money2', width:130, title: '市级池',sort:false},
                {field:'divide_money3', width:130, title: '省级池',sort:false},
                {field:'divide_money4', width:130, title: '总代池',sort:false},
                {field:'divide_money5', width:130, title: '董事池',sort:false},
                {field:'divide_money6', width:130, title: '社区店池',sort:false},
                {field:'divide_money7', width:130, title: '分公司池',sort:false},
            ]]
            ,page: true,
            height:'full-300',
        });
        //        搜索
        $('#btnSearch').unbind('click').click(function () {
            //执行重载
            table.reload('laytable', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    key: $('#key').val(),
                    search_condition: $('#search_condition').val(),
                    key_ordernum: $('#key_ordernum').val(),
                }
            });
        });
        $('#key').unbind().on('keypress', function (e) {
            if (e.keyCode == 13){
                //执行重载
                table.reload('laytable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: $('#key').val(),
                        search_condition: $('#search_condition').val(),
                        key_ordernum: $('#key_ordernum').val(),
                    }
                });
            }
        })

    })

    require(['select2'], function () {
        $('.select2').select2();
        var ret = [
            {"id":0,"text":"请选择条件"},
            {"id":1,"text":"买家昵称"},
            {"id":2,"text":"买家id"},
        ];
        ret.map(function (obj) {
            obj.keywords += obj.text.toPinYin() + obj.text.toPinYin(true);
            return obj;
        });
        $('#search_condition').select2({
            data: ret,
        })

    })
</script>
{/block}