Motivation:
The data in my database is constantly changing because my database stores device status information such as the up time of a device or the temperature of a device. I need CGridView to refresh continuously. In addition to device status, the database stores device configurations and user settings. The database allows for any number of users to access any number of devices concurrently.
User Guide:
Replace CGridView with CLiveGridView in view files as desired.
Implementation:
I have extended CGridView and called it CLiveGridView. I have created 2 new files to implement CLiveGridView: CLiveGridView.php and jquery.yiilivegridview.js. The update interval is specified in ms (1000 ms = 1 second).
This is the first time I have posted code, comments are requested and welcomed. I am new to web development. Is there are better way to override the yiiGridView.update() function instead of copy, paste, and modify? Only two lines of code were changed in the yiiGridView.update() function; the line that starts with "$filtered=$d.filter…" and the line that follows it.
Deploy:
.../yii/framework/zii/widgets/grid/CLiveGridView.php
<?php
/**
* CLiveGridView class file based on CGridView class file by Qiang Xue
*
*/
Yii::import('zii.widgets.grid.CGridView');
/**
* CLiveGridView continuously refreshes the visible data items in the body of the CGridView table
*
**/
class CLiveGridView extends CGridView
{
public function registerClientScript()
{
parent::registerClientScript();
$id=$this->getId();
$cs=Yii::app()->getClientScript();
$cs->registerScriptFile($this->baseScriptUrl.'/jquery.yiilivegridview.js');
$cs->registerScript(__CLASS__.'# '.$id,"jQuery('# $id').yiiLiveGridView();");
$cs->registerScript(__CLASS__.'# '.$id.'-live',
"
setInterval(function(){;$.fn.yiiLiveGridView.update('status-grid', {});},1000);
"
);
}
}
.../yii/framework/zii/widgets/assets/gridview/jquery.yiilivegridview.js
;(function($) {
$.fn.yiiLiveGridView = function(options) {
return $.fn.yiiGridView(options);
};
$.fn.yiiLiveGridView.update = function(id, options) {
var settings = $.fn.yiiGridView.settings[id];
options = $.extend({
type: 'GET',
url: $.fn.yiiGridView.getUrl(id),
success: function(data,status) {
$.each(settings.ajaxUpdate, function(i,v) {
var id='# '+v,
$d=$(data)
$filtered=$d.filter(id+' .'+settings.tableClass+' > tbody');
$(id+' .'+settings.tableClass+' > tbody').replaceWith( $filtered.size() ? $filtered : $d.find(id+' .'+settings.tableClass+' > tbody'));
});
if(settings.afterAjaxUpdate != undefined)
settings.afterAjaxUpdate(id, data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('# '+id).removeClass(settings.loadingClass);
alert(XMLHttpRequest.responseText);
}
}, options || {});
if(options.data!=undefined && options.type=='GET') {
options.url = $.param.querystring(options.url, options.data);
options.data = {};
}
options.url = $.param.querystring(options.url, settings.ajaxVar+'='+id)
if(settings.beforeAjaxUpdate != undefined)
settings.beforeAjaxUpdate(id);
$.ajax(options);
};
})(jQuery);