Layui---數據表格---方法渲染和重載

最近做了一個小項目，需要使用數據表格，看到Layui中的數據表格十分美觀、功能齊全，便在前端使用Layui來展示數據表格，後端使用SpringMVC來進行數據的接收和傳遞。

數據表格的方法渲染

Html代碼

<div>
   <input type="text" id="companys" style="width: 200px;height: 29px" class="input-style"
                   placeholder="搜索公司名稱" autocomplete="off">
   <button class="layui-btn layui-btn-sm" οnclick="searchCompany()">搜索</button>
</div>

<table id="demo"></table>

Layui的表格使用十分簡單，Html中只需要這麼一行代碼就可以，主要實現還是在JS中。

使用Layui的數據表格，自然需要導入Layui的js文件。我使用的是layui.all.js，而不是layui.js，因爲我圖簡單，懶得去找與數據表格相關的js文件了。

<script src="${pageContext.request.contextPath}/js/layui.all.js" charset="utf-8"></script>
<script>
    let tableIns;
    layui.use('table', function () {
        let table = layui.table;
        tableIns = table.render({
            elem: '#demo',
            width:1190,
            height:550,
            page: true,
            url: '/meetinglicense/webController/getInfo',
            cols: [[{field: 'id', width: 90, align: 'center', sort: true, fixed: true, title: '編號'},
                {field: 'sourceInfo', align: 'center', title: '源密文'},
                {field: 'encryptInfo', align: 'center', title: '加密密文'},
                {field: 'startDate', width: 180, align: 'center', title: '授權日期'},
                {field: 'endDate', sort: true, width: 180, align: 'center', title: '到期日期'},
                {field: 'company', align: 'center', title: '所屬公司'},
                {field: 'types', width: 90, align: 'center', title: '授權類型'}
            ]],
            done:function (res, curr, count) {
                let data = res.data;
                let systemDate = new Date();
                let nowTime = systemDate.getFullYear() + "-" +((systemDate.getMonth()+1)<10?("0"+(systemDate.getMonth()+1)):(systemDate.getMonth()+1))+ "-" +systemDate.getDate() + " " +systemDate.getHours()+ ":" +(systemDate.getMinutes()<10?("0"+systemDate.getMinutes()):systemDate.getMinutes())+ ":" +systemDate.getSeconds();
                let index = -1;
                $("[data-field='endDate']").children().each(function () {
                    index++;
                    let endTime = data[index].endDate;
                    if(endTime <= nowTime){
                        var tr = $(".layui-table").find("tbody tr[data-index='" + index + "']");
                        tr.css("background-color", "#FFC299");
                    }
                })
            }
        });
    });


<%--數據表格的重載，重載公司信息--%>
    function searchCompany() {
        var content = $("#companys").val().trim();
        if (!content) {
            reloadAll(tableIns);
        } else {
            tableIns.reload({
                url: '/meetinglicense/webController/selectByCompany',
                where: {
                    content: content
                },
                page: {
                    curr: 1
                }
            })
        }
    }
<%--數據表格的重載，重載所有信息--%>
    function reloadAll(a) {
        a.reload({
            url: '/meetinglicense/webController/getInfo',
            page: {
                curr: 1
            }
        })
    }
</script>

table.render()是表格的渲染方法，主要屬性Layui的官網裏都有，就不贅述了，想了解的直接去官網即可。

done:function()此方法爲數據渲染後的回調，我在此處做的操作是：到期日期小於等於系統當前日期，這一行的數據背景顏色就會改變，當然你也可以進行其他操作。參數res的具體格式就是下面的ResultMap，所以我可以通過res.data來獲取當前頁的所有數據。

如果你重載需要傳輸額外的內容到後端，就將其放到where{}中即可，SpringMVC使用@RequestParam註解來接收

這是Layui官網給出的方法說明：

table.render({ //其它參數在此省略
  done: function(res, curr, count){
    //如果是異步請求數據方式，res即爲你接口返回的信息。
    //如果是直接賦值的方式，res即爲：{data: [], count: 99} data爲當前頁數據、count爲數據總長度
    console.log(res);
    
    //得到當前頁碼
    console.log(curr); 
    
    //得到數據總量
    console.log(count);
  }
});

在上述代碼中我定義了倆個表格的重載方法，表格的重載需要用到表格的實例，所以我使用tableIns在表格進行渲染時獲取表格的實例。當然，Layui的官網也給出了表格重載的示例，有興趣可以去看一看。

下面是後端代碼

@Controller
@RequestMapping("/webController")
public class WebController {

    /**
     * 獲取全部數據，分頁查詢
     * @param page
     * @param limit
     * @return
     */
    @RequestMapping("/getInfo")
    public @ResponseBody ResultMap getInfo(@RequestParam("page")int page,@RequestParam("limit")int limit){
        //這是調用Service層，然後Service層調用Dao查詢數據
        List<License> allInfo = iDataBaseService.findAllInfo(page,limit);
        //返回ResultMap，需要符合Json格式；iDataBaseService.querySum()爲查詢的總條數
        return new ResultMap(0,"",iDataBaseService.querySum(),allInfo);
    }

    /**
     * 按公司名稱查詢
     * @param content
     * @return
     */
    @RequestMapping("/selectByCompany")
    public @ResponseBody ResultMap selectByCompany(@RequestParam("content")String content,@RequestParam("page")int page,@RequestParam("limit")int limit) {
        List<License> resultList = iDataBaseService.findByCompany(content,page,limit);
        //iDataBaseService.getCompanyNum(content)爲符合查詢條件的總條數
        return new ResultMap(0,"",iDataBaseService.getCompanyNum(content),resultList);
    }
}

/**
 * 返回到前端的結果集
 */
public class ResultMap {

    private int code;
    private String msg;
    private int count;
    private List<License> data;
}

/**
 * 實體類，授權信息
 */
public class License implements Serializable {

    private int id;
    //源信息
    private String sourceInfo;
    //加密信息
    private String encryptInfo;
    //開始時間戳
    private long startTimestamp;
    //結束時間戳
    private long endTimestamp;
    //總時間戳，檢驗信息
    private long sumTimestamp;
    //授權時長
    private String duration;
    //授權開始日期
    private String startDate;
    //授權到期日期
    private String endDate;
    //授權歸屬公司
    private String company;
    //授權類型
    private String types;
}

ResultMap和License我就只貼了屬性這部分，剩下的是GetterSetter、構造函數和toString方法，這些就不貼了，你自己生成就行。

後端可以使用@RequestParam註解來接收前端的數據，Layui會默認傳倆個數據page、limit，這倆個參數是分頁需要用到的。然後返回給前端的數據是需要符合Layui給出的JSON格式，如下：

{
  "code": 0,
  "msg": "",
  "count": 1000,
  "data": [{}, {}]
} 

至此，Layui數據表格的方法渲染和重載就完成了。