yii_wiki_204_using-cjuidialog-to-edit-rows-in-a-cgridview（通过CJuiDialog在CGridView中修改行数据）

最新推荐文章于 2022-11-11 05:02:54 发布

翻译最新推荐文章于 2022-11-11 05:02:54 发布 · 975 阅读

[Yii]--[wiki] 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何利用CJuiDialog实现在CGridView中快速编辑行的功能。通过设置Column的hyperlink属性和定义JavaScript函数，可以弹出一个用于编辑特定行的对话框，并在保存更改后刷新CGridView。

/***
Using CJuiDialog to edit rows in a CGridView  

http://www.yiiframework.com/wiki/204/using-cjuidialog-to-edit-rows-in-a-cgridview

translated by php攻城师

http://blog.youkuaiyun.com/phpgcs

Scenario
Solution
Column hyperlink
Javascript function

**/

/***
背景		Scenario
***/ 

我这里有一个 一系列的 clients/events 所属的 CGridView ， 对每一行 （eventClient）， 我想要实现快速的编辑 eventClient对话框。

我的方法基于 这篇wiki http://www.yiiframework.com/wiki/145/cjuidialog-for-create-new-model/

/***

解决方法  Solution 

***/

首先基于 wiki 145 做了所有工作后， 再来 修改我们 的CGridView:

Column hyperlink 

对每一列 ， 在js 函数中设置 _updateComment_url 属性 为需要的 url。

array(
    'name'=>'comment',
    'header'=>'Comments',
    'type'=>'raw',
    'value'=>'CHtml::link(
        ($data["comment"]?$data["comment"]:"(comment)"),
        "",
        array(
            \'style\'=>\'cursor: pointer; text-decoration: underline;\',
            \'onclick\'=>\'{
                updateComment._updateComment_url="\'.
                    Yii::app()->createUrl(
                        "eventClient/updateComment",
                        array("id"=>$data["id"])
                    )
                .\'";
                updateComment();
                $("#dialogComment").dialog("open");}\'
            )
        );',
),


Javascript function 

在同一个页面我们将 调用这个 动作的 updateComment() 方法包含进来。 

<script type="text/javascript">
 
function updateComment()
{
    // public property
    var _updateComment_url;
 
    <?php echo CHtml::ajax(array(
        'url'=>'js:updateComment._updateComment_url',
        'data'=> "js:$(this).serialize()",
        'type'=>'post',
        'dataType'=>'json',
        'success'=>"function(data)
            {
                if (data.status == 'failure')
                {
                    $('#dialogComment div.divComment').html(data.div);
                    // Here is the trick: on submit-> once again this function!
                    $('#dialogComment div.divComment form').submit(updateComment);
                }
                else
                {
                    $('#dialogComment div.divComment').html(data.div);
                    setTimeout(\"$('#dialogComment').dialog('close') \",2000);
 
                    // Refresh the grid with the update
                    $.fn.yiiGridView.update('event-client-grid');
                }
 
        } ",
    ))?>;
    return false;
 
}
 
</script>