README

使用jquery-treetable插件实现的Yii 2.0树形表格行为。提供了一个类似Gridview的组件。

jquery-treetable - http://ludo.cubicphuse.nl/jquery-treetable/

安装

通过 composer 安装此扩展是首选方式。

运行以下命令之一

$ php composer.phar require agtong/yii2-treetable

或者在您的 composer.json 文件的 require 部分添加

"agtong/yii2-treetable": "*"

。

用法

使用 agtong\treetable\Treetable 组件代替Yii Gridview。以下示例将折叠表格中奇数行下面的所有偶数行。

    <?= Treetable::widget([
        'dataProvider' => $dataProvider,
        'rowOptions' => function($model, $key, $index, $grid) {
            if ($index % 2) {
                return ['data-tt-id' => $index, 'data-tt-parent-id' => $index-1];
            } else {
                return ['data-tt-id' => $index];
            }
        },
        'treetableOptions' => ['expandable' => true, 'indent' => 0], //Pass configuration options to $().treetable()
        // 'useOwnCss' => true, // default is false.
        // eg. add to view -> $this->registerCssFile(Yii::getAlias('@web') . '/css/your_own_treetable.css');
        'columns' => [
            ...
        ]
    ]); ?>

阅读treetable的文档（http://ludo.cubicphuse.nl/jquery-treetable/），了解如何使用 data-tt-id 和 data-tt-parent-id 来确定嵌套。如上所示的 rowOptions 函数可以与您的数据模型配合使用，以实现您想要的嵌套。

技巧

由于与Bootstrap布局严重冲突，不包括treetable的所有CSS。提供了一个CSS示例，用于使用图像样式展开/折叠的 <a>。查看与jquery-treetable一起提供的CSS以获取更多灵感。

agtong / yii2-treetable

维护者

详细信息

README

安装

用法

技巧