记一次layui框架treetable表格渲染

使用php和layui开发一个后台
html 页面

<div class="demoTable" style="margin-left: 1%;">
        请输入名称：
        <div class="layui-inline">
            <input name="name" class="layui-input" id="name" >
        </div>
        <button class="layui-btn" data-type="reload" id="search">搜索</button>
    <span class="site-demo-button" id="layerDemo">
        <button class="layui-btn" onclick="add1()">添加</button>
      </span>
</div>
<table id="table1" class="layui-table" lay-filter="table1"></table>
<!-- 操作列-->
<script type="text/html" id="oper-col">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs delete-btn"  lay-event="del">删除</a>
</script>

主要数据表格渲染和数据修改 删除

<script>
    layui.use('table',function () {
        var table = layui.table;
    layui.config({
        base: ''
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['layer', 'table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        // var layer = layui.layer;
        // var treetable = layui.treetable;

        // 渲染表格
        var renderTable = function () {
            layer.load(2);
            table.render({
                // treeColIndex: 1
                 height: 400
                ,page: true //开启分页
                ,elem: '#table1',
                url: '{:url("brands")}',
                cols: [[
                    {type: 'numbers'},
                    // {field: 'id', title: 'ID'},
                    {field: 'brand_name', title: '名称'},
                    {field: 'parent', title: '一级'},
                    {field: 'child', title: '二级'},
                    {templet: '#oper-col', title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };

        renderTable();

        $('#btn-expand').click(function () {
            treetable.expandAll('#table1');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#table1');
        });

        $('#btn-refresh').click(function () {
            renderTable();
        });

        // 监听工具条
        table.on('tool(table1)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url:"{:url('branddel')}",
                        data:{
                            id:data.id
                        },
                        method:'get',
                        success:function(res){
                            console.log(res);
                            layer.msg("删除成功")
                            window.location.reload()
                            // if(res.code == 0){
                            //     obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            //     layer.close(index);
                            // }
                        }
                    })

                    //向服务端发送删除指令
                });

                // layer.msg('删除' + data.id);
            } else if (layEvent === 'edit') {
                var data_info = "?id=" + data.id;
                 // console.log(data_info);
                layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 2
                    ,title: false //不显示标题栏
                    ,closeBtn: false
                    ,area: ['40%', '60%']
                    ,shade: 0.8
                    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,btn: ['提交', '返回']
                    ,btnAlign: 'c'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content: 'do_brandedit'+data_info
                    ,success:function(layero,index){
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').click(function(){
                            var body = layer.getChildFrame('body', index);
                            var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                            var zh = body.find('#zh').val();
                            var sel = body.find('#sel').val();
                            var sel1 = body.find('#sel1').val();
                            var id = body.find('#id').val();
                            console.log(zh);
                            console.log(sel);
                            var ret = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
                            $.ajax({
                                type:"post",
                                url:"{:url('do_brandedit')}",
                                async:true,
                                data:{
                                    type:"do_edit",
                                    zh:zh,
                                    child_id:sel,
                                    parent_id:sel1,
                                    id:id,
                                },
                                dataType:"text",
                                success:function(data){
                                    console.log(data)
                                    alert("修改成功");
                                    window.location.reload()
                                }
                            });
                        });
                    }
                });
            }
        });

    });
        $('#search').on('click', function () {
            // 搜索条件
            // var title=$("#title").val();
            var name=$("#name").val();
            console.log(name);
            // var tel=$("#tel").val();
            table.reload('table1', {
                url:"{:url('brands')}",
                method: 'post'
                , where: {
                    'brand_name':name,
                }
                , page: {
                    curr: 1
                }
            });
            return false;
        });

    })


</script>

增加数据

<script>
    //选择角色弹层
    function add1(){
        layer.open({
            //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
            type: 2
            ,title: "添加" //不显示标题栏
            ,closeBtn: false
            ,area: ['40%', '60%']
            ,shade: 0.8
            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,btn: ['提交', '返回']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,content: 'brandedit'
            ,success:function(layero,index){
                var btn = layero.find('.layui-layer-btn');
                btn.find('.layui-layer-btn0').click(function(){
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    var zh = body.find('#zh').val();
                    var sel = body.find('#sel').val();
                    var sel1 = body.find('#sel1').val();
                    console.log(zh);
                    console.log(sel);
                    console.log(sel1);
                    var ret = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
                    $.ajax({
                        type:"post",
                        url:"{:url('brandedit')}",
                        async:true,
                        data:{
                            type:"brandedit",
                            zh:zh,
                            sel:sel,
                            sel1:sel1,
                        },
                        dataType:"text",
                        success:function(data){
                            console.log(data)
                            alert("添加成功");
                            window.location.reload()
                        }
                    });
                });
            }
        });
    }
</script>