[Yii2 Widget]FancytreeWidget树状结构

1.树状结构页面显示效果如下图:

2.应用了插件FancytreeWidget (composer中安装wbraganca/yii2-fancytree-widget)

<?php
use yii\helpers\ArrayHelper;
use yii\helpers\Url;
use yii\helpers\Html;
use yii\web\JsExpression;
echo \wbraganca\fancytree\FancytreeWidget::widget([
        'options' =>[
            'id' => 'table-fancytree', // 设置整体id
            'source' => $data, // 树状结构数据
            'extensions' => ['edit', 'table'], // 扩展, 可有: edit编辑, dnd拖拽等js效果
            'edit' => [ // 编辑js
                'inputCss' => ['minWidth' => '8em'],
                'triggerStart' => ["f2", "dblclick", "shift+click", "mac+enter"], // 进入编辑模式方法: f2键,双击,shift+单机,enter
                'beforeEdit' => new JsExpression('function(event, data){
                }'),
                'edit' => new JsExpression('function(event, data){
                }'),
                'beforeClose' => new JsExpression('function(event, data){
                }'),
                'save' => new JsExpression('function(event, data){
                }'),
                'close' => new JsExpression('function(event, data){ // 写jq代码 已实例化JsExpression方式
                    // event是指当前执行方法, data是指当前编辑行对象
                    var th = data.node;
                        node = $("#table-fancytree").fancytree("getActiveNode"); // 获取 'class=fancytree-active'中所有对象
                        oldName = data.orgTitle; // 修改之前名字
                        newName = data.node.title; // 要修改的名字
                        child = th.data.child ? 1 : 0;
                        id = node.key;
                    if (oldName == newName || !newName) {
                        return false;
                    }
                    update(id, newName, oldName, child, th); // 引入js文件后可直接调用方法
                }'),
            ],
            // 点击查找子集节点 注意: 要触发lazyLoad 在$data数组中要设置'lazy' => true
            // lazyLoad方法中必须要有 data.result, 其值为一个对象, 对象中有一个请求url后面跟请求参数, 该url返回jesn串(其实就是发送一个ajax, 例如: [{"title":"\u5317\u4eac\u5e02","key":"2","folder":true,"expanded":false,"lazy":true}])
            'lazyLoad' => new JsExpression('function(event, data){
                var id = data.node.key;
                    url = "' . Url::toRoute(["district/get-san"], true) . '";
                data.result = {url: "" + url + "?id=" + id + ""};
            }'),
            'table' => [
                'indentation' => 20,
                'nodeColumnIdx' => 0
            ],
            // 渲染列
            'renderColumns' => new JsExpression('function(event, data) {
                var node = data.node;
                var $tdList = $(node.tr).find(">td");
                $tdList.eq(1).text(node.key);
                var btnEdit = \'\';
                var btnRemove = \'<a href="' . Url::to(['YOUR_URL/delete']) . '&id=\' + node.key + \'" title="Delete" data-confirm="Are you sure you want to delete this item?" data-method="post" data-pjax="0"><span class="glyphicon glyphicon-trash"></span></a>\'; // 一些编辑类按钮
                $tdList.eq(1).html(btnEdit + "&nbsp;" + btnRemove).addClass("align-center align-middle");
            }'),
        ]
    ]);
?>

<div class="table-responsive">
    <table id="table-fancytree" class="table table-bordered">
        <colgroup>
            <col width="*"></col>
            <col width="80px"></col>
        </colgroup>
        <thead>
          <tr>
                <th>区域</th>
                <th class="align-center align-middle">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>
<?php
// 引入js文件
$this->registerJsFile("@web/js/district.js", [
    'depends' => [\service\assets\AppAsset::className()]
]);
?>

进行一下资源补充：
Yii2 Fancytree Widget
https://github.com/wbraganca/yii2-fancytree-widget
Fancytree Demo
http://wwwendt.de/tech/fancytree/demo/