项目实训——数据表格

layui数据表格

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

方法	机制
方法渲染	用JS方法的配置完成渲染
自动渲染	HTML配置，自动渲染
转换静态表格	转化一段已有的表格元素

在这我使用了方法渲染。

方法渲染

“方法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个选择器。

<table id="demo" lay-filter="test"></table>

var table = layui.table; //执行渲染
table.render({
  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
  ,height: 315 //容器高度
  ,cols: [{}] //设置表头
    //,…… //更多参数参考右侧目录：基本参数选项
});

工具栏

点击头部工具栏区域设定了属性为 lay-event="" 的元素时触发。

原始容器
<table id="demo" lay-filter="test"></table>
工具栏模板：
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>    
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>    
    <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>  
    </div>
</script> 
<script;>
//JS 调用：
table.render({
  elem: '#demo'
  ,toolbar: '#toolbarDemo'
  //,…… 
  //其他参数
  });

我的收藏页面

前面铺垫了那么多都是为了实现收藏页面，这个页面的功能包括数据的展示、取消收藏等。取消收藏则需要使用之前的工具栏功能，而通过点击数据行进入具体页面则需要实现行监听功能。
容器：

<div class="infolist">
    <table class="layui-hide" id="job" lay-filter="job"></table>
    <form>
        <input type="hidden" id = "jid" name="jid">
    </form>
</div>

执行数据表格的实例：

<script type="text/javascript" th:inline="none">
    layui.use('table', function(){
        var table = layui.table;
        layui.use('layer', function() {
            var layer = layui.layer;
            table.render({
                elem: '#job'
                , url: 'getlist'
                , toolbar: '#jtoolbar'
                , cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'job_ID', width: 80, title: 'ID', sort: true}
                    , {field: 'title', width: 150, title: '名称'}
                    , {field: 'company_name', width: 100, title: '公司'}
                    , {field: 'cities', width: 100, title: '城市',}
                    , {field: 'keywords', width: 200, title: '关键词'}
                    , {field: 'ddl', width: 150, title: '截止日期', sort: true}
                    , {field: 'contactLine', title: '联系方式'}
                ]]
                , page: true
                , limit: 10   //默认十条数据一页
                , limits: [10, 20, 30, 50]  //数据分页条
                ,skin:"line"//新增
                ,even:true//新增
                ,done:function () {//新增
                    $(".layui-table-box").css("border-width","0px");
                    $(".layui-table-header tr").css("height","46px");
                    $(".layui-table-header tr").css("background-color","white");
                    $(".layui-table-header tr span").css({"color":"#fd6686","font-size":"16px"});
                }
            });
            //工具栏
            table.on('toolbar(job)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    var idlist = [];
                    for (i = 0;i<data.length;i++){
                        var id = data[0].job_ID;
                        idlist.push(id.toString());
                    }
                    console.log(idlist);
                    $.ajax({//给后台传数据
                        url:"/unliked",
                        dataType:"json",
                        data:{"job_ID":idlist},
                        success:function (json) {
                            if(json.code==0){
                                layer.alert("成功取消收藏");
                                console.log(json.msg);
                                window.location.reload();//刷新页面，测试的时候可以先把这行注释掉
                            }
                            else {
                                layer.alert("失败！")
                            }
                        }
                    });
                    break;
            }
        });
        //监听行单击事件（双击事件为：rowDouble）
        table.on('row(job)', function(obj){
            var data = obj.data;
            var data = data.job_ID;
            console.log(data);
            window.open("jobdetails?jobid="+data);
        });
    });
});
</script>

后台传数据：

@RequestMapping("/getlist")
@ResponseBody
public String getlist(@RequestParam Map<String,Object> param ,HttpServletRequest request){
    JSONObject jobc = null;
    int page = Integer.parseInt((String)param.get("page"));
    int limit = Integer.parseInt((String) param.get("limit"));

    List<Job> joblist = new ArrayList<Job>();
    for(int i = 0;i<10;i++) {
        Job job = new Job();
        job.setJob_ID((long)11);
        job.setTitle("数据分析员");
        job.setCompany_name("随便");
        job.setCities("济南");
        job.setKeywords("python");
        job.setDdl(new Date());
        job.setContactline("12356789224");
        Job job1 = new Job();
        job1.setJob_ID((long)112);
        job1.setTitle("数据分析员");
        job1.setCompany_name("随便");
        job1.setCities("深圳");
        job1.setKeywords("python");
        job1.setDdl(new Date());
        joblist.add(job);
        joblist.add(job1);
    }
    jobc = new JSONObject();
    int size = joblist.size();
    if (page * limit <= size) {
        joblist = joblist.subList((page - 1) * limit, page * limit);
    } else {
        joblist = joblist.subList((page - 1) * limit, size);
    }
    jobc.put("code", 0);
    jobc.put("count",size);
    jobc.put("data",joblist);
    return jobc.toString();
}

一开始在往后台传数据的时候我犯了一个错误：

Job job = new Job();
job.setJob_ID((long)11);
job.setTitle("数据分析员");
job.setCompany_name("随便");
job.setCities("济南");
job.setKeywords("python");
job.setDdl(new Date());
job.setContactline("12356789224");
Job job1 = new Job();
job1.setJob_ID((long)112);
job1.setTitle("数据分析员");
job1.setCompany_name("随便");
job1.setCities("深圳");
job1.setKeywords("python");
job1.setDdl(new Date());
 for(int i = 0;i<10;i++) {
        joblist.add(job);
        joblist.add(job1);
    }

如代码所见，我new了两个Job对象，然后利用循环反复把这两个对象往joblist里加。结果前端呈现出来的只有前两条数据能完全显示出来，后面都是空；然而条数又是没错的。这个错可把当时的我难倒了。

显然前端是没有问题的，错误只能是在后端出现了。我试图在浏览器中通过调试来找出问题所在，在network找到获取数据的请求，点开正文一看：

唉，非常笨的错误，恐怕只有新手才会犯，希望自己以后别再这样犯傻了。