Examples
下面是PHP中生成的表頁：
代碼如下:
<p><a href="<?= $this->url(array('controller'=>'contact',
'action'=>'add'));?>">Add new Contact</a></p>
<table class="contactTable" id="contactTable">
<thead>
<tr>
<th class="sortable">Contact</th>
<th class="sortable">Address</th>
<th class="sortable">Phone Number</th>
<th class="sortable">Email</th>
<th> </th>
</tr>
</thead>
<tbody>
<?php foreach($this->contacts as $contact) { ?>
<tr>
<td><?= $this->escape($contact->name);?></td>
<td><?= str_replace(array("\n", "\\n", "\\\n", "\n\r", "\\n\\r", "\\\n\\\r", "\r", "\\r", "\\\r"), ' ', $this->escape($contact->address));?></td>
<td><?= $this->escape($contact->phone_number);?></td>
<td><?= $this->escape($contact->email);?></td>
<td>
<a href="<?= $this->url(array('controller'=>'contact',
'action'=>'edit', 'id'=>$contact->id));?>">Edit</a>
<a href="<?= $this->url(array('controller'=>'contact',
'action'=>'delete', 'id'=>$contact->id));?>">Delete</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
jQuery
jQuery的方法是使用tablesorter插件。 它是一個函數與幾個配置參數以下的代碼：
代碼如下:
<?php // adding scripts
$headScript = '
$(function(){
$("table").tablesorter({
sortList: [ [0,0] ],
widgets: [\'zebra\'],
// pass the headers argument and assign an object
headers: {
// assign the fifth column (we start counting zero)
4: {
// disable it by setting the property sorter to false
sorter: false
}
}
});
});
'
$this->headScript()->appendFile('/js/jquery.tablesorter.js')
->appendScript($headScript); ;
?>
注：headScript（）業務是一個Zend框架的事情，所以你可以控制哪些JavaScript以顯示在每一頁上。
Ext JS
該分機 js中 的方法是一個比較復雜。 您創建一個數據存儲，定義創建網格（表內存），然後添加數據，並重新渲染的東西。 下面是代碼：
代碼如下:
<?php // adding scripts
$headScript = "
$(document).ready(function(){
$('#wheelink').bind('click',function() {
Ext.Msg.alert('Woot!', 'Thanks for clicking me!');
});
});
Ext.onReady(function() {
// create the grid
var grid = new Ext.grid.TableGrid(\"contactTable\", {
stripeRows: true // stripe alternate rows
});
grid.render();
});
/**
* @class Ext.grid.TableGrid
* @extends Ext.grid.Grid
* A Grid which creates itself from an existing HTML table element.
* @constructor
* @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
* The table MUST have some type of size defined for the grid to fill. The container will be
* automatically set to position relative if it isn't already.
* @param {Object} config A config object that sets properties on this grid and has two additional (optional)
* properties: fields and columns which allow for customizing data fields and columns for this grid.
* @history
* 2007-03-01 Original version by Nige Animal White
* 2007-03-10 jvs Slightly refactored to reuse existing classes
*/
Ext.grid.TableGrid = function(table, config) {
config = config || {};
Ext.apply(this, config);
var cf = config.fields || [], ch = config.columns || [];
table = Ext.get(table);
var ct = table.insertSibling();
var fields = [], cols = [];
var headers = table.query(\"thead th\");
for (var i = 0, h; h = headers[i]; i++) {
var text = h.innerHTML;
var name = 'tcol-'+i;
fields.push(Ext.applyIf(cf[i] || {}, {
name: name,
mapping: 'td:nth('+(i+1)+')/@innerHTML'
}));
cols.push(Ext.applyIf(ch[i] || {}, {
'header': text,
'dataIndex': name,
'width': h.offsetWidth,
'tooltip': h.title,
'sortable': true
}));
}
var ds = new Ext.data.Store({
reader: new Ext.data.XmlReader({
record:'tbody tr'
}, fields)
});
ds.loadData(table.dom);
var cm = new Ext.grid.ColumnModel(cols);
if (config.width || config.height) {
ct.setSize(config.width || 'auto', config.height || 'auto');
} else {
ct.setWidth(table.getWidth());
}
if (config.remove !== false) {
table.remove();
}
Ext.applyIf(this, {
'ds': ds,
'cm': cm,
'sm': new Ext.grid.RowSelectionModel(),
autoHeight: true,
autoWidth: false
});
Ext.grid.TableGrid.superclass.constructor.call(this, ct, {});
};
Ext.extend(Ext.grid.TableGrid, Ext.grid.GridPanel);
"
$this->headScript()->appendFile('/js/ext-jquery-adapter.js')
->appendFile('/js/ext-all-debug.js')
->appendScript($headScript); ;
?>
所以，現在的比較：
對於我們的用途，jQuery是一個更合適。 該js中 的功能更難以配置，這是需要我們的處理的，這是很難定義。 我寧願在 js中 ，當我需要一個更先進的 用戶界面 為 GWT的，或在Adobe應用程序。 一個內線優勢 js中 是交換了一些東西可以改變你的網格（表），使其從一個填充有數據 的JSON 或 XML的 請求，而不是從拉它 的HTML 表。 使用jQuery，我們將不得不解析 JSON的 自己，或找一些插件，我們會做它。 在我們的例子中，表中的數據已經涵蓋了Zend框架，這樣在Javascript中再次將是一個功能重復。
因此，他們都非常強大的js庫，並把他們的位置和使用。 一般來說，我認為jQuery是一個對大多數Web開發更適合。