[Yii2 Widget]FancytreeWidget树状结构

来源：互联网发布：胡克霍根身体数据编辑：程序博客网时间：2024/05/16 13:40

1.树状结构页面显示效果如下图:
这里写图片描述

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

<?phpuse 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/

阅读全文

0 0