README

... 是 Nette 框架的 DataGrid。

演示: https://kesspess.cz/twigrid/
演示源代码: https://github.com/uestla/twigrid-demo

它是基于由 @hrach 编写的另一个（并且很棒）的 datagrid，- https://github.com/nextras/datagrid。我的 datagrid 非常受这个组件及其编程思想的启发，因此我想向这个人给予最大的赞誉和尊重 :-)

快速入门

让我们看看创建我们的第一个 datagrid 需要走多少步。

1. 创建新项目

   composer create-project nette/web-project twigrid-quickstart

2. 安装 TwiGrid 及客户端资源

   cd twigrid-quickstart
   composer require uestla/twigrid
   yarn add twigrid-datagrid --modules-folder www/vendor

   如果您不使用 yarn，您可以通过查看 package.json 手动安装资源，并查看所需依赖项。

   然后我们将更新 app/Presenters/templates/@layout.latte 以加载下载的资源

   <!-- app/Presenters/templates/@layout.latte -->
   
   <link rel="stylesheet" href="{$basePath}/vendor/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="{$basePath}/vendor/twigrid-datagrid/assets/twigrid.datagrid.css">
   <!-- ... -->
   <script src="{$basePath}/vendor/jquery/dist/jquery.min.js"></script>
   <script src="{$basePath}/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
   <script src="{$basePath}/vendor/nette-forms/src/assets/netteForms.min.js"></script>
   <script src="{$basePath}/vendor/nette.ajax.js/nette.ajax.js"></script>
   <script src="{$basePath}/vendor/twigrid-datagrid/assets/twigrid.datagrid.js"></script>

3. 数据库

   从演示应用程序下载 SQLite3 文件，并将其放置在 app/Model/users.s3db 中。

   然后我们将配置此数据库以供应用程序使用

   # config/local.neon
   database:
   	dsn: 'sqlite:%appDir%/Model/users.s3db'

4. 创建 datagrid

   现在是我们终于创建第一个 datagrid 的时候了 - 让我们创建一个 app/Grids/UsersGrid.php 文件。我们需要数据库连接来加载数据，所以我们通过构造函数正确地注入它。

   // app/Grids/UsersGrid.php
   
   final class UsersGrid extends TwiGrid\DataGrid
   {
   	private $database;
   
   	public function __construct(Nette\Database\Explorer $database)
   	{
   		parent::__construct();
   
   		$this->database = $database;
   	}
   
   	protected function build(): void
   	{
   		// TODO
   	}
   }

   我们将在 build() 方法中定义 datagrid 的主体。虽然表 user 有很多列，但为了简单起见，我们只在我们的网格中使用其中的一些。

   // app/Grids/UsersGrid.php
   
   final class UsersGrid extends TwiGrid\DataGrid
   {
   	// ...
   
   	protected function build(): void
   	{
   		$this->addColumn('firstname', 'Firstname');
   		$this->addColumn('surname', 'Surname');
   		$this->addColumn('streetaddress', 'Street address');
   		$this->addColumn('city', 'City');
   		$this->addColumn('country_code', 'Country');
   	}
   }

   TwiGrid 还需要知道它应该将哪些列视为主键

   $this->setPrimaryKey('id');

   最后，我们将告诉 TwiGrid 如何加载数据

   $this->setDataLoader(function () {
   	return $this->database->table('user');
   });

5. 为了正确地将我们的网格注入到演示者中，我们需要创建一个工厂接口

   // app/Grids/UsersGridFactory.php
   
   interface UsersGridFactory
   {
   	public function create(): UsersGrid;
   }

   该接口现在将用于自动生成工厂，这很方便 - 我们只需将此定义添加到 config/common.neon

   services:
   	- implement: UsersGridFactory

6. 完成所有这些后，现在我们可以简单地将网格工厂注入到 HomepagePresenter 中。

   // app/Presenters/HomepagePresenter.php
   
   class HomepagePresenter extends BasePresenter
   {
   	/** @var \UsersGridFactory @inject */
   	public $usersGridFactory;
   }

   现在我们将添加控制工厂本身

   // app/Presenters/HomepagePresenter.php
   
   protected function createComponentUsersGrid(): \UsersGrid
   {
   	return $this->usersGridFactory->create();
   }

7. 我们几乎完成了！只需打开 app/Presenters/templates/Homepage/default.latte，删除全部内容，并替换为

   {block content}
   	{control usersGrid}
   {/block}

   就这样，各位！

   现在当您打开页面时，您可能会看到类似这样的内容

   

8. 最终改进

   也许显示国家代码并不那么性感 - 我们希望在 "Country" 列中显示整个国家名称。为了实现这一点，我们将创建自定义网格模板

   {* app/Grids/UsersGrid.latte *}
   
   {extends $defaultTemplate}
   
   {define body-cell-country_code}
   	<td>{$record->country->title}</td>
   {/define}

   然后告诉 TwiGrid 使用此模板

   // app/Grids/UsersGrid.php::build()
   
   $this->setTemplateFile(__DIR__ . '/UsersGrid.latte');

   就这么简单！

更多

要查看更多示例，请访问 演示页面。享受！