layui的使用

老师测试需要套用前端界面，所以学习使用了layui

使用layui师十分简单，在layui官网下载layui然后将layui文件夹放到CSS文件夹下，即可使用。

具体的各种组件的使用可以查看layui官网的文档示例。

这里重点介绍一下<<table>>组件如何接受数据。

        <table class="layui-table" id="idTest" lay-data="{width: 1300, height:690, url:'/GWLZTest_war/ArticleDataServlet',where:{action:'findSendArticle'}, page:false, id:'idTest'}" lay-filter="demo">
            <thead>
            <tr>
                <th lay-data="{field:'a_id', width:100, sort: true, fixed: true}">ID</th>
                <th lay-data="{field:'a_title', width:180}">题目</th>
                <th lay-data="{field:'a_key', width:180}">关键词</th>
                <th lay-data="{field:'a_time', width:160,sort: true}">时间</th>
                <th lay-data="{field:'a_man', width:160}">作者</th>
                <th lay-data="{field:'a_main_text', width:350}">摘要</th>
                <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
            </tr>
            </thead>
        </table>
        <script type="text/html" id="barDemo">
            <%--            <a class="layui-btn layui-btn-primary 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>--%>
        </script>

如上述代码，table中lay-data中的url就是请求数据的地址。where中就是要传递的参数。

数据返回要返回指定的json格式

1. {
2. "code": 0,
3. "msg": "",
4. "count": 1000,
5. "data": [{}, {}]
6. }

 

如果格式不一致需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式

1. table.render({
2. elem: '#demp'
3. ,url: ''
4. ,parseData: function(res){ //res 即为原始返回的数据
5. return {
6. "code": res.status, //解析接口状态
7. "msg": res.message, //解析提示文本
8. "count": res.total, //解析数据长度
9. "data": res.data.item //解析数据列表
10. };
11. }
12. //,…… //其他参数
13. });