README

Kendo UI 是一个优秀的 JavaScript 库。它提供开源和商业版本。

此库为所有 Kendo UI 小部件提供封装。Telerik 本身提供 PHP 封装，但这些封装过于复杂，并且它们是付费的。我们的库采用 MIT 许可证发布，因此您可以自由地在任何项目中使用它（甚至商业项目），只要保留版权头信息。

安装

使用 composer require riesenia/kendo 安装最新版本

或将它添加到您的 composer.json 文件中作为需求

{
    "require": {
        "riesenia/kendo": "~3.0"
    }
}

注意：如果您使用 PHP 5.4 - 5.6，请使用此库的 1.* 版本。

使用方法

可以通过调用 Kendo 类的 create 方法创建任何小部件。例如，创建一个选择器为 "#grid" 的网格（结果为 $("#grid").kendoGrid({ ... })），可以通过调用以下方法实现：

use Riesenia\Kendo\Kendo; 

echo Kendo::create('Grid')->bindTo('#grid');

或通过

use Riesenia\Kendo\Kendo; 

echo Kendo::createGrid('#grid');

设置属性

可以通过调用 set 方法设置任何属性。对于表示为数组（或对象）的属性，可以使用 add 方法。也可以通过传递数组作为唯一参数进行批量赋值。要传递未编码的数据，请通过 Kendo::js() 调用包装它们。所有方法调用都可以链式调用。示例

use Riesenia\Kendo\Kendo; 

$grid = Kendo::createGrid('#grid');

// set any property
$grid->setHeight(100);

// set property, that should not be encoded
$grid->setChange(Kendo::js('function(e) {
    console.log(this.select());
}'));

// set properties by array
$grid->set([
    'height' => 100,
    'change' => Kendo::js('function(e) {
        console.log(this.select());
    }')
]);

// add to property
$grid->addColumns(null, 'Name')
    ->addColumns(null, ['field' => 'Surname', 'encoded' => false]);

// pass DataSource object
$grid->setDataSource(Kendo::createDataSource());

复杂示例

如 此示例 一样创建网格的代码

use Riesenia\Kendo\Kendo; 

$model = Kendo::createModel()
    ->addField('ProductName', ['type' => 'string'])
    ->addField('UnitPrice', ['type' => 'number'])
    ->addField('UnitsInStock', ['type' => 'number'])
    ->addField('Discontinued', ['type' => 'boolean']);

$dataSource = Kendo::createDataSource()
    ->setData(Kendo::js('products'))
    ->setSchema(['model' => $model])
    ->setPageSize(20);

echo Kendo::createGrid('#grid')
    ->setDataSource($dataSource)
    ->setHeight(550)
    ->setScrollable(true)
    ->setSortable(true)
    ->setFilterable(true)
    ->setPageable(['input' => true, 'numeric' => false])
    ->setColumns([
        'ProductName',
        ['field' => 'UnitPrice', 'title' => 'Unit Price', 'format' => '{0:c}', 'width' => '130px'],
        ['field' => 'UnitsInStock', 'title' => 'Units In Stock', 'width' => '130px'],
        ['field' => 'Discontinued', 'width' => '130px']
    ]);

可观察的（MVVM）

对于 Kendo 可观察的 渲染略有不同。预定义变量名为 viewModel，但可以通过 variableName 方法重写。示例

use Riesenia\Kendo\Kendo; 

echo Kendo::createObservable('#view')
    ->variableName('myMvvm')
    ->setFirstName('John')
    ->setLastName('Doe')
    ->setDisplayGreeting(Kendo::js('function() {
        alert("Hello, " + this.get("firstName") + " " + this.get("lastName") + "!!!");
    }'));

这将输出

myMvvm = kendo.observable({
    "firstName": "John",
    "lastName": "Doe",
    "displayGreeting": function () {
        alert("Hello, " + this.get("firstName") + " " + this.get("lastName") + "!!!");
    }
});
kendo.bind($("#view"), myMvvm);