table模块/数据表格

来源：互联网发布：dot js 是什么编辑：程序博客网时间：2024/06/02 06:00

简单实现了数据加载

table模块用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。

相关文档：http://www.layui.com/doc/modules/table.html

其实这个插件用起来很方便，功能也是相当的强大。
查看文档接口返回的数据格式：

默认接受的数据格式{  code: 0,  msg: "",  count: 1000,  data: []}

所以我们只要返回相关的数据就可以了。
jsp主要引入相关的文件：

<link href="layui/css/layui.css" type="text/css" /><script src="layui/layui.js" type="text/javascript"></script>

相关js代码：

<body>    <div align="center" style="width:750px;height: 400px;">        <table id="user" lay-filter="test"></table>    </div>    <script type="text/javascript">        layui.use('table', function() {            var table = layui.table;            //第一个实例            table.render({                   elem: '#user',                   loading:true,                    skin: 'line', //行边框风格                                         even : true,//开启隔行背景                    size : 'sm',//小尺寸的表格                    url : '<%=basePath%>user/page.do',                limit : 10,                limits : [ 10, 20, 30 ],                page : { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档                    layout : [  'prev', 'page', 'next', 'skip','limit' ],  //自定义分页布局                    groups : 5//只显示 1 个连续页码                 },                cols : [ [ //表头                {                    field : 'id',                    title : 'ID',                    width : 200,                    sort : true,                    //fixed : 'left'                }, {                    field : 'userName',                    title : '用户名',                    width : 80                }, {                    field : 'sex',                    title : '性别',                    width : 80,                    sort : true                }, {                    field : 'idCard',                    title : '身份证',                    width : 240                }, {                    fixed : 'right',                    title : '操作',                    width : 200,                    align : 'center',                    toolbar : '#barDemo'                } ] ]            });                //监听工具条        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"          var data = obj.data; //获得当前行数据          var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）          var tr = obj.tr; //获得当前行 tr 的DOM对象          if(layEvent === 'detail'){ //查看            layer.msg('ID：'+ data.id + ' 的查看操作');          } else if(layEvent === 'del'){ //删除            layer.confirm('真的删除行么', function(index){              obj.del(); //删除对应行（tr）的DOM结构，并更新缓存              layer.close(index);              //向服务端发送删除指令            });          } else if(layEvent === 'edit'){ //编辑            //do something            layer.alert('编辑行：<br>'+ JSON.stringify(data));            //同步更新缓存对应的值            obj.update({              username: '123'              ,title: 'xxx'            });          }        });         });    </script><script type="text/html" id="barDemo">  <a class="layui-btn  layui-btn-xs" lay-event="detail">查看</a>  <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>  <!-- 这里同样支持 laytpl 语法，如： -->  {{#  if(d.auth > 2){ }}    <a class="layui-btn layui-btn-mini" lay-event="check">审核</a>  {{#  } }}</script></body>

后台相关代码：
Controller:

    @RequestMapping("/user")    public String user() {        return "list";    }    @RequestMapping("/page")    @ResponseBody    public Result getPage(int page, int limit) {        int total = userService.getCount();        List<User> userList = userService.getPageList(page, limit);        Result result = new Result();        result.setCode(0);        result.setMsg("成功");        result.setCount(total);        result.setData(userList);        return result;    }

User实体类：

public class User implements Serializable {    private static final long serialVersionUID = -3929922389417785653L;    private String id;    private String userName;    private String password;    private String idCard;    private String sex;    public User() {    }    public User(String id, String userName, String password, String idCard,            String sex) {        super();        this.id = id;        this.userName = userName;        this.password = password;        this.idCard = idCard;        this.sex = sex;    }    public String getId() {        return id;    }    public void setId(String id) {        this.id = id;    }    public String getUserName() {        return userName;    }    public void setUserName(String userName) {        this.userName = userName;    }    public String getPassword() {        return password;    }    public void setPassword(String password) {        this.password = password;    }    public String getIdCard() {        return idCard;    }    public void setIdCard(String idCard) {        this.idCard = idCard;    }    public String getSex() {        return sex;    }    public void setSex(String sex) {        this.sex = sex;    }    @Override    public String toString() {        return "User [id=" + id + ", userName=" + userName + ", password="                + password + ", idCard=" + idCard + ", sex=" + sex + "]";    }}

返回结果封装类：
Result:

public class Result implements Serializable {    private static final long serialVersionUID = -7397549799489046511L;    // 数据状态的字段名称    private int code;    // 状态信息的字段名称    private String msg;    // 数据总数的字段名称    private int count;    // 数据列表的字段名称    private List<?> Data;    public int getCode() {        return code;    }    public void setCode(int code) {        this.code = code;    }    public String getMsg() {        return msg;    }    public void setMsg(String msg) {        this.msg = msg;    }    public int getCount() {        return count;    }    public void setCount(int count) {        this.count = count;    }    public List<?> getData() {        return Data;    }    public void setData(List<?> data) {        Data = data;    }}

主要的代码都贴上了，下面是显示效果图：
这里写图片描述

这里写图片描述

阅读全文

0 0