/***
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.csdn.net/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>