提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery与ExtJS之选择实例分析

jQuery实例 分析 选择 Extjs
2023-06-13 09:14:24 时间
Examples
下面是PHP中生成的表页：
复制代码代码如下:

<p><ahref="<?=$this->url(array("controller"=>"contact",
"action"=>"add"));?>">AddnewContact</a></p>
<tableclass="contactTable"id="contactTable">
<thead>
<tr>
<thclass="sortable">Contact</th>
<thclass="sortable">Address</th>
<thclass="sortable">PhoneNumber</th>
<thclass="sortable">Email</th>
<th> </th>
</tr>
</thead>
<tbody>
<?phpforeach($this->contactsas$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>
<ahref="<?=$this->url(array("controller"=>"contact",
"action"=>"edit","id"=>$contact->id));?>">Edit</a>
<ahref="<?=$this->url(array("controller"=>"contact",
"action"=>"delete","id"=>$contact->id));?>">Delete</a>
</td>
</tr>
<?php}?>
</tbody>
</table>

jQuery
jQuery的方法是使用tablesorter插件。它是一个函数与几个配置参数以下的代码：
复制代码代码如下:

<?php//addingscripts
$headScript="
$(function(){
$("table").tablesorter({
sortList:[[0,0]],
widgets:[\"zebra\"],
//passtheheadersargumentandassignanobject
headers:{
//assignthefifthcolumn(westartcountingzero)
4:{
//disableitbysettingthepropertysortertofalse
sorter:false
}
}
});
});
"

$this->headScript()->appendFile("/js/jquery.tablesorter.js")
->appendScript($headScript);;
?>

注：headScript（）业务是一个Zend框架的事情，所以你可以控制哪些JavaScript以显示在每一页上。
ExtJS
该分机js中的方法是一个比较复杂。您创建一个数据存储，定义创建网格（表内存），然后添加数据，并重新渲染的东西。下面是代码：
复制代码代码如下:
<?php//addingscripts
$headScript="
$(document).ready(function(){
$("#wheelink").bind("click",function(){
Ext.Msg.alert("Woot!","Thanksforclickingme!");
});
});
Ext.onReady(function(){
//createthegrid
vargrid=newExt.grid.TableGrid(\"contactTable\",{
stripeRows:true//stripealternaterows
});
grid.render();
});
/**
*@classExt.grid.TableGrid
*@extendsExt.grid.Grid
*AGridwhichcreatesitselffromanexistingHTMLtableelement.
*@constructor
*@param{String/HTMLElement/Ext.Element}tableThetableelementfromwhichthisgridwillbecreated-
*ThetableMUSThavesometypeofsizedefinedforthegridtofill.Thecontainerwillbe
*automaticallysettopositionrelativeifitisn"talready.
*@param{Object}configAconfigobjectthatsetspropertiesonthisgridandhastwoadditional(optional)
*properties:fieldsandcolumnswhichallowforcustomizingdatafieldsandcolumnsforthisgrid.
*@history
*2007-03-01OriginalversionbyNigeAnimalWhite
*2007-03-10jvsSlightlyrefactoredtoreuseexistingclasses
*/
Ext.grid.TableGrid=function(table,config){
config=config||{};
Ext.apply(this,config);
varcf=config.fields||[],ch=config.columns||[];
table=Ext.get(table);
varct=table.insertSibling();
varfields=[],cols=[];
varheaders=table.query(\"theadth\");
for(vari=0,h;h=headers[i];i++){
vartext=h.innerHTML;
varname=""+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
}));
}
vards=newExt.data.Store({
reader:newExt.data.XmlReader({
record:"tbodytr"
},fields)
});
ds.loadData(table.dom);
varcm=newExt.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":newExt.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开发更适合。

相关文章