TbJsonGridView bootstrap.widgets.TbJsonGridView

处理大量记录时,Yii的标准类型Ajax请求非常缓慢, 因为当码农们没采用renderPartial 渲染view层时,他的ajax响应返回了整个页面。 即使使用,响应仍然把HTML源码全返回了


TbJsonGridView在html5浏览器下使用本地存储(非html5浏览器采用内存缓存)来缓存结果并避免重复ajax请求, 使用 jqote2 javascript末班引擎渲染JSON对象


Name Type Default Description
json boolean null Will be set to true if its an AJAX request. The grid will respond automatically with a JSON object when that occurs.
cacheTTL integer 1 The number of seconds, minutes of hours we keep server responses on cache.
cacheTTLType string s The type of cache duration s (seconds), m (minutes) or h (hours)
localCache boolean true Whether to use local cache or not.

JSON specific columns

In order to work with TbJsonGridView, there are certain classes to be used with this special component. Without them, the grid won't work as expected.

Classes are:

Name Description
TbJsonDataColumn The JSON version of TbDataColumn (same configuration options).
TbJsonButtonColumn The JSON version of TbButtonColumn.
TbJsonPickerColumn Allows the use of our Bootstrap picker plugin on a JSON table

The following grid, displays 500 rows on each page from a table of around 4000 records (not indexed).

IDNameCreate TimeEdit
1Alberta2012/08/31 08:29:52 PM
2British Columbia2012/08/31 08:29:52 PM
3Manitoba2012/08/31 08:29:52 PM
4New Brunswick2012/08/31 08:29:52 PM
5Newfoundland2012/08/31 08:29:52 PM
6Nova Scotia2012/08/31 08:29:52 PM
7Nunavut2012/08/31 08:29:52 PM
8Ontario2012/08/31 08:29:52 PM
9Prince Edward Island2012/08/31 08:29:52 PM
10Quebec2012/08/31 08:29:52 PM
11Saskatchewan2012/08/31 08:29:52 PM
12Northwest Territories2012/08/31 08:29:52 PM
13Yukon Territory2012/08/31 08:29:52 PM
14Armed Forces Americas2012/08/31 08:29:52 PM
15Armed Forces Europe, Middle East, & Canada2012/08/31 08:29:52 PM
16Alaska2012/08/31 08:29:52 PM
17Alabama2012/08/31 08:29:52 PM
18Armed Forces Pacific2012/08/31 08:29:52 PM
19Arkansas2012/08/31 08:29:52 PM
20American Samoa2012/08/31 08:29:52 PM
21Arizona2012/08/31 08:29:52 PM
22California2012/08/31 08:29:52 PM
23Colorado2012/08/31 08:29:52 PM
24Connecticut2012/08/31 08:29:52 PM
25District of Columbia2012/08/31 08:29:52 PM
26Delaware2012/08/31 08:29:52 PM
27Florida2012/08/31 08:29:52 PM
28Federated States of Micronesia2012/08/31 08:29:52 PM
29Georgia2012/08/31 08:29:52 PM
30Guam2012/08/31 08:29:52 PM
31Hawaii2012/08/31 08:29:52 PM
32Iowa2012/08/31 08:29:52 PM
33Idaho2012/08/31 08:29:52 PM
34Illinois2012/08/31 08:29:52 PM
35Indiana2012/08/31 08:29:52 PM
36Kansas2012/08/31 08:29:52 PM
37Kentucky2012/08/31 08:29:52 PM
38Louisiana2012/08/31 08:29:52 PM
39Massachusetts2012/08/31 08:29:52 PM
40Maryland2012/08/31 08:29:52 PM
41Maine2012/08/31 08:29:52 PM
42Marshall Islands2012/08/31 08:29:52 PM
43Michigan2012/08/31 08:29:52 PM
44Minnesota2012/08/31 08:29:52 PM
45Missouri2012/08/31 08:29:52 PM
46Northern Mariana Islands2012/08/31 08:29:52 PM
47Mississippi2012/08/31 08:29:52 PM
48Montana2012/08/31 08:29:52 PM
49North Carolina2012/08/31 08:29:52 PM
50North Dakota2012/08/31 08:29:52 PM
$this->widget('bootstrap.widgets.TbJsonGridView', array(
    'dataProvider' => $model->search(),
    'filter' => $model,
    'type' => 'striped bordered condensed',
    'summaryText' => false,
    'cacheTTL' => 10, // cache will be stored 10 seconds (see cacheTTLType)
    'cacheTTLType' => 's', // type can be of seconds, minutes or hours
    'columns' => array(
            'name' => 'create_time',
            'type' => 'datetime'
            'header' => Yii::t('ses', 'Edit'),
            'class' => 'bootstrap.widgets.TbJsonButtonColumn',
            'template' => '{view} {delete}',

And that's it! Just like any CGridView. By the way, if you wish to work like a regular CGridView just set its ajaxUpdate to false.

Please note that this grid still under development. Nevertheless, this grid has been tested against a table of 5000 records with excellent results.


Displays any data you wish in a 'cool' picker dropdown box. The following code is an example of use, it calls an url via AJAX call and fills the content of the picker with its results.

'class' => 'bootstrap.widgets.TbJsonPickerColumn',
'pickerOptions' => array(
    'title' => 'My Title',
    'width' => '400px',
    'content' => 'js:function(){
            url: "'.$this->createUrl('site/yiiGrid').'",
            success: function(r) {
            $(".picker-content > *").html(r);
    return "<span id=\"picker-ajax-html\">".
    "<img src=\"http://www.flexvuefilms.com/img/loading.gif\"/>".