ajax - ajaxupdate 后 gridview 中的 css 不显示

Question

在 gridview 中，我有一个基于 css 的内联图。一切正常，直到我过滤了一些东西并且 gridview 得到更新。然后 css 不再在网格内注册。有人知道解决方案吗？老实说，我什至不知道在这种情况下该尝试什么。 css 不是我的强项之一。

---

这是 ajaxupdate 之前的元素:

---

这是ajax更新后的

.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 标签

<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 的函数。什么都没发生， Canvas 标签仍然不会出现。

我尝试使用 replaceWith()并以这种方式插入 Canvas 标签，但它会阻止过滤。

这里是 reinstallDatePicker 函数

<?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 作为列内容。只是一个返回我想要的内容的函数。在用尽所有可能的想法后，我移动到 renderpartial 并使用 renderpartial + 在 partialview 和 removeclass/addclass 中注册脚本/css 现在一切正常。

Answer 1

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

第一件事:如果您使用的是分部 View ，请在分部 View 中也包含 CSS。

否则，您可能必须在每次 ajax 更新后重新应用样式。

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

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