tigrov/yii2-kendoui

Yii 2 的 Kendo UI 扩展

安装: 524

依赖者: 0

建议者: 0

安全: 0

星标: 10

关注者: 5

分支: 6

公开问题: 1

类型:yii2-extension

1.0.1 2019-12-27 07:47 UTC

This package is auto-updated.

Last update: 2024-09-27 18:22:05 UTC


README

目前实现了基于 ActiveRecord 模型基础的 DataSource。

可用于

  • Kendo Grid
  • Kendo List
  • 需要 DataSource 的其他功能

安装

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

运行以下命令之一:

php composer.phar require --prefer-dist tigrov/yii2-kendoui

或添加

"tigrov/yii2-kendoui": "~1.0"

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

由于现在正在开发 yii2-kendoui 2.0,请确保您在 composer.json 中有版本约束,不允许在更新时自动安装,这样当下一个重大版本的 yii2-kendoui 发布时,您的项目不会自行崩溃。例如,不包括 2.0 的版本约束是 ~1.0,确保在 composer.json 中没有 >= 或 *。

要尝试 yii2-kendoui 的新版本,添加

"tigrov/yii2-kendoui": "2.x-dev"

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

更多信息请参阅 Tigrov/yii2-kendoui/tree/2

如何使用?

@app/controllers/AddressController.php

use \tigrov\kendoui\KendoBuild;

class AddressController extends Controller
{
    public function actionIndex()
    {
        return $this->render('index');
    }

    public static function kendoActions()
    {
        // Address extends of ActiveRecord
        $options = [
            'model' => Address::className(),
            'query' => [
                'where' => ['status_id' => Address::STATUS_ACTIVE],
            ],
        ];

        return KendoBuild::actions($options);
    }

    public function actions()
    {
        return array_merge(parent::actions(), static::kendoActions());
    }
}

@app/views/address/index.php

<?php
use yii\helpers\Url;
use yii\helpers\Html;
use \tigrov\kendoui\DataSource;
use \tigrov\kendoui\widgets\KendoShortForm;
use \tigrov\kendoui\assets\KendoAsset;

$this->setTitle(\Yii::t('user', 'Addresses'));

KendoAsset::register($this);

$dataSource = \Yii::createObject([
    'class' => DataSource::className(),
]);
$dataSourceSettings = $dataSource->getSettings();
$dataSourceJson = json_encode($dataSourceSettings);

$this->registerJs(<<<AddressListJS
$(function () {
    var dataSourceSettings = $dataSourceJson;
    dataSourceSettings.error = function(e){console.log(e.errors)}
    var dataSource = new kendo.data.DataSource(dataSourceSettings);

    var addressList = $("#addressList").kendoListView({
        dataSource: dataSource,
        template: kendo.template($("#addresTemplate").html()),
        editTemplate: kendo.template($("#addressEditTemplate").html())
    }).data("kendoListView");

    $(".k-add-button").click(function(e) {
        addressList.add();
        e.preventDefault();
    });
});
AddressListJS
    , $this::POS_END);
?>

<p><a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span><?= \Yii::t('pro', 'Add new Address'); ?></a></p>
<div id="addressList"></div>

<script type="text/x-kendo-template" id="addresTemplate">
    <div class="address">
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
            <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
        </div>
        <p>#=first_name# #=last_name#</p>
        <p>#=company#</p>
        <p>#=address#</p>
        <p>#=city#, #=postal_code#</p>
    </div>
</script>

<script type="text/x-kendo-tmpl" id="addressEditTemplate">
    <div class="address-form">
        <?php $form = KendoShortForm::begin(['dataSource' => $dataSource]); ?>
            <?= $form->kendoField('first_name'); ?>
            <?= $form->kendoField('last_name'); ?>
            <?= $form->kendoField('company'); ?>
            <?= $form->kendoField('address'); ?>
            <?= $form->kendoField('city'); ?>
            <?= $form->kendoField('postal_code'); ?>

            <div class="k-edit-buttons k-state-default">
                <a class="k-button k-button-icontext k-update-button k-primary" href="\\#"><span class="k-icon k-update"></span><?= \Yii::t('pro', 'Save'); ?></a>
                <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span><?= \Yii::t('pro', 'Cancel'); ?></a>
            </div>
        <?php KendoShortForm::end(); ?>
    </div>
</script>