jQuery与ExtJS之选择实例分析
2024-05-06 14:27:41
供稿：网友
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 -
