精华内容
下载资源
问答
  • 今天小编就为大家分享一篇layui使用表格渲染获取行数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • link rel=stylesheet href=lib/layui/css/layui.css rel=external nofollow > [removed][removed] 2,在页面放置一个table元素 <table class=layui-hide id=test lay-filter='test3'> 3,通过 table.render() ...
  • layui表格数据重载

    2020-12-29 20:20:01
    本文实例为大家分享了layui表格数据重载,供大家参考,具体内容如下 html代码 <form class=layui-form action=> <div class=layui-form-item xss=removed> <div class=layui-inline> <input type=...
  • 使用layui表格进行数据渲染

    千次阅读 2020-09-01 14:59:50
    <script type="text/html" id="action"> <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> ...

    1.效果:

    1.分页:
    第一页
    在这里插入图片描述
    第二页
    在这里插入图片描述

    将每页的信息数改为20条后:
    在这里插入图片描述

    2.点击信息即可修改内容,修改完成后点击"编辑"按钮,即可向后台发送请求

    在这里插入图片描述
    在这里插入图片描述

    3.按钮:设置员工状态,点击后会向后台发送请求,根据返回信息,修改按钮状态

    在这里插入图片描述

    4.删除功能:

    在这里插入图片描述
    在这里插入图片描述

    5.页面代码:

    user.jsp

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <script src="layui/layui.js"></script>
        <script src="layui/lay/modules/jquery.js"></script>
        <script src="layui/lay/modules/table.js"></script>
        <script src="js/jquery-3.4.1.min.js"></script>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
    ${user.name}
    <a href="pages/addEmp.jsp">添加用户</a>
    <table id="demo" class="layui-table" lay-filter="test"></table>
    
    <script type="text/html" id="action">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script id="userState" type="text/html">
        <input type="checkbox"  value ={{d.state}} lay-skin="switch" lay-text="在职|离职" lay-filter="state" {{d.state=='1'?'checked':''}}>
    </script>
    <script id="userGender" type="text/html">
       {{# if(d.gender=='0'){ }}{{# }else{ }}{{# } }}
    </script>
    <script>
        var tableData;
        layui.use(['table','form'], function(){
            var table = layui.table;
            var form = layui.form;
    
            //第一个实例
            var tableInstance = table.render({
                elem: '#demo'
                ,id:'tableIns'
                ,height: 500
                ,width:1200
                ,url: '/emp_war_exploded/emp2' //数据接口
                ,page: true //开启分页
                ,done:function () {
                  tableData = table.cache.tableIns;
                }
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:80, hide:true}
                    ,{field: 'name', title: '用户名', width:150,edit:'text'}
                    ,{field:'birth',title:'生日',width:150,edit:'text'}
                    ,{field:'phone',title:'电话',width:150,edit:'text'}
                    ,{field:'email',title:'邮箱',width:150,edit:'text'}
                    ,{field:'address',title:'地址',width:150,edit:'text'}
                    ,{field:'departmentid',title:'部门',width:60,edit:'text'}
                    ,{field:'state',title:'用户状态',templet:'#userState',width:120}
                    ,{field:'gender',title:'性别',templet:'#userGender',width:60}
                    ,{fixed:"right",title:'操作',toolbar:'#action',width:180}
                ]]
            });
            //监听table中的工具栏
            table.on('tool(test)',function(obj) {
                console.log(obj);
                console.log(obj.data)
                var data = obj.data;
                switch (obj.event) {
                    case 'edit':
                        var id = data.id;
                        var name = data.name;
                        var birth = data.birth;
                        var phone = data.phone;
                        var email = data.email;
                        var address = data.address;
                        var departmentid = data.departmentid;
                        var gender = data.gender;
                        var state = data.state;
                        $.ajax({
                             url:"http://localhost/emp_war_exploded/emp3",
                            type:"post",
                            data :{"method":"update","id":id,"name":name,"birth":birth,"phone":phone,"email":email,"address":address,"departmentid":departmentid,"gender":gender,"state":state},
                            success:function (msg) {
                              layer.msg(msg);
                            }
                        })
    
                        break;
    
                    case  'del':
                        layer.confirm("确定要删除该用户吗?"+obj.data.name,function (index) {
                            $.ajax({
                             url:"http://localhost/emp_war_exploded/emp3",
                             type:"post",
                             dataType:"json",
                             data:{"id":data.id,"method":"delete"},
                             success:function (msg) {
                                 console.log("删除数据"+msg);
                                 layer.close(index);
                               if(msg=="OK"){
                                   obj.del();
                                   layer.msg("删除成功!");
                               }else {
                                   layer.msg("删除失败");
                               }
                             }
                            })
                        })
                        break;
                }
            });
            form.on('switch(state)',function (data){
                var flag = data.elem.checked;
                var switchState = data.elem.checked?1:0;
                var index  = data.othis.parents('tr').attr("data-index");
                var id = tableData[index].id;
                $.post({
                    url:"http://localhost/emp_war_exploded/emp3",
                    type:"post",
                    dataType:"json",
                    data:{"method":"setState","state":switchState,"id":id},
                    success:function (msg) {
                       layer.msg(msg);
                       if(msg=="ok"){
                           data.elem.checked = flag;
                       }else{
                           data.elem.checked = !flag;
                       }
                    }
                })
    
            })
        })
    
    </script>
    </body>
    </html>
    

    6.后端代码:

    BaseServlet:你想,如果每个请求我们都要写一个Servlet,请求那么多,我们难道每个Servlet都要写吗。既然学习过反射了,那这里是不是也可以用反射来简化呢?
    步骤:前端传请求,设置一个方法参数method,我们可以根据方法的值来具体确定要调用哪个方法,既然有了方法名了,那我们是不是就可以用对象.invoke(methodName,可变参数)的方式来调用方法了吗?于是就有了如下的一个Servlet

    /**
     * @Description:
     * @Author one world
     * @Date 2020/8/31 0031 17:27
     */
    @WebServlet(name = "BaseServlet")
    public abstract class BaseServlet extends HttpServlet {
        @Override
        protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            req.setCharacterEncoding("UTF-8");
            resp.setCharacterEncoding("UTF-8");
            resp.setHeader("Content-type", "text/html;charset=UTF-8");
            String methodName = req.getParameter("method");
            System.out.println("方法名为"+methodName);
            if(methodName==null||methodName.trim().isEmpty()){
                System.out.println("方法名为空");
            }
            Method method = null;
            Class clazz = this.getClass();
            try {
                method = clazz.getMethod(methodName, HttpServletRequest.class,HttpServletResponse.class);
                //这里的result为方法返回的需要重定向或者转发的url
                String result = (String) method.invoke(this, req,resp);
                if(result==null||result.trim().isEmpty()){
                    return;
                }
                if(result.contains(":")){
                    int index = result.indexOf(":");
                    //获取前缀,通过前缀名区分是转发还是重定向
                    String pre = result.substring(0,index);
                    //获取后缀
                    String after = result.substring(index+1);
                    System.out.println("前缀为:"+pre+"后缀为:"+after);
                    if(pre.equals("forward")){
                        req.getRequestDispatcher(after).forward(req, resp);
                    }else if(pre.equalsIgnoreCase("sendRedirect")){
                        resp.sendRedirect(after);
                    }else{
                        System.out.println("方法错误");
                        return;
                    }
                }
            } catch (NoSuchMethodException e) {
                e.printStackTrace();
            } catch (IllegalAccessException e) {
                e.printStackTrace();
            } catch (InvocationTargetException e) {
                e.printStackTrace();
            }
        }
    }
    

    具体EmpServlet3

    /**
     * @Description:
     * @Author one world
     * @Date 2020/8/31 0031 17:54
     */
    @WebServlet("/emp3")
    public class EmpServlet3 extends BaseServlet {
        private EmployeeService service = new EmployeeServiceImpl();
        public void delete(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            String idStr = req.getParameter("id");
            System.out.println("idStr"+idStr);
           Integer id = Integer.parseInt(req.getParameter("id"));
           Gson gson = new Gson();
            if(service.delById(id)){
             resp.getWriter().write(gson.toJson("OK"));
             resp.getWriter().close();
            }
    
        }
        public String add(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
            Employee e = new Employee();
            String name = req.getParameter("name");
            String phone = req.getParameter("phone");
            String email = req.getParameter("email");
            String address = req.getParameter("address");
            Date birth = new Date();
            Integer departmentId = Integer.parseInt(req.getParameter("departmentid"));
            Integer gender = Integer.parseInt(req.getParameter("gender"));
            Integer state = Integer.parseInt(req.getParameter("state"));
            e.setAddress(address);
            e.setBirth(birth);
            e.setDepartmentid(departmentId);
            e.setEmail(email);
            e.setName(name);
            e.setPhone(phone);
            e.setState(state);
            e.setGender(gender);
            service.add(e);
            return "forward:/emp3?method=findAll";
        }
        public String findAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
            List<Employee> emps = service.findAll();
            User user = (User)req.getAttribute("user");
            String pageStr = req.getParameter("page");
            String pageLimit = req.getParameter("limit");
            if(pageStr==null||"".equals("")){
               pageStr = "1";
            }
            if(pageLimit==null||"".equals("")){
                pageLimit = "10";
            }
            Integer page = Integer.parseInt(pageStr);
            Integer limit = Integer.parseInt(pageLimit);
            List<Employee> result = new ArrayList<Employee>(limit);
            int count = (page-1)*limit;
            int num=0;
            for(int i=count;i<emps.size();i++){
                result.add(emps.get(i));
                if(num==limit-1){
                    break;
                }
                num++;
            }
            Map map = new HashMap();
            map.put("code", 0);
            map.put("msg", "");
            map.put("count", emps.size());
            map.put("data", result);
            Gson gson = new Gson();
            String str = gson.toJson(map);
            System.out.println(str);
            resp.getWriter().write(str);
            return "forward:/pages/user.jsp";
        }
        public void update(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
            Employee e = new Employee();
            Integer id = Integer.parseInt(req.getParameter("id"));
            String name = req.getParameter("name");
            String phone = req.getParameter("phone");
            String email = req.getParameter("email");
            String address = req.getParameter("address");
            Date birth = new Date(req.getParameter("birth"));
            Integer departmentId = Integer.parseInt(req.getParameter("departmentid"));
            Integer gender = Integer.parseInt(req.getParameter("gender"));
            Integer state = Integer.parseInt(req.getParameter("state"));
            e.setId(id);
            e.setAddress(address);
            e.setBirth(birth);
            e.setDepartmentid(departmentId);
            e.setEmail(email);
            e.setName(name);
            e.setPhone(phone);
            e.setState(state);
            e.setGender(gender);
            System.out.println("修改后的信息为"+e);
            String msg = "修改失败";
            if(service.update(e)){
               msg = "修改成功";
            }
            Gson gson = new Gson();
            resp.getWriter().write(gson.toJson(msg));
            resp.getWriter().close();
        }
        public void setState(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
            Integer id = Integer.parseInt(req.getParameter("id"));
            Integer state = Integer.parseInt(req.getParameter("state"));
            String msg = "err";
            if(service.setState(id,state)){
               msg = "ok";
            }
            Gson gson = new Gson();
            resp.getWriter().write(gson.toJson(msg));
            resp.getWriter().close();
        }
    }
    

    7.具体代码(含数据库文件)请看

    展开全文
  • 今天小编就为大家分享一篇layui的布局和表格渲染以及动态生成表格的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui框架table 数据表格的方法级渲染详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui表格数据复选框回显设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇php+layui数据表格实现数据分页渲染代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 该资源主要应用于layui框架下table表格渲染后判断checkbox多选控件是否可用,当然done下还可以做其他逻辑判定,附上源码,绝对可用。
  • 业务逻辑,需要知道上次保存的时候表格在第几页,保存的时候保存页数,回显的时候,表格加载,用id拿到onPage,就是保存过的页码,用页码重载分页插件,暂时就想到这一种方法 var analTable = layui.table.render...

    业务逻辑,需要知道上次保存的时候表格在第几页,保存的时候保存页数,回显的时候,表格加载,用id拿到onPage,就是保存过的页码,用页码重载分页插件,暂时就想到这一种方法

    			var analTable = layui.table.render({
                    id: "analList",
                    elem: '#analList',
                    url: "/report/wasteGasBusiness/getAnalysisList",
                    cols: [[
                        {type: 'radio'},
                        {title: '序号', width: '8%', align: "center", templet: "#indexTable"},
                        {field: 'name', width: '22%', title: '名称', align: "center"},
                        {field: 'industry', width: '20%', title: '行业名称', align: "center"},
                        {field: 'wasteProduction', width: '30%', title: '工艺', align: "center"},
                        {field: 'scale', width: '10%', title: '规模', align: "center"},
                        {fixed: 'right', title: '操作', width: '10%', align: "center", toolbar: '#toolBar'}
                    ]],
                    //要传的参数
                    where:{
                        pollutionStr:pollutionStr,
                        analysisId:analysisId,
                        reportProcessId:reportProcessId,
                        businessAnalysisEntryId:businessAnalysisEntryId,
                    },
                    // post|get
                    method:'post',
                    page: true,
                    even: true,
                    limit: 10,
                    limits: [10],
                    parseData: function (res) { //res 即为原始返回的数据
                        // console.log(res.data)
                        if (res.code === 0) {
                            var data = res.data;
                     
                            // console.log(data)
                            return {
                                "code": res.code, //解析接口状态
                                "count": res.count, //解析数据长度
                                "data": data, //解析数据列表
                                "onPage": res.onPage, // 保存过的页码数,表格加载完之后用这个page重载分页,
                            };
                        }
                    },
                    done: function (res) {
                        that.analysisOnPage = res.onPage?res.onPage:analTable.config.page.curr
                        /**
                         * 重新设置分页插件,当回显的时候,可能选中的不是第一页的数据,需要用存过的page重载分页,
                         * 分页事件的时候就不会带着保存过的id请求
                         * 相当于除了第一次,都用新加载的分页控制表格分页
                         * */
                        var elem = analTable.config.page.elem // layui表格生成的分页的容器
                        layui.laypage.render({
                            elem: elem
                            ,count: res.count
                            ,limits: [10]
                            ,layout: [ 'prev', 'page', 'next', 'skip','count', 'limit']
                            ,curr: that.analysisOnPage
                            ,next: '<i class="layui-icon">&#xe602;</i>'
                            ,prev: '<i class="layui-icon">&#xe603;</i>'
                            ,jump: function(obj,first){
                                if(!first){
                                	// 把表格实例的分页更新
                                    calcuTable.config.page.curr = obj.curr
                                    // 翻页的时候重载表格
                                    layui.table.reload('analList', {
                                        page: {
                                            curr: obj.curr
                                        },
                                        // 重载的时候不带id,就不会拿到onPage,就不会死循环
                                        where: {businessAnalysisEntryId: ''},
                                    });
                                }
                            }
                        });
                    }
                });
    
    展开全文
  • 有没有小伙伴跟我一样在写完后台代码,测试无错误通过,然后写前端代码的时候,layui生成渲染表格的时候,一直渲染不了数据,使用console.log(data)看到后台返回的list数据,但就是渲染不了!!! 后来,仔细看了...

    有没有小伙伴跟我一样在写完后台代码,测试无错误通过,然后写前端代码的时候,layui生成渲染表格的时候,一直渲染不了数据,使用console.log(data)能看到后台返回的list数据,但就是渲染不了!!!
    像这样
    后来,仔细看了layui的开发文档后,其默认的count=0的时候,数据才可以正常渲染,需要修改此默认值可在table.set的response下的statusCode,如下:

    	table.set({
            headers: request.getHeaders()
           ,parseData: function(res) { //res 即为原始返回的数据
                //因为后端没有给传count,前端获取了数据总条数,然后赋值给count
                res.count = res.data.length;
                return {
                    "code": res.resultCode, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            },
            response: {
                statusCode: 205//规定成功的状态码,默认:0
            }
            ,text:{none: '无数据'}
        });
    
    展开全文
  • 问题1:layui如何做到刷新表格 而重新渲染 使用如下方法重新加载表格时会出现页面闪动,...首先你需要结合layui表格插件和layui分页插件 let xxxTable= table.render({ ...... page: { layout: ['prev', 'n...

    问题1:layui如何做到刷新表格 而不重新渲染

    使用如下方法重新加载表格时会出现页面闪动,以及表格位置会重置的问题

    deviceTable.reload()
    

    目前有如下方法可以实现刷新的同时而不重新渲染页面
    首先你需要结合layui表格插件和layui分页插件

    let xxxTable= table.render({
    	......
    	page: {
    		layout: ['prev', 'next', 'page', 'skip', 'count', 'limit', 'refresh']
    	}
    	......
    });
    

    使用上述代码会覆盖你的分页按钮,可自由调整按钮顺序,各参数含义如下
    prev上一页按钮
    next下一页按钮
    page 1,2,3,4 页码按钮
    skip输入页码跳转按钮
    count总数据数量显示
    limit每页显示数据限制选择
    refresh刷新按钮(本文核心)

    由于该刷新按钮只能在页码这一行,如果不满足你的需求,我们可以通过jQuery调用该按钮的点击事件从而达到不渲染刷新的效果,代码如下

    $(".layui-icon-refresh").click();
    

    可在该页面任意地方使用,举个栗子,自动刷新代码如下

    let ref = null;
    $("#toggleRefresh").click(function () {
    	if (ref == null) {
    		ref = setInterval(function () {
    			$(".layui-icon-refresh").click();
    		}, 2000);
    	} else {
    		clearInterval(ref);
    		ref = null;
    	}
    });
    

    上述代码绑定至一个按钮即可实现开关自动刷新功能

    展开全文
  • layui表格渲染的常用操作

    千次阅读 2019-08-13 09:19:46
    layui表格渲染的常用操作
  • Layui表格自动渲染

    千次阅读 2019-06-27 08:24:04
    layui table表格,使用lay-data,进行table表格自动渲染: <table class="layui-table" lay-data="{ height: 500, id:'test', url:'${ctx}/servlet/StaffServlet?type=tabStaff', //请求路径 ...
  • Layui 表格渲染问题

    2021-06-02 20:06:22
    描述:第一次使用Layui,当渲染表格数据时,发现了许多的问题,在这里积累一下。 1. 传参问题: 在where中
  • // , parseData: function(res){ // res.count = res.data.length; // }
  • 今天小编就为大家分享一篇layui问题之渲染数据表格时,仅出现10条数据的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇解决layui 表单元素radio显示渲染的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Layui数据表格渲染&&数据的单表查询 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术:VS、单表查询 作者:#33 撰写时间:撰写时间:2019年04月06日 ~~~~~~~~~~~~~~~~~...
  • layui数据表格渲染

    千次阅读 2019-05-07 21:38:58
    今天第一次使用layui的数据表格,刚开始根本出来数据,然后问了一下我室友(因为我室友前几天使用过并且也成功了),发现他是直接使用的layui数据表格自带的**“url”** 属性实现的数据绑定,然后自己也试了一下这...
  • 这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格。 1、创建一个作用域合适的JS对象数组用来保存数据表格中的原始数据。 2、将上一步创建的JS对象数组也就是原始...
  • Layui表格渲染错位

    千次阅读 2020-05-25 11:15:14
    检查自己是不是多了","。
  • 主要为大家详细介绍了layui实现数据表格点击搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,601
精华内容 1,440
关键字:

layui表格不能渲染