README

Yii2 Ajax Box Widget

关于

样式来源于令人赞叹的 AdminLte bootstrap 模板，但由于只使用了其中的一小部分，所以我将其独立出来，所有的设计归功于他们。

https://almsaeedstudio.com/themes/AdminLTE/index2.html

还依赖于http://github.com/rpflorence/jQuery.addObject 插件来管理 jQuery 对象

按钮默认使用 fa 图标，我不会添加依赖，您可以自行安装或制作自己的按钮。例如 https://github.com/rmrevin/yii2-fontawesome

滚动到页面底部查看使用表单数据的重新加载的盒子。

完全支持网格

<?php
use marekpetras\yii2ajaxboxwidget\Box;
?>

<div class="row">
    <div class="col-sm-12 col-md-6"><?=Box::widget(['title'=>'Users','bodyLoad'=>['/admin/user']])?></div>
    <div class="col-sm-12 col-md-6"><?=Box::widget(['title'=>'Log','bodyLoad'=>['/admin/log']])?></div>
    <div class="col-sm-12 col-md-6"><?=Box::widget(['title'=>'Jobs','bodyLoad'=>['/admin/job']])?></div>
    <div class="col-sm-12 col-md-6"><?=Box::widget(['title'=>'Queue','bodyLoad'=>['/admin/queue']])?></div>
</div>

安装

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

运行以下命令之一

php composer.phar require --prefer-dist marekpetras/yii2-ajax-box-widget "^1.0"

或添加以下内容到您的 composer.json 文件的 require 部分中。

"marekpetras/yii2-ajax-box-widget": "^1.0"

用法

两种用法，远程或本地

远程

<?php

echo marekpetras\yii2ajaxboxwidget\Box::widget($options);

?>

本地

<?php

$box = marekpetras\yii2ajaxboxwidget\Box::begin($options);
// write body content here
echo 'Body';
// add some tools
$box->tools();
echo 'Tools';
// add some footer
$box->footer();
echo 'Footer';
$box->end();

?>

可能的选项

<?php

$options = [
    'title' => 'My Box',
    'subtitle' => 'About us',
    'type' => 'info',
    'invisible' => false,
    'bodyLoad' => ['test/my', 'var' => 'value'],

    'toolsTemplate' => '{tools} {reload} {collapse} {remove} {myButton}',
    'toolsButtons' => [
        'myButton' => function() {
            return \yii\helpers\Html::button('my button');
        },
    ],
    'toolsButtonOptions' => [
        'class' => 'myButtons',
    ],
    'autoload' => true,
    'hidden' => false,
    'data' => [
        'postvar1' => 123,
        'postvar2' => 234,
    ],
    'clientOptions' => [
       'autoload' => true, // modify this with the general option not here though
       'onerror' => new \yii\web\JsExpression('function(response, box, xhr) {console.log(response,box,xhr)}'), // loads the error message in the box by default
       'onload' => new \yii\web\JsExpression('function(box, status) { console.log(box,status); }'), // nothing by default
    ],
    'classes' => ['box', 'box-flat', 'box-init'],
    'view' => '@path/to/your/view',
];
?>

Js 使用

$('#boxId').box('reload', data); // reloads content from predefined source with, if you choose so, ammended data - good for filtering etc
$('#boxId').box('source', newSource); // sets new box source
$('#boxId').box('show|hide|toggle'); // show hide toggle using jquery
$('#boxId').box('addOverlay|removeOverlay'); // add/removes overlay indicating load

我通常在控制器中重写 render() 方法来自动检测 Ajax，并正确地加载我想要的任何操作。

<?php

class BaseController extends \yii\base\Controller
{

    /**
     * @inheritdoc
     */
    public function render($view, $params = [])
    {
        if ( Yii::$app->request->getIsAjax() ) {
            Yii::trace('Rendering AJAX');
            return parent::renderAjax($view, $params);
        }
        else {
            return parent::render($view, $params);
        }
    }
}

示例

dashboard.php

<?php

use marekpetras\yii2ajaxboxwidget\Box;
use yii\helpers\Html;

?>


<div class="health-default-index">
    <?php $box = Box::begin(['title'=>'Select clients and date range']); ?>

    <?=Html::beginForm(['report'],'post',['id'=>'healthcheckform','layout'=>'inline']); ?>

    <div class="row">
        <div class="col-sm-5">
            <select>
                <options>
            </select>
        </div>
        <div class="col-sm-5">
            <input type="date" />
        </div>
        <div class="col-sm-2">
        <?=Html::submitButton('Apply',['class'=>'btn btn-primary btn-flat btn-block'])?>
        </div>
    </div>

    <?=Html::endForm()?>

    <?php $box->end()?>

    <div id="report">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <?=Box::widget(['invisible'=>true,'title'=>'Target Cost','bodyLoad'=>['target-vs-actual','metric'=>'Cost'],'autoload'=>false,'hidden'=>true])?>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <?=Box::widget(['invisible'=>true,'title'=>'Target Actions','bodyLoad'=>['target-vs-actual','metric'=>'Actions'],'autoload'=>false,'hidden'=>true])?>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <?=Box::widget(['invisible'=>true,'title'=>'Target CPA','bodyLoad'=>['target-vs-actual','metric'=>'CostPerAction'],'autoload'=>false,'hidden'=>true])?>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 pull-right">
                <?=Box::widget(['title'=>'Highest Spending Search Queries','bodyLoad'=>['highest-spending-search-queries'],'autoload'=>false,'hidden'=>true])?>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 pull-left">
                <?=Box::widget(['title'=>'Network Performance','bodyLoad'=>['network-performance'],'autoload'=>false,'hidden'=>true])?>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 pull-left">
                <?=Box::widget(['title'=>'Device Performance','bodyLoad'=>['device-performance'],'autoload'=>false,'hidden'=>true])?>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <?=Box::widget(['title'=>'Brand % of Spend','bodyLoad'=>['brand-spend'],'autoload'=>false,'hidden'=>true])?>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <?=Box::widget(['title'=>'Match type % of Spend','bodyLoad'=>['match-type-spend'],'autoload'=>false,'hidden'=>true])?>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <?=Box::widget(['title'=>'Lost Impression Share','bodyLoad'=>['lost-impression-share'],'autoload'=>false,'hidden'=>true])?>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <?=Box::widget(['title'=>'Average Quality Score','bodyLoad'=>['average-quality-score'],'autoload'=>false,'hidden'=>true])?>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <?=Box::widget(['title'=>'Expected CTR <small>drillthrough to most contributing campaigns</small>','bodyLoad'=>['expected-ctr'],'autoload'=>false,'hidden'=>true])?>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <?=Box::widget(['title'=>'Ad Relevance <small>drillthrough to most contributing campaigns</small>','bodyLoad'=>['ad-relevance'],'autoload'=>false,'hidden'=>true])?>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <?=Box::widget(['title'=>'Landing Pages Experience <small>drillthrough to most contributing campaigns</small>','bodyLoad'=>['landing-pages-experience'],'autoload'=>false,'hidden'=>true])?>
            </div>
        </div>
    </div>

<?php $this->registerJs("
    $('#healthcheckform').submit(function(e){
        e.preventDefault();
        var data = $(this).serialize(); // this will be loaded via post on submit
        $('#report .box-init').each(function(){
            $(this).box('reload',data).box('show');
        });
    });
");?>