如何省心省力的创建一个数据表格呢?用layui的数据表格模块就可以。

页面: 在页面放置一个元素 <table id="demo"></table>,然后通过 table.render() 方法指定该容器


<!-- 列表界面 -->
<div id="data-list">
    <!-- table容器 -->
	<table id="demo" lay-filter="test"></table>
</div>
<!-- end列表界面 -->

<script src="${ctx}/res/js/lib/layui/layui.all.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    //,height: 312
    ,cellMinWidth:100
    ,url: '${ctx}/trptwork/rxpageList' //数据接口
    ,parseData: function(res){ //res 即为原始返回的数据
      //debugger
      return {
         "code": res.success, //解析接口状态
         "msg": res.message, //解析提示文本
         "count": res.data.totalElements, //解析数据长度
         "data": res.data.content //解析数据列表
        };
    }
    ,toolbar: 'true' 
    //,defaultToolbar: ['filter', 'print', 'exports']
    ,title:"绕线报工数据"
    ,request: {
      pageName: 'pageCurrent' //页码的参数名称,默认:page
      ,limitName: 'limit' //每页数据量的参数名,默认:limit
     }
    ,totalRow:"true"
    ,response: {
        statusName: 'code' //规定数据状态的字段名称,默认:code
        ,statusCode: '1' //规定成功的状态码,默认:0
        //,msgName: 'hint' //规定状态信息的字段名称,默认:msg
        ,countName: 'count' //规定数据总数的字段名称,默认:count
        //,dataName: 'rows' //规定数据列表的字段名称,默认:data
    } 
    ,page: {limit:20,limits:[10, 20, 30, 40, 50]/* ,theme: '#c00' */} //开启分页
    ,cols: [[ //表头
       // {  width:40, type:'checkbox'} ,
       {id:"rxbgId", title: '序号', width:100, type:'numbers'}
       ,{field: 'zyy', title: '作业员', width:100}
       ,{field: 'orderNum', title: '订单号', width:180}
       ,{field: 'bc', title: '班次', width:100} 
       ,{field: 'llsl', title: '领料数量', width: 120}
       ,{field: 'bgsl', title: '报工数量', width: 120, sort: true,totalRow:'true',totalRowText:'合计:'}
       // ,{field: 'tlsl', title: '退料数量', width: 120, sort: true}
       ,{field: 'equNum', title: '设备号', width: 100}
       ,{field: 'fqcsyy', title: 'FQC实验员', width: 100}
       ,{field: 'scsbry', title: '生产设备人员', width: 120}
       ,{field: 'dcsry', title: '电参数人员', width: 100}
       ,{field: 'gky', title: '管库员', width: 100}
       ,{field: 'updateTime', title: '创建时间', width: 180,sort: true}
       ,{field: 'remark', title: '备注', width: 200}
      ]] 
    });
});
</script>

后台:java提供数据接口

    @RequestMapping("rxpageList")
    @ResponseBody
    public ResultEntity rxpageList(@RequestParam(value = "pageCurrent", defaultValue = "1") String pageCurrent,@RequestParam(value = "limit", defaultValue = "10") String limit,@RequestParam(value = "type", defaultValue = "all") String type){
        ResultEntity res=new ResultEntity();
        RxReportwork rxrpt=new RxReportwork();
        try {
            Page<RxReportwork> page = rxrptservice.getPageList(Integer.parseInt(pageCurrent), Integer.parseInt(limit), "createTime",rxrpt);
            if (page.getTotalPages() > 0) {
                res.setData(page);
                res.setMessage(GET_SUCCESS);
                res.setSuccess(SUCCESS);
            } else {
                res.setMessage(IS_NULL);
                res.setSuccess(NULL);
            }
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
            res.setMessage(GET_ERROR + ":" + e.getMessage());
            res.setSuccess(ERROR);
        }
        return res;
    }

效果

最后修改于 2019-02-15 17:05:42
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付
上一篇