eltable刷新整个表格方法_layui表格渲染的常用操作

原文地址：

layui表格渲染的常用操作​www.limuke.top

1、在进行表格渲染的时候返回给前台的数据是一个list集合，这个集合中存储的是对象A，而对象A有一个属性是对象B，所以在进行表格渲染的时候要采用下面的方式

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: '博主', templet: '<div>{{d.examUserInfo.nickname}}</div>',width:80}

examUserInfo 对象B, d.examUserInfo.nickname 出去对象的昵称，其中d.必须加上。

2、表格中渲染图片

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

3、根据查询出来的不同值表格显示内容不同

例如：有一个是否删除字段，数据库中存储的是1或0，1未删除，0已经删除，这时候layui前台表格进行数据渲染的时候可以根据这个值让表格显示该条数据已删除或者未删除，操作如下：

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: '是否删除', width:88}
    ]], done: function (res, curr, count) {
        $("[]").children().each(function () {
            if($(this).text() == '1') {
                $(this).text("未删除")
            }else if($(this).text() == '0'){
                $(this).text("已删除")
            }

        });
    }
});

4、根据查询出来的不同值不同，表格每行最右侧显示不同的按钮。

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

5、layui中open打开一个子界面，操作完成后关闭子界面同时刷新父界面。

一、方法1

【1】打开子界面

layer.open({
    type: 2,
    title: '标题',
    shadeClose: true,
    shade: 0.8,
    area: ['60%', '80%'],
    content: 'url',
    end: function () { //执行结束后刷新父界面
    location.reload();
}
});

【2】关闭子界面

​​​​​​​var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

上面的方法会出现只要子界面关闭就会刷新父界面。不太友好。

二、方法2

【1】打开子界面

layer.open({
    type: 2,
    title: '标题',
    shadeClose: true,
    shade: 0.8,
    area: ['60%', '80%'],
    content: 'url',
});

【2】关闭子界面

var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
window.parent.location.reload();//刷新父界面