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

旧城等待， 2021-12-22 03:51 558阅读 0赞

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

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

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

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

3-效果展示

![1132920-20190221154627409-241443902.png][]

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表格是进行参数映射  
        }

转载于:https://www.cnblogs.com/wobuchifanqie/p/10413053.html

[https_www.layui.com_demo_table_reload.html]: https://www.layui.com/demo/table/reload.html
[1132920-20190221154627409-241443902.png]: /images/20211220/167741e80a134f54949b880570226af4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，558人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui 方法渲染表格数据

layui.use('table', function () { const table = layui.table; //第一个实例

爱被打了一巴掌/ 2024年03月31日 17:17/ 0 赞/ 109 阅读

相关 layui数据表格如何获取id_layui表格table怎么引入json读取表格数据显示？

展开全部 ![Image 1][] 如上图所示，要32313133353236313431303231363533e58685e5aeb931333365636633扣除里

今天药忘吃喽~/ 2023年01月01日 06:51/ 0 赞/ 175 阅读

相关 layui的数据表格+springmvc实现搜索功能

layui的数据表格+springmvc实现搜索功能没有用过layui可以看看：[ layui的数据表格+springmvc实现数据显示，分页功能 ][layui_s

忘是亡心i/ 2022年05月22日 00:56/ 0 赞/ 212 阅读

相关 LayUi 之数据表格

我们在平常做项目的过程中，如果想使用数据表格的话，一般都是动态数据的处理，而且一般如果我们数据表格不加分页的话，还是很容易做的，但是加了数据表格的话，如果是前端分页，那也好说，

￡神魔★判官ぃ/ 2022年05月20日 04:27/ 0 赞/ 340 阅读

相关 layui给table表格中加入数据渲染表格

//id为 tableIns的表格数据为rows tableIns.reload({ data: }); 或者

古城微笑少年丶/ 2022年05月12日 11:50/ 0 赞/ 347 阅读

相关渲染表格

开发工具与关键技术：vsX 和 jquery 作者：戴怡斌撰写时间：2019.4.16 下面就来看一个渲染表格的案列，表格相信大

╰半夏微凉°/ 2022年04月24日 06:02/ 0 赞/ 307 阅读

相关《layUI 的数据表格》

1.Action private t_book_vo bookvo = new t_book_vo(); private bookDao_vo bdv =

亦凉/ 2022年04月18日 05:24/ 0 赞/ 497 阅读

相关 Layui表格渲染

开发工具与关键技术： Visual Studio 2015 – Layui表格渲染作者：廖亚星撰写时间：2019年5 月15 日下面我用Layui插件来渲染代码

缺乏、安全感/ 2022年01月31日 05:49/ 0 赞/ 545 阅读

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

项目总结19：layui实现表格渲染、表格搜索、数据获取 1-参考资料：[https://www.layui.com/demo/table/reload.html][ht

旧城等待，/ 2021年12月22日 03:51/ 0 赞/ 559 阅读

相关 layui数据表格

快速使用创建一个table实例最简单的方式是，在页面放置一个元素 `<table id="demo"></table>`，然后通过 table.render() 方法指

约定不等于承诺〃/ 2021年06月24日 16:11/ 0 赞/ 804 阅读