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

旧城等待， 2021-12-22 03:51 582阅读 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 条评论，582人围观）

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

相关阅读

相关 layui 方法渲染表格数据

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

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

相关 layui 表单提交之后渲染表格

layui表单提交之后渲染表格的方法如下： 1. 在表单提交的回调函数中重新渲染表格 2. 在表单提交的回调函数中重新请求表格数据并重新渲染表格示例代码：

àì夳堔傛蜴生んèń/ 2024年03月25日 08:31/ 0 赞/ 87 阅读

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

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

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

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

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

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

相关 LayUi 之数据表格

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

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

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

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

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

相关《layUI 的数据表格》

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

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

相关 Layui表格渲染

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

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

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

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

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

相关 layui数据表格

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

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