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 相关文章推荐
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
vue实现扫码功能
Jan 17 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
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
第十一节 重载 [11]
2006/10/09 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
php按单词截取字符串的方法
2015/04/07 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
Python中文编码那些事
2014/06/25 Python
python打开windows应用程序的实例
2019/06/28 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
自我评价的范文
2014/02/02 职场文书
教师个人剖析材料
2014/02/05 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
《春天来了》教学反思
2014/04/07 职场文书
团支部建设方案
2014/05/02 职场文书
个人考核材料
2014/05/15 职场文书
房地产开发项目建议书
2014/05/16 职场文书
安装工程师岗位职责
2015/02/13 职场文书
2015年除四害工作总结
2015/07/23 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python