项目总结19：layui实现表格渲染、表格搜索、数据获取

1-参考资料：https://www.layui.com/demo/table/reload.html

2-本次总结的是layui的表格功能，主要功能如下：

对后台的传来的数据进行表格进行分页展示，数据是服务端分页
对表格支持模糊搜索，搜索的本质是对服务器进行重新请求(附加搜索条件)
获取表格某行数据，并进行业务处理

3-效果展示

4-代码明细-（更具体的使用，可以参考官网文档）

js引用(需要自己去官网下载)

        <script src="plugins/layer/layer.js"></script>
        <script src="plugins/layui/layui.all.js"></script>
        <link rel="stylesheet" href="plugins/layer/layui.css" />
        <style>
            img{
                border:0;
                display:inline;
            }
            hr{font-weight:bold}
        </style>

HTML代码

<body>
    <div class="layui-container">
        <input type="hidden"  id="id" value="${entity.id}" />
        <fieldset class="layui-elem-field">
            <legend class="strong">关联会场</legend>

            <%--搜索栏目--%>
            <div class="layui-inline">
                <input class="layui-input" name="exhibitionInput" id="exhibitionInput" autocomplete="off" placeholder="请输入会场名称">
            </div>
            <button class="layui-btn" id="searchExhibition" data-type="reload">搜索</button>

            <%--保存按钮--%>
            <script type="text/html" id="exhibitionToolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">关联被选中的会场</button>
                </div>
            </script>

            <%--表格--%>
            <table id="exhibitionTable" lay-filter="exhibitionFilter"></table><%--layui初始化需要的table--%>

        </fieldset>
    </div>
</body>

JS代码(当前代码需要放在HTML代码下方，否则会表格渲染失败)

<script>
    /*使用layui的表格功能*/
    layui.use('table', function(){
        var table = layui.table;
        /*layui渲染表格*/
        table.render({
            elem: '#exhibitionTable',//实例化需要的table的id
            height: 360,//容器高度
            url: 'exhibition/rest/list',//请求参数URL
            method:"get",//GET方法
            where:{},//用户自定义请求参数(直接跟在url?后面)
            parseData: function(res){ //res 即为原始返回的数据
                return {//对返回数据的参数名称进行映射
                    "code": 0, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.rows //解析数据列表
                };
            },
            request: {//请求参数名称映射配置
                pageName: 'pageNum' //页码的参数名称，默认：page
                ,limitName: 'limit' //每页数据量的参数名，默认：limit
            },
            limit:5,
            limits:[5,25,50],
            toolbar: '#exhibitionToolbar',//初始化保存按钮
            page: true ,//开启分页
            cols: [[ //表头
                {type:'radio'}
                ,{type:'numbers', title: '序号', width:50, sort: true}
                ,{field: 'name', title: '会场名称', width:250}
                ,{field: 'statusName', title: '会场状态',width:120}
                ,{field: 'logoUrl', title: '封面图片', width:200, templet: '#logoTpl',sort: true}/*//templet参数用户定制列的数据特殊标签处理*/
            ]]
        });
        /*表格重载(搜索的点击时间调用的是方法)*/
        var $ = layui.$, active = {
            reload: function(){
                var exhibitionInput = $('#exhibitionInput');
                //执行重载
                table.reload('exhibitionTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        name: exhibitionInput.val()
                    }
                });
            }
        };
        /*绑定搜索点击事件*/
        $('#searchExhibition').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        /*//头工具栏事件*/
        table.on('toolbar(exhibitionFilter)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;  //获取选中行数据
                    var exhibitionId =data[0].id;
                    saveLinkInfo(exhibitionId,'<%=BannerLinkTypeEnum.EXHIBITION.getKey()%>');
                    console.log("exhibitionId" + exhibitionId);
                    break;
            };
        });
    });
</script>
<%--定制列样式，展示图片--%>
<script type="text/html" id="logoTpl">
    <img style="width:75px;height:50px" src="{{d.logoUrl}}">
</script>

后台数据请求接口

    /**
     * 列表
     */
    @RequestMapping(value = { "/rest/list" }, method = {RequestMethod.GET }, produces = {JSON_UTF8})
    @ResponseBody
    public String restList(@RequestParam Map<String, String> map){
       //.....省略业务实现
       //返回的数据格式：{"code":"200","msg":"sucess","total":"1000","rows":[{"data":"data"},{"data":"data"}]}
        //返回的数据格式和layui可以接受的数据格式不一致，需要在前端初始化layui表格是进行参数映射  
    }

posted on 2019-02-21 15:48 我不吃番茄阅读(5659) 评论(0) 收藏举报