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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
vuex state中的数组变化监听实例
Nov 06 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使用Cookie控制访问授权的方法
2015/01/21 PHP
php cli配置文件问题分析
2015/10/15 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
Javascript中的常见排序算法
2007/03/27 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
Python3使用requests发闪存的方法
2016/05/11 Python
python爬虫爬取网页表格数据
2018/03/07 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
关于廉洁的广播稿
2014/01/30 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
开工典礼策划方案
2014/05/23 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
同学会感言
2015/07/30 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
Python中文纠错的简单实现
2021/07/07 Python