Common operation of layui table rendering

1. The data returned to the front desk during table rendering is a list set, which stores object A, and object A has an attribute of object B, so the following method should be used when table rendering.

layui.use(['form', 'element', 'util', 'carousel', 'form', 'laypage', 'layer','table'], function () {
        var element = layui.element;
        var util = layui.util;
        var carousel = layui.carousel;
        var form = layui.form;
        var laypage = layui.laypage
            , layer = layui.layer;
        var table = layui.table;
        table.render({
            elem: '#test'
            , url:
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
                , groups: 3
                , limits: [20, 50, 100]
                , limit: 20
            }, cols: [[
                {field: 'examUserInfo', title: '', templet: '<div>{{d.examUserInfo.nickname}}</div>',width:80}
                ,{field: 'examUserInfo', title: '', templet: '<div><img src="{{d.examUserInfo.img}}"></div>',width:80}

            ]]
        });
 });
{field: 'examUserInfo', title: 'Blogger', templet: '<div>{{d.examUserInfo.nickname}}</div>',width:80}

ExmUserInfo object B, d.examUserInfo.nickname goes out of the object's nickname, where d. must be added.

2. Rendering pictures in tables

{field:'examUserInfo', title:'avatar', templet:'<div> <img src= {{d.examUserInfo.img} > </div> width:80}

3. The contents of tables with different values are different according to the query.

For example, if there is a deleted field, the data stored in the database is 1 or 0, 1 has not been deleted, 0 has been deleted, when layui front table for data rendering, the table can show that the data has been deleted or not deleted according to this value, the operation is as follows:

table.render({
    elem: '#test'
    , url: 
    , page: {
        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
        , groups: 3
        , limits: [20, 50, 100]
        , limit: 20
    }, cols: [[
        , {field: 'delflag', title: 'Delete', width:88}
    ]], done: function (res, curr, count) {
        $("[]").children().each(function () {
            if($(this).text() == '1') {
                $(this).text("Undeleted")
            }else if($(this).text() == '0'){
                $(this).text("Deleted")
            }

        });
    }
});

4. According to the different values queried, different buttons are displayed on the right-most side of each row of the table.

<script type="text/html" id="barDemo">
    {{# if(d.delflag==1){ }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">delete</a>
    {{# } }}
    {{# if(d.delflag==0){ }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="rec">recovery</a>
    {{# } }}
</script>

 

Tags: Attribute Database

Posted on Tue, 08 Oct 2019 23:35:11 -0700 by priya_amb