zertex/yii2-gridstackjs

Yii2 的 Gridstack.js 小部件

维护者

详细信息

github.com/zertex/yii2-gridstackjs

源代码

问题

安装次数: 81

依赖者: 1

建议者: 0

安全性: 0

星星: 0

关注者: 1

分支: 0

公开问题: 0

类型：yii2-extension

1.0.2 2018-05-15 10:47 UTC

Requires

MIT b5e30748cc79b5f06c3bfa0247ddd1b8001b883d

  • Zertex <info.woop@zertex.ru>

jquerypluginextensionresponsivegridyii2drag-and-dropmulti-columngridstackgridstack.js

This package is not auto-updated.

Last update: 2024-09-29 04:03:33 UTC

README

在 Yii2 中集成 Gridstack.js

安装

建议通过 composer 进行安装。

在控制台中输入

php composer.phar require --prefer-dist zertex/yii2-gridstackjs "*"

或添加到 composer.json 中

"zertex/yii2-gridstackjs": "*"

使用方法

像使用其他 Yii2 小部件一样使用 Gridstack.js。

use zertex\gridstack\Gridstack;
<?php
$gridstack = Gridstack::begin([
    'options'=>['class'=>'grid-stack'],
    'clientOptions'=>[
        'cellHeight'=> 80,
        'verticalMargin'=> 10,
    ],
]);?>

<?=$gridstack->beginWidget(['class'=>'grid-stack-item','data-gs-width'=>"4",'data-gs-height'=>"2",'data-gs-x'=>"0",'data-gs-y'=>"0",]);?>
    <div class="grid-stack-item-content"></div>
<?=$gridstack->endWidget();?>

<?=$gridstack->beginWidget(['class'=>'grid-stack-item','data-gs-width'=>"4",'data-gs-height'=>"4",'data-gs-x'=>"4",'data-gs-y'=>"0",]);?>
    <div class="grid-stack-item-content"></div>
<?=$gridstack->endWidget();?>

<?php
Gridstack::end();
?>

要在 JavaScript 中使用 Gridstack.js，请将 GridstackAsset 添加到视图中。

public $depends = [
...
'zertex\gridstack\GridstackAsset',
...
];