jQuery使用zTree插件實(shí)現(xiàn)可拖拽的樹示例
在目前接觸到的樹插件中，我覺得zTree比較簡(jiǎn)單，也容易上手。有一次業(yè)務(wù)需求是將某對(duì)象分組樹上的對(duì)象可以隨意拖拽，相當(dāng)于改變了對(duì)象的分組，因此我用到了zTree，對(duì)其進(jìn)行了一些列學(xué)習(xí)。
首先下載zTree所需的相關(guān)包，附上官方下載連接：zTree下載，引入相關(guān)文件后就可以進(jìn)行zTree的構(gòu)建了。首先在頁面上加ul標(biāo)簽，然后為樹加上id，calss為ztree，前端頁面就完成了。
注意：下面所有的代碼是根據(jù)我自己的需求寫的，且不完整，主要參考配置流程和回調(diào)函數(shù)的使用即可。
前端頁面：
<ul id="modelTree" class="ztree"></ul>
然后寫JavaScript，寫之前一定要多多閱讀zTree的官方API，上面已經(jīng)解釋的很詳細(xì)了，只需要照著一步一步做即可。首先就是配置setting，這個(gè)是整個(gè)zTree的核心配置，我這里除了基本配置外，因?yàn)樾枰献Чδ埽虼伺渲昧薳dit，其中enable一定要設(shè)為true，其他參數(shù)看需求配置。callback中也配置相關(guān)的回調(diào)函數(shù)。
setting配置：
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: "刪除節(jié)點(diǎn)",
renameTitle: "編輯節(jié)點(diǎn)名稱",
showRemoveBtn: false,
showRenameBtn: false,
},
callback: {
beforeClick: beforeClick,
beforeDrag:beforeDrag,
beforeDragOpen:beforeDragOpen,
beforeDrop:beforeDrop,
onDrag:onDr},
};
配置完setting，將各個(gè)回調(diào)函數(shù)補(bǔ)充完整，根據(jù)需求來定里面的內(nèi)容，我這里根據(jù)父節(jié)點(diǎn)的類型以及一些其他一些規(guī)則對(duì)能否拖拽，拖拽能否成功進(jìn)行了相應(yīng)的限制。
回調(diào)函數(shù)：
//拖拽之前調(diào)用的函數(shù)
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;
}
}
//預(yù)留被拖拽的回調(diào)函數(shù)
function onDrag(event, treeId, treeNode){
//暫時(shí)沒用到
}
//拖拽移動(dòng)到展開父節(jié)點(diǎn)之前調(diào)用的函數(shù)
function beforeDragOpen(){
return true;
}
//拖拽操作結(jié)束之前調(diào)用的函數(shù)
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;
}
//預(yù)留拖拽結(jié)束的回調(diào)函數(shù)
function onDrop(event, treeId, treeNode, targetNode, moveType){
befod('hide');
return result;
}
//預(yù)留拖拽結(jié)束的回調(diào)函數(shù)
function onDrop(event, treeId, treeNode, targetNode, moveType){
beforeClick(treeId, treeNode[0]);
}
上面的設(shè)置和相關(guān)函數(shù)完成以后，就可以調(diào)用zTree的初始化方法，通過Ajax請(qǐng)求回來的參數(shù)去填充我們所需要的樹了。
// 初始化對(duì)象分組樹
var treeObj = $("#modelTree");
$.fn.zTree.init(treeObj, setting, data);
zTree_Menu = $.fn.zTree.getZTreeObj("modelTree");
最后形成的樹（可以拖拽的）：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 基于jQuery ztree實(shí)現(xiàn)表格風(fēng)格的樹狀結(jié)構(gòu)
- jQuery zTree 異步加載添加子節(jié)點(diǎn)重復(fù)問題
- jQuery 利用ztree實(shí)現(xiàn)樹形表格的實(shí)例代碼
- zTree jQuery 樹插件的使用(實(shí)例講解)
- jQuery EasyUI結(jié)合zTree樹形結(jié)構(gòu)制作web頁面
- jQuery zTree樹插件動(dòng)態(tài)加載實(shí)例代碼
- jQuery插件zTree實(shí)現(xiàn)的多選樹效果示例
- jQuery zTree如何改變指定節(jié)點(diǎn)文本樣式
相關(guān)文章
jQuery綁定事件-多種實(shí)現(xiàn)方式總結(jié)
下面小編就為大家?guī)硪黄猨Query綁定事件-多種實(shí)現(xiàn)方式總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
詳解jQuery UI庫(kù)中文本輸入自動(dòng)補(bǔ)全功能的用法
這篇文章主要介紹了詳解jQuery UI庫(kù)中文本輸入自動(dòng)補(bǔ)全功能的用法,其中重點(diǎn)講解了常用的郵箱地址輸入時(shí)后綴自動(dòng)補(bǔ)全功能的使用,需要的朋友可以參考下2016-04-04
jQuery實(shí)現(xiàn)刪除li節(jié)點(diǎn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)刪除li節(jié)點(diǎn)的方法的相關(guān)資料,需要的朋友可以參考下2016-12-12
jQuery實(shí)現(xiàn)的兩種簡(jiǎn)單彈窗效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的兩種簡(jiǎn)單彈窗效果,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)淡入彈窗及滑動(dòng)彈窗的相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了jquery ztree異步搜索，即搜葉子實(shí)踐，使用jquery ztree開發(fā)的樹控件經(jīng)常需要進(jìn)行一些異步查找葉子節(jié)點(diǎn)的操作，感興趣的小伙伴們可以參考一下2016-02-02
jquery實(shí)現(xiàn)的一個(gè)導(dǎo)航滾動(dòng)效果具體代碼
首頁有一個(gè)導(dǎo)航頁面要實(shí)現(xiàn)滾動(dòng)效果，索性就仿造別人的效果自己做了一個(gè)，大體上還行，看起來還是比較流暢的,現(xiàn)滾動(dòng)效果，腳本代碼如下，感興趣的朋友可以參考下2013-05-05
JQuery拖動(dòng)表頭邊框線調(diào)整表格列寬效果代碼
當(dāng)鼠標(biāo)停留在表頭邊框線上，接著拖動(dòng)鼠標(biāo)，會(huì)在表格中出現(xiàn)一條隨鼠標(biāo)移動(dòng)的豎線，最后放開鼠標(biāo)，表格列寬會(huì)被調(diào)整2014-09-09
JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié)
這篇文章主要介紹了JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié),本文總結(jié)了控制style、控制CSS、JQuery自帶方法等幾種顯示、隱藏div的方法,需要的朋友可以參考下2015-04-04
jquery文字上下滾動(dòng)的實(shí)現(xiàn)方法
jquery文字上下滾動(dòng)的實(shí)現(xiàn)方法，需要的朋友可以參考一下2013-03-03
jQuery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03