dbfernandes/yii2-widget-datatables

为Yii2框架的数据表格小部件

v1.3 2015-06-08 16:07 UTC

This package is auto-updated.

Last update: 2024-09-20 03:14:04 UTC


README

此扩展为Yii2框架提供了DataTables集成。最初由fedemotta提出。

安装

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

安装Composer后,您可以使用以下命令安装扩展

composer global require "fxp/composer-asset-plugin:~1.0.0"
composer require --prefer-dist dbfernandes/yii2-widget-datatables "*"

第一个命令安装了composer asset plugin,该插件允许通过Composer管理bower和npm包依赖。您只需要运行此命令一次。第二个命令安装datatables小部件。

您也可以将以下内容添加到(而不是第二个命令)

"dbfernandes/yii2-widget-datatables": "*"

到您的composer.json文件的require部分。

使用方法

像使用其他Yii2小部件一样使用DataTables。

use dbfernandes\datatables\DataTables;
<?php
    $searchModel = new ModelSearch();
    $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
?>
<?= DataTables::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],

        //columns

        ['class' => 'yii\grid\ActionColumn'],
    ],
]);?>

此扩展使用Bootstrap集成插件来默认提供Yii2样式。

TableTools插件也可用。在客户端选项数组中指定DOM和tableTools设置,如下例所示。

...
'clientOptions' => [
    "lengthMenu"=> [[20,-1], [20,Yii::t('app',"All")]],
    "info"=>false,
    "responsive"=>true,
    "dom"=> 'lfTrtip',
    "tableTools"=>[
        "aButtons"=> [  
            [
            "sExtends"=> "copy",
            "sButtonText"=> Yii::t('app',"Copy to clipboard")
            ],[
            "sExtends"=> "csv",
            "sButtonText"=> Yii::t('app',"Save to CSV")
            ],[
            "sExtends"=> "xls",
            "oSelectorOpts"=> ["page"=> 'current']
            ],[
            "sExtends"=> "pdf",
            "sButtonText"=> Yii::t('app',"Save to PDF")
            ],[
            "sExtends"=> "print",
            "sButtonText"=> Yii::t('app',"Print")
            ],
        ]
    ]
],
...

您还可以在应用程序的JavaScript层中使用DataTables。要实现这一点,您需要将DataTables作为Asset文件的依赖项。在这种情况下,您可以使用yii\grid\GridView或使用datatables选项retrieve => true以避免错误。在两种情况下,所有选项都必须在JavaScript对象中。

public $depends = [
...
'dbfernandes\datatables\DataTablesAsset',
...
];