jQuery与ExtJS之选择实例分析


Posted in Javascript onAugust 19, 2010

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开发更适合。
Javascript 相关文章推荐
jQuery技巧总结
Jan 01 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 Javascript
JQuery跨Iframe选择实现代码
Aug 19 #Javascript
JQuery中each()的使用方法说明
Aug 19 #Javascript
jquery获取input的value问题说明
Aug 19 #Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 #Javascript
JavaScript学习历程和心得小结
Aug 16 #Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 #Javascript
javascript下高性能字符串连接StringBuffer类
Aug 16 #Javascript
You might like
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
定义select的边框颜色
2008/04/28 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python实现list由于numpy array的转换
2018/04/04 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
Python while true实现爬虫定时任务
2020/06/08 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
高三历史教学反思
2014/01/09 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
学术会议领导致辞
2015/07/29 职场文书