正文

学会用yii2和jQuery打造互动数据表格：轻松实现动态排序与搜索功能

/0 浏览量
0706

在当今的Web开发中，数据表格是一个常见且重要的组件。它能够以清晰、有序的方式展示大量数据。使用Yii2框架和jQuery库，我们可以轻松打造一个具有动态排序和搜索功能的互动数据表格。下面，我将一步步带你完成这个过程。

一、准备工作

在开始之前，请确保你已经安装了以下软件：

  • PHP：版本要求取决于Yii2的版本，通常建议使用PHP 7.2或更高版本。
  • MySQL：用于存储数据表格的数据。
  • Yii2框架：可以从官网下载并安装。
  • jQuery库：可以从官网下载或通过CDN引入。

二、创建数据模型

首先，我们需要创建一个数据模型来表示数据表格中的数据。以下是一个简单的示例：

namespace app\models;

use Yii;

class Product extends \yii\db\ActiveRecord
{
    public static function tableName()
    {
        return 'product';
    }

    public function rules()
    {
        return [
            [['name', 'price'], 'required'],
            [['price'], 'number'],
        ];
    }

    public function attributeLabels()
    {
        return [
            'name' => 'Name',
            'price' => 'Price',
        ];
    }
}

这里，我们创建了一个名为Product的模型，它对应于数据库中的product表。该模型包含两个字段：name和price。

三、创建控制器

接下来，我们需要创建一个控制器来处理数据表格的请求。以下是一个简单的示例：

namespace app\controllers;

use Yii;
use app\models\Product;
use yii\data\ActiveDataProvider;

class ProductController extends \yii\web\Controller
{
    public function actionIndex()
    {
        $dataProvider = new ActiveDataProvider([
            'query' => Product::find(),
        ]);

        return $this->render('index', [
            'dataProvider' => $dataProvider,
        ]);
    }
}

这里，我们创建了一个名为ProductController的控制器，它包含一个index动作，用于返回数据表格的视图。

四、创建视图

现在，我们需要创建一个视图来展示数据表格。以下是一个简单的示例：

<?php

use yii\grid\GridView;
use app\models\Product;

?>
<div class="product-index">
    <h1>Products</h1>

    <?php Pjax::begin(); ?>
        <?php echo GridView::widget([
            'dataProvider' => $dataProvider,
            'columns' => [
                ['class' => 'yii\grid\SerialColumn'],
                'name',
                'price',
                ['class' => 'yii\grid\ActionColumn'],
            ],
        ]); ?>
    <?php Pjax::end(); ?>
</div>

这里，我们使用GridView组件来展示数据表格。columns数组定义了数据表格的列，包括序号、名称、价格和操作列。

五、添加排序和搜索功能

为了实现动态排序和搜索功能，我们需要对上述视图进行一些修改。以下是一个简单的示例：

<?php

use yii\grid\GridView;
use app\models\Product;
use yii\data\Sort;

?>
<div class="product-index">
    <h1>Products</h1>

    <?php Pjax::begin(); ?>
        <?php echo GridView::widget([
            'dataProvider' => $dataProvider,
            'sorter' => [
                'class' => Sort::className(),
                'attributes' => [
                    'name',
                    'price',
                ],
            ],
            'filterModel' => $searchModel,
            'columns' => [
                ['class' => 'yii\grid\SerialColumn'],
                ['attribute' => 'name', 'filter' => Html::activeTextInput($searchModel, 'name')],
                ['attribute' => 'price', 'filter' => Html::activeTextInput($searchModel, 'price')],
                ['class' => 'yii\grid\ActionColumn'],
            ],
        ]); ?>
    <?php Pjax::end(); ?>
</div>

这里，我们添加了sorter和filterModel属性。sorter用于启用排序功能，filterModel用于启用搜索功能。

六、使用jQuery进行前端优化

为了进一步提升用户体验，我们可以使用jQuery来优化数据表格的前端功能。以下是一个简单的示例：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('.grid-view').on('click', '.sort-link', function() {
            var sortUrl = $(this).attr('href');
            $.get(sortUrl, function(data) {
                $('.grid-view').html(data);
            });
            return false;
        });
    });
</script>

这里，我们监听了.sort-link点击事件，并在点击时通过AJAX请求获取排序后的数据，然后将其替换到数据表格中。

七、总结

通过以上步骤，我们成功使用Yii2和jQuery打造了一个具有动态排序和搜索功能的互动数据表格。在实际开发中，你可以根据需求对数据表格进行扩展，例如添加分页、自定义列等。希望本文能对你有所帮助！

-- 展开阅读全文 --