PHP中treeTable重载刷新数据 ajax.reload()方法失效解决方案

问题原因 #

• 初始化treeTable时直接使用PHP输出的静态$data_json作为数据源，未配置DataTables的ajax异步数据源，原生ajax.reload()方法仅对配置了ajax数据源的DataTables实例生效，无对应配置时调用不会触发数据拉取动作。
• treeTable是基于DataTables二次封装的树形表格组件，直接调用底层DataTables的API不会触发树形父子节点的层级重绘，即使数据更新也可能出现折叠失效、缩进错乱的问题。

可行方案 #

方案1：配置ajax数据源，调用组件原生reload方法 #

修改初始化逻辑，将静态data配置替换为ajax数据源接口，重载时直接调用treeTable实例自带的reload方法，组件会自动拉取最新数据并重绘树形结构：

$(document).ready(function() {
    // 初始化时配置ajax数据源，替换为你项目中返回树形表格数据的PHP接口地址
    const treeTableIns = $('#tablejson').treeTable({
        "ajax": {
            "url": "/module/get_tree_data",
            "type": "GET",
            "dataType": "json"
        },
        "collapsed": true,
        "responsive": true,
        "lengthChange": true,
        "autoWidth": false,
        "fnDrawCallback": function() {
            $('[data-toggle="tooltip"]').tooltip();
        },
        "aLengthMenu": [
            [10, 50, 100, -1],
            [10, 50, 100, "All"]
        ],
        "iDisplayLength": 10,
        "columns": [
            {"data": "nama_module"},
            {"data": "controller"},
            {"data": "function"},
            {"data": "nm_group"},
            {"data": "label"},
            {"data": "btn"}
        ],
        "order": []
    });

    // 刷新按钮绑定事件
    $('#btn-reload').click(function() {
        // 调用组件自带reload方法，不要调用底层dataTable的ajax.reload
        treeTableIns.reload();
    });

    // 表单新增/编辑保存成功的回调里，直接调用treeTableIns.reload()即可完成刷新
});

方案2：保留静态渲染逻辑，销毁后重建实例 #

如果需要保留PHP首屏输出静态数据的逻辑，可以封装重载方法，刷新时先销毁旧实例，拉取最新数据后重新初始化treeTable：

// 封装通用重载方法
function refreshTreeTable() {
    // 销毁已存在的表格实例
    if ($.fn.DataTable.isDataTable('#tablejson')) {
        $('#tablejson').dataTable().fnDestroy();
        $('#tablejson').empty();
    }
    // 请求最新数据
    $.getJSON('/module/get_latest_data', function (latestData) {
        // 重新初始化组件
        $('#tablejson').treeTable({
            "data": latestData,
            "collapsed": true,
            "responsive": true,
            "lengthChange": true,
            "autoWidth": false,
            "fnDrawCallback": function() {
                $('[data-toggle="tooltip"]').tooltip();
            },
            "aLengthMenu": [
                [10, 50, 100, -1],
                [10, 50, 100, "All"]
            ],
            "iDisplayLength": 10,
            "columns": [
                {"data": "nama_module"},
                {"data": "controller"},
                {"data": "function"},
                {"data": "nm_group"},
                {"data": "label"},
                {"data": "btn"}
            ],
            "order": []
        });
    })
}

// 绑定刷新按钮事件
$('#btn-reload').click(function() {
    refreshTreeTable();
});

注意：禁止直接对treeTable实例调用底层DataTables的ajax.reload()方法，该方法不会重新计算树形节点的层级关系，会导致组件交互功能异常。

内容的提问来源于stack exchange，提问作者Rio Bayu Sentosa