对于grid中每一条记录点击左边的+号能展开一个明细的子表格 所有数据包括列名均从后台获得,子表格的数据暂时在本地以做测试

在此贴一些代码留下记录

ExtJS4 table_extjs のネストされた rowExpander アプリケーション

WBOY
リリース: 2016-05-16 16:50:27
オリジナル
1428 人が閲覧しました

今日はグリッドを作成しているのですが、その中のデータを詳細にする必要があるので、よく考えた結果、ネストされたテーブルを作成することにしました。下の図を見てください。
ExtJS4 table_extjs のネストされた rowExpander アプリケーション

グリッド内の各レコードについて、左側の番号をクリックして詳細なサブテーブルを展開します。列名を含むすべてのデータが背景から取得されます。サブテーブルのデータは一時的にローカルに保存されます。テストを実行します

ここにコードを投稿して記録を残します

コードをコピーします コードは次のとおりです。

function displayInnerGrid(renderId) {

//内部グリッド ストアのモデル
Ext.define('TestModel', {
拡張: 'Ext.data.Model'、
フィールド: [
{ 名前: 'フィールド 1' }、
{ 名前: 'フィールド 2' }、
{ 名前: 'フィールド 3' }
]
});

//内部グリッドのダミーデータ
var dummyDataForInsideGrid = [
['a', 'a', 'a'],
['b', 'b', 'b' ],
['c', 'c', 'c']

];

var insideGridStore = Ext .create('Ext.data.ArrayStore', {
モデル: 'TestModel',
データ: dummyDataForInsideGrid
});

innerGrid = Ext.create('Ext.grid.パネル', {
store: insideGridStore,
selModel: {
selType: 'cellmodel'
},
columns: [
{ text: "詳細 1", dataIndex: ' Field1' },
{ text: "詳細 2" , dataIndex: 'Field2' },
{ text: "詳細 3", dataIndex: 'Field3' }
],
columnLines: true ,
autoWidth: true,
autoHeight: true ,
//width: 400,
//height: 200,
frame: false,
// iconCls: 'icon-グリッド',
renderTo: renderId
}) ;

/* innerGrid.getEl().swallowEvent([
'mousedown', 'mouseup', 'click',
'contextmenu', 'mouseover', 'mouseout',
'dblclick', 'mousemove'
]); */

}


function destroyInnerGrid(record) ) {

varparent = document.getElementById (record.get('id'));
var child =parent.firstChild; .parentNode.removeChild(child);
child = child
}





コピーcode
コードは次のとおりです。 grid_huizong.view.on('expandBody', function (rowNode, Record, ExpandRow, eOpts) { / /console.log(record.get('id')); displayInnerGrid(record.get('id'))
});

grid_huizong.view.on('collapsebody ', function (rowNode, Record, ExpandRow, eOpts) {
destroyInnerGrid (record)
});


上記のコードはグリッド バインディング イベントです。 。特定のコードの意味を理解できるはずです

グリッドを定義するときは、



コードをコピーしてください
コードは次のとおりです: plugins: [{ ptype: 'rowexpander', rowBodyTpl : [
'
',
'
'
]
}],


これは rowexpander プラグインです。 。ネット上では利用する際に引用が必要と言う人もいますが、何も引用せずに利用しても大丈夫でしょうか?

上記の 3 つのコードのキー ID に注意してください。この ID は変更できますが、バックグラウンドから送信されるデータのフィールドの最初の項目に変更する必要があります。 。この例では、バックグラウンドから送信されるフィールドの最初の項目は id です。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート