在ajaxupdate之后,gridview里面的css没有显示

时间:2014-06-14 11:22:37

标签: ajax css3 yii cgridview

gridview内我有一个基于CSS的内联图。一切都工作正常,直到我过滤一些东西,gridview得到更新。然后css不再在网格内注册了。有谁知道解决方案?说实话,我甚至不知道在这种情况下该尝试什么。 css不是我的优点之一。


这是ajaxupdate之前的元素:

this is the element before ajaxupdate


这是在ajax更新之后

enter image description here

.stat-block .stat-graph {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #D7D7D7;
border-radius: 3px;
margin-right: 10px;
padding: 10px 10px 8px;
text-align: center;
width: auto;

}

据我所知,第一次生成网格时css生成一个类似的画布标签

<canvas style="display: inline-block; width: 29px; height: 20px; vertical-align: top;" width="29" height="20"></canvas>

但是在ajax更新和gridview的刷新之后,标签不再出现了。

我试图将图形数据放在canvas标签中,但没有成功。

这是gridview代码:

this->widget('zii.widgets.grid.CGridView', array(
'id' => 'cartuse-grid',
'dataProvider' => $model->search(),
'filter' => $model,
'afterAjaxUpdate' => 'reinstallDatePicker',
'columns' => array(
    array(
        'id' => 'autoId',
        'class' => 'CCheckBoxColumn',
        'selectableRows' => '50',
    ),
    //  'id',
    array(
        'name'=>'client',
        'type'=>'raw',
        'value'=>'client($data->client)',
        'htmlOptions' => array(
            'align'=>'center',
            //'width'=>'35%'
        )

这是客户端功能:

       function client($client)   {     

...

return '<div class="stat-block" id="graph">
            <ul>
                <li class="stat-graph inlinebar" id="activitate-lunara">
                '.$data.'
                </li>
                <li class="stat-count">
                    <span>'.$data['0'].'
                    </span>       
                </li> 
                <li class="stat-percent">
                    <span class="text-info stat-percent">'.$target.'</span>
                </li>               
            </ul>
        </div>';
}

编辑1: 如答案1中所述,我使用removeClass()addClass()函数在ajax更新后刷新css。没有任何问题,画布标签仍然不会出现。

我尝试使用replaceWith()并只是插入画布标签,但它会制动过滤。

这里是重新安装DatePicker函数

<?php Yii::app()->clientScript->registerScript('re-install-date-picker', "
function reinstallDatePicker(id, data) {
   $('#datepicker_min').datepicker({ dateFormat: 'yy-mm-dd',
                                      showOtherMonths: true,
                                      selectOtherMonths: true,
                                      changeYear: true,
                                      changeMonth: true,
                                      });
   $('#datepicker_max').datepicker({ dateFormat: 'yy-mm-dd',
                                      showOtherMonths: true,
                                      selectOtherMonths: true,
                                      changeYear: true,
                                      changeMonth: true,
                                      });
   $( \"#activitate-lunara\" ).removeClass( \"stat-graph inlinebar\" );
   $( \"#graph\" ).removeClass( \"stat-block\" );
   $( \"#graph\" ).addClass( \"stat-block\" );
   $( \"#activitate-lunara\" ).addClass( \"stat-graph inlinebar\" );

}"); ?>

编辑2:

我没有使用renderPartial作为列内容。只是一个返回我想要的内容的函数。在筋疲力尽之后,我移动到了渲染部分,并且在部分视图和removeclass / addclass中使用了renderpartial +注册脚本/ css,现在一切正常。

2 个答案:

答案 0 :(得分:1)

我有时也会遇到这个问题。

首先:如果您正在使用部分视图,请在局部视图中包含CSS。

如果没有,您可能必须在每次ajax更新后重新应用该样式。

我看到您正在使用"afterAjaxUpdate"=>"reinstallDatePicker",因此解决问题的一种方法是将CSS添加到该函数内的.stat-block .stat-graph。您可以使用jquery函数,例如css()addClass()和许多其他函数。

但重要的是你在每次ajax更新后设置你的元素样式。由于在每次ajax更新后调用函数reinstallDatePicker,您只需向此函数添加一些代码即可执行您想要的操作(即重新设置元素样式)。

答案 1 :(得分:0)

我已经尝试了所有我能想到的但没有成功的事情。我可以让它工作的唯一方法是将我的过滤器数据存储在我的会话中,然后afterajaxupdate强制重新加载。 (不是真的推荐,因为如果你的查询没有得到优化,我猜它可能会减慢你的页面速度)

我只是在这里张贴这个以防其他人有这个问题,并希望在别人找到正确的解决方案之前让它工作

所以现在在我的控制器中我有这个

public function actionAdmin()
{
    $model=new Cartuse('search');
    $model->unsetAttributes();  // clear any default values
    if(isset($_GET['Cartuse']))
                $_SESSION['filterData'][$this->id][$this->action->id] = $_GET['Cartuse'];
                $model->attributes=$_SESSION['filterData'][$this->id][$this->action->id];
    if (isset($_GET['pageSize'])) {
        Yii::app()->user->setState('pageSize',(int)$_GET['pageSize']);
        unset($_GET['pageSize']);
    }
    $this->render('admin',array(
        'model'=>$model,
    ));
}

并在我的gridview中

$this->widget('zii.widgets.grid.CGridView', array(
    'id' => 'cartuse-grid',
    'dataProvider' => $model->search(),
    'filter' => $model,
    'afterAjaxUpdate' => 'reinstallDatePicker',
    'columns' => array(/*
            .....
        )
));

和重新安装datepicker(出于某种原因,如果我将location.reload()直接放在afterajaxupdate字段中,我的datepickers将不会注册(甚至不是第一次)并且过滤停止工作。所以我把它放在了reinalldatepicker函数中到目前为止没有问题。

<?php Yii::app()->clientScript->registerScript('re-install-date-picker', "
    function reinstallDatePicker(id, data) {
            location.reload();
       $('#datepicker_min').datepicker({ dateFormat: 'yy-mm-dd',
                                          showOtherMonths: true,
                                          selectOtherMonths: true,
                                          changeYear: true,
                                          changeMonth: true,
                                          });
       $('#datepicker_max').datepicker({ dateFormat: 'yy-mm-dd',
                                          showOtherMonths: true,
                                          selectOtherMonths: true,
                                          changeYear: true,
                                          changeMonth: true,
                                          });
       $.datepicker.setDefaults($.datepicker.regional['ro']);
     }
");

这不是一个真正的解决方案,它只是一个廉价的解决方案,所以如果有人有解决方案我会等待它。