jQuery が zTree プラグインを使用してドラッグ アンド ドロップ機能を実装する方法を説明する例

これまで出会ったツリープラグインの中で、zTreeは比較的シンプルで使いやすいと思います。ビジネス要件の 1 つは、ツリー上のオブジェクトを自由にドラッグ アンド ドロップできるようにすることでした。そのため、zTree を使用していくつかの研究を行いました。この記事では、主に zTree プラグインを使用してドラッグ可能なツリーを実装する js の例を紹介します。編集者はそれが非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

まず、zTree に必要な関連パッケージをダウンロードし、公式ダウンロード リンクを添付します: zTree ダウンロード 関連ファイルを導入した後、zTree を構築できます。まずページに ul タグを追加し、次にツリーに id を追加し、calss を ztree にするとフロントエンド ページが完成します。

注: 以下のコードはすべて私自身のニーズに従って書かれており、構成プロセスとコールバック関数の使用を参照するだけで不完全です。

フロントエンドページ:

 <ul id="modelTree" class="ztree"></ul>

次に、JavaScript を作成する前に、上で詳しく説明した zTree の API を読む必要があります。最初の設定は、zTree 全体のコア構成であり、ドラッグ アンド ドロップ機能が必要なため、他のパラメータに依存する編集を構成しました。必要な構成について。関連するコールバック関数もコールバックで構成されます。

設定構成:

 var setting = {
 data: {
  key:{
   name:'nodeName'
  },
  simpleData: {
   enable: true,
   idKey: 'nodeId',
   pIdKey: 'parentNodeId'
  },
  keep:{
   leaf:true,
   parent:true,
  }
 },
 edit:{
  drag:{
   isCopy: false,
   isMove: true,
   prev: true,
   next: true,
   inner: true,
   autoOpenTime: 0,
   minMoveSize: 10


  },
  enable:true,
  editNameSelectAll: true,
  removeTitle: "删除节点",
  renameTitle: "编辑节点名称",
  showRemoveBtn: false,
  showRenameBtn: false,
 },

 callback: {
  beforeClick: beforeClick,

  beforeDrag:beforeDrag,
  beforeDragOpen:beforeDragOpen,
  beforeDrop:beforeDrop,
  onDrag:onDr},
};

設定を構成した後、各コールバック関数を完了し、必要に応じて内容を決定します。 ここでは、親の種類に基づいてドラッグ アンド ドロップできるかどうかを決定します。ノードとその他のいくつかのルールにより、ドラッグが成功するかどうかに対応する制限があります。

コールバック関数:

 //拖拽之前调用的函数
function beforeDrag(treeId,treeNode){
 if(treeNode[0].nodeType == 'GROUP'){
  return false;
 }
 if(treeNode.parentId == null && treeNode.modelType !=null){
  return true;
 }
 var node = treeNode[0].getParentNode();
 var modelType = treeNode[0].getParentNode().modelType;
 if(modelType == 'INTERFACE'){
  return false;
 }else {
  return true;
 }
}

//预留被拖拽的回调函数
function onDrag(event, treeId, treeNode){
 //暂时没用到
}

//拖拽移动到展开父节点之前调用的函数
function beforeDragOpen(){
 return true;
}

//拖拽操作结束之前调用的函数
function beforeDrop(treeId, treeNode, targetNode, moveType){
 BRS.fileLoading('show');
 var result = false;
 if(targetNode == null || (moveType != "inner" && !targetNode.parentTId)){
  BRS.fileLoading('hide');
  return false;
 }
 if(targetNode.modelType != null){
  if((targetNode.modelType == 'INTERFACE' && moveType == 'inner') || targetNode.getParentNode().modelType == 'INTERFACE'){
   BRS.fileLoading('hide');
   return false;
  }
 }
 var objDetail = {
  url: '/api/model/' + treeNode[0].id,
  async:false,
 }
 jsonAjax(objDetail,function (detailData) {
  var data = {
   nodeType : detailData.nodeType,
   code : detailData.code,
   name : detailData.name,
   builtIn : detailData.builtIn,
   iconUrl : detailData.iconUrl,
   modelType : detailData.modelType.code,
   interfaceModelId : detailData.interfaceModelId,
  };
  data.id = treeNode[0].id;
  if(moveType != 'inner'){
   data.groupId = targetNode.parentId;
  }else{
   data.groupId = targetNode.id;
  }
  var obj = {
   type:"put",
   showSuccessMsg: false,
   param: {
    params:JSON.stringify(data)
   },
   async:false,
   url: '/api/model',
  }
  jsonAjax(obj,function(updateData){
   if(updateData != null){
    result = true;
  ing('hide');
 return result;
}

//预留拖拽结束的回调函数
function onDrop(event, treeId, treeNode, targetNode, moveType){
 befod('hide');
 return result;
}

//预留拖拽结束的回调函数
function onDrop(event, treeId, treeNode, targetNode, moveType){
 beforeClick(treeId, treeNode[0]);
}

上記の設定と関連関数が完了したら、zTree の初期化メソッドを呼び出し、Ajax リクエストによって返されたパラメーターを通じて必要なツリーを埋めることができます。

// 初始化对象分组树
 var treeObj = $("#modelTree");
 $.fn.zTree.init(treeObj, setting, data);
 zTree_Menu = $.fn.zTree.getZTreeObj("modelTree");

形成された最終ツリー (ドラッグ可能):

関連する推奨事項;

zTree プラグインの複数選択ドロップダウン メニューの例 code_javascript スキル

jQuery は次を使用して実装されます。 zTreeプラグインのツリーメニューと非同期loading_jquery

zTreeプラグインのドロップダウンツリーの使用法tutorial_javascriptスキル

以上がjQuery が zTree プラグインを使用してドラッグ アンド ドロップ機能を実装する方法を説明する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。