jQueryとExtJSの解析例selection_jquery

例
下は PHP で生成される表です:

复制代码代码如下:

gt;新しい連絡先を追加

 



contacts as $contact) { ?>

連絡先	住所	電話番号	メール
escape($contact->name);?>	escape($contact->address));?>	escape($contact->phone_number);?>	escape($contact->email);?>	編集 削除

jQuery
jQuery のメソッドは tablesorter ツールを使用します。 これは、構成パラメータに含まれる関数の 1 つです。代码

代码如下: $headScript = ' $(function(){

$ ("table").tablesorter({

sortList: [ [0,0] ],
widgets: ['zebra'],
// headers 引数を渡し、オブジェクト
headers を割り当てます: {
// 5 番目の列を割り当てます (ゼロから数え始めます)
4: {
// プロパティ ソーターを false に設定して無効にします
sorter: false
}
}
});
});
'

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


注：headScript() プロトコルは Zend フレームワークの 1 つであるため、これらの JavaScript を制御して各ページに表示することができます。データを作成し、ネットワーク (テーブル内に保存) を決定し、その後データを追加して、新たに汚染されたコンテンツを追加します。代码


代码如下:

$headScript = "
$(document).ready(function(){
$('#wheelink').bind('click ',function() {
Ext.Msg.alert('うわー!', 'クリックしてくれてありがとう!')
});
Ext.onReady(function( ) {
// グリッドを作成します
var Grid = new Ext.grid.TableGrid("contactTable", {
ストライプRows: true // 交互の行をストライプ化します
}); render();
});
/**
* @class Ext.grid.TableGrid
* @extends Ext.grid.Grid
* 既存の HTML テーブル要素からそれ自体を作成するグリッド。
* @constructor
* @param {String/HTMLElement/Ext.Element} table このグリッドの作成元となるテーブル要素 -
* テーブルには、グリッドに対して定義された何らかのサイズが必要です。埋める。コンテナーは
* 相対位置にまだ設定されていない場合は自動的に設定されます。
* @param {Object} config このグリッドのプロパティを設定する構成オブジェクト。2 つの追加 (オプション)
* プロパティ: このグリッドのデータ フィールドと列をカスタマイズできるフィールドと列です。
* @history
* 2007-03-01 Nige Animal White によるオリジナルバージョン
* 2007-03-10 jvs 既存のクラスを再利用するために少しリファクタリングされました
*/
Ext.grid.TableGrid = function(table, config) {
config = config || >Ext.apply(this, config);
var cf = config.fields || [], ch = config.columns ||
table = Ext.get(table); ct = table.insertSibling();
var フィールド = []、cols = [];
var headers = table.query("thead th"); h = headers[i]; i ) {
var text = h.innerHTML;
fields.push(Ext.applyIf(cf[i] || { }, {
名前: 名前,
マッピング: 'td:nth(' (i 1) ')/@innerHTML'
}));
cols.push(Ext.applyIf(ch) [i] || {}, {
'header': テキスト、
'dataIndex': 名前、
'width': h.offsetWidth、
'tooltip': h.title、
'並べ替え可能': true
}));
}
var ds = new Ext.data.Store({
reader: new Ext.data.XmlReader({
record:'tbody tr'
}, フィールド)
});
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 内の機能はより柔軟に配置されており、これには私による処理が必要であり、非常に難しいです。 GWT または Adob​​e のユーザー インターフェイスが必要な場合1 つの内線では、HTML テーブルから取得するのではなく、データを含む JSON または XML のリクエストを js 内で交換し、変更可能なネットワーク テーブル (テーブル) を送信します。私の例では、テーブル内のデータが Zend フレームに組み込まれており、これは Javascript で再度機能が繰り返されます。一般に、jQuery はほとんどの Web サイトの公開に適していると考えられています。