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.jstree 增加节点的双击事件代码
Jul 27 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
Cannot modify header information错误解决方法
2008/10/08 PHP
php微信支付之APP支付方法
2015/03/04 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
Python中使用Inotify监控文件实例
2015/02/14 Python
python实现多线程的两种方式
2016/05/22 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
Python实现识别手写数字大纲
2018/01/29 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
python实现图像外边界跟踪操作
2020/07/13 Python
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
电子信息专业学生自荐信
2013/11/09 职场文书
商务考察邀请函范文
2014/01/21 职场文书
六查六看自查材料
2014/02/17 职场文书
企业务虚会发言材料
2014/10/20 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android