ホームページ ウェブフロントエンド jsチュートリアル GRID ドラッグ行のコード例_JavaScript スキル

GRID ドラッグ行のコード例_JavaScript スキル

May 16, 2016 pm 05:28 PM
grid

-------------------------- GRID 行ドラッグのサンプルコード 単一行ドラッグ-------------- -- ------------

コードをコピー コードは次のとおりです:

//最初の GRID を作成します
var firstGrid = new Ext.grid.GridPanel({
ddGroup : 'firstGridDdGroup',//ここに 2 番目の GRID がありますddGroup
store : firstGridStore,
enableDragDrop: true,//True は、GridPanel
で選択された行のドラッグ動作を開始することを意味します...他の属性は省略されます
});

//2 番目の GRID を作成します
var SecondGrid = new Ext.grid.GridPanel({
ddGroup : 'firstGridDdGroup',//ここに最初の GRID
store の ddGroup があります : SecondGridStore,
enableDragDrop: true,//True は、GridPanel
で選択された行のドラッグ動作を開始することを意味します...他の属性は省略されます
});

//最初の GRID を作成します ddGroup
var firstGridDropTargetEl = firstGrid.getView().el.dom.childNodes[0].childNodes[1];
var firstGridDropTarget = new Ext.dd.DropTarget (firstGridDropTargetEl , {
ddGroup : 'firstGridDdGroup', //2 番目の GRID の ddGroup と同じ
copy : true,
notifyDrop : function(ddSource, e, data){
function addRow( record, Index, allItems) {
var foundItem = SecondGridStore.find('name', Record.data.name);
if (foundItem == -1) {
firstGridStore.add(record); > firstGridStore.sort('name', 'ASC');
ddSource.grid.store.remove(record);
}
}
Ext.each(ddSource.dragData.selections ,addRow );
return(true);
}
)};

//2 番目の GRID ddGroup を作成します

var SecondGridDropTargetEl = SecondGrid.getView().el.dom.childNodes[0].childNodes[1];
var SecondGridDropTarget = new Ext.dd.DropTarget (secondGridDropTargetEl ,{
ddGroup : 'firstGridDdGroup',//最初の GRID の ddGroup と同じ
copy : true,
notifyDrop : function(ddSource, e, data){
function addRow( record, Index, allItems) {
var foundItem = SecondGridStore.find('name', Record.data.name);
if (foundItem == -1) {
SecondGridStore.add(record); > SecondGridStore.sort('name', 'ASC');
ddSource.grid.store.remove(record);
}
}
Ext.each(ddSource.dragData.selections ,addRow );
return(true);
}
});


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

CSS フレックスおよびグリッド レイアウトを使用して 3D ダイスを実装する手順を段階的に説明します (コード付き) CSS フレックスおよびグリッド レイアウトを使用して 3D ダイスを実装する手順を段階的に説明します (コード付き) Sep 23, 2022 am 09:58 AM

フロントエンドのインタビューでは、CSS を使用してサイコロや麻雀のレイアウトを実装する方法をよく質問されます。以下の記事では、CSSを使用して3Dサイコロを作成する方法(FlexおよびGridレイアウトで3Dサイコロを実装)を紹介しますので、ご参考になれば幸いです。

一般的に使用される 5 つの CSS レイアウト フレームワークについて学びます 一般的に使用される 5 つの CSS レイアウト フレームワークについて学びます Jan 16, 2024 am 09:20 AM

CSS レイアウト フレームワーク: 一般的に使用される 5 つのレイアウト フレームワークを探索する はじめに: Web デザインでは、レイアウトは重要な部分です。 CSS レイアウト フレームワークは、さまざまなレイアウト スタイルを備えた Web ページを迅速に構築するのに役立ちます。この記事では、一般的に使用される 5 つの CSS レイアウト フレームワークを紹介し、読者がこれらのフレームワークをよりよく理解して使用できるように、具体的なコード例を示します。 1. ブートストラップ: ブートストラップは、現在最も人気のある CSS レイアウト フレームワークの 1 つです。豊富なコンポーネントと強力な応答機能を備えており、

CSS の相対レイアウト プロパティの詳細な説明: 位置と相対 CSS の相対レイアウト プロパティの詳細な説明: 位置と相対 Oct 26, 2023 am 10:01 AM

CSS の相対レイアウト プロパティの詳細な説明: 位置と相対 フロントエンド開発では、開発者が直面する必要がある問題がレイアウトであることがよくあります。ページ上の要素の位置をより適切に制御するために、CSS にはさまざまなレイアウト メソッドが用意されています。中でも相対レイアウトは非常に一般的なレイアウト方法であり、position属性とrelative属性を利用することで要素の位置や大きさを柔軟に調整することができます。 Position 属性は、要素の配置方法を定義するために使用されます。共通の値

CSS パネル レイアウト プロパティ: グリッドおよびグリッド テンプレート列 CSS パネル レイアウト プロパティ: グリッドおよびグリッド テンプレート列 Oct 25, 2023 am 08:15 AM

CSS パネル レイアウト プロパティ: グリッドとグリッド テンプレート列 最近の Web ページ レイアウトでは、パネル レイアウトは Web コンテンツをグリッドに配置できる一般的な設計方法です。パネルレイアウトを実現するには、CSSのグリッドレイアウト属性とgrid-template-columns属性が鍵となります。 1. グリッド レイアウト属性の概要 グリッド レイアウト属性は、CSS でグリッド レイアウトを作成するために使用される属性です。

ページ レイアウトとレスポンシブ デザインのための UniApp 実装テクニック ページ レイアウトとレスポンシブ デザインのための UniApp 実装テクニック Jul 05, 2023 pm 01:57 PM

ページ レイアウトとレスポンシブ デザインを実装するための UniApp の実装スキル はじめに: UniApp は、iOS、Android、H5 などの複数のプラットフォーム向けのアプリケーションを同時に開発できる、Vue.js フレームワークに基づくクロスプラットフォーム開発ツールです。この記事では、UniApp を使用してページ レイアウトとレスポンシブ デザインを実装する方法を紹介し、いくつかの実用的なコード例を示します。 1. ページ レイアウト Flex レイアウト Flex レイアウトは、ページ レイアウトで一般的に使用される方法であり、さまざまな画面サイズやデバイスに自動的に適応できます。ユニアプリ内

CSS アダプティブ レイアウト プロパティの最適化のヒント: フレックスとグリッド CSS アダプティブ レイアウト プロパティの最適化のヒント: フレックスとグリッド Oct 21, 2023 am 08:03 AM

CSS アダプティブ レイアウト属性の最適化のヒント: フレックスとグリッド 最新の Web 開発では、アダプティブ レイアウトの実装は非常に重要なタスクです。モバイルデバイスの普及と画面サイズの多様化に伴い、Web サイトがさまざまなデバイスで適切に表示され、さまざまな画面サイズに適応できることが必須の要件となっています。幸いなことに、CSS には、アダプティブ レイアウトを実装するための強力なプロパティとテクニックがいくつか用意されています。この記事では、よく使用される 2 つのプロパティ (フレックスとグリッド) に焦点を当て、具体的なコード例を示します。

HTML チュートリアル: グリッド平均レイアウトにグリッド レイアウトを使用する方法 HTML チュートリアル: グリッド平均レイアウトにグリッド レイアウトを使用する方法 Oct 19, 2023 am 10:49 AM

HTML チュートリアル: グリッド平均レイアウトにグリッド レイアウトを使用する方法 Web デザインでは、グリッド レイアウト (GridLayout) が一般的に使用されるレイアウト方法であり、Web コンテンツを効果的に複数の列に分割し、柔軟な配置とレイアウトを実行できます。このチュートリアルでは、HTML および CSS グリッド レイアウトを使用してグリッド平均レイアウトを実装する方法を紹介し、具体的なコード例を示します。 1. グリッドレイアウトとは何ですか?グリッドレイアウトとは、ページを複数の列に分割し、行と列に基づいて配置するレイアウト方法です。

CSS テーブル レイアウト プロパティの解釈: テーブルと表示 CSS テーブル レイアウト プロパティの解釈: テーブルと表示 Oct 21, 2023 am 11:47 AM

CSS テーブル レイアウト属性の解釈: テーブルとディスプレイ フロントエンド開発では、テーブル レイアウトが一般的に使用されるレイアウト方法です。 CSS はいくつかのテーブル レイアウト プロパティを提供しますが、最も一般的に使用されるのはテーブル プロパティと表示プロパティです。これら 2 つのプロパティについては以下で詳しく説明し、具体的なコード例を示します。 1. テーブル属性 table は、要素をテーブル レイアウトに設定するために CSS で使用される属性です。要素の表示属性をtableに設定することで、要素のレイアウトを変更できます。

See all articles