使用需求
時隔兩年多,再次使用到了 ztree
,這次是在vue中引入使用,並遇到了一些小問題,在這裏把經驗和解決辦法給大家分享下,共勉。
ztree: zTree -- jQuery 樹插件 官網簡介 zTree v3.5 Demo 演示
有關ztree的使用,之前整理過兩篇在jquery中使用的方法,大家參考下:
zTree -- jQuery 樹插件 使用方法與例子
zTree -- jQuery 樹插件 構造treeNode JSON 數據對象
在vue中使用zTree
首先,需要安裝插件:
npm install ztree
然後,使用ztree:
<ul id="ztree" class="ztree"></ul>
提示:zTree
的容器 className
別忘了設置爲 "ztree
"!!!
import 'jquery'
import 'ztree'
import 'ztree/css/metroStyle/metroStyle.css'
data () {
return {
treeNodes: '',
selectNode: '',
selectTreeSetting: {
view: {
showIcon: true,
showLine: true,
dblClickExpand: false
},
async: {
enable: true,
type: 'get',
dataType: 'json',
url: '/server/station/info/list.json',
autoParam: ['id=parentId'],
dataFilter: this.filter
},
data: {
simpleData: {
enable: true,
idKey: 'id',
pIdKey: 'parentId'
}
},
callback: {
onClick: this.zTreeOnClick
}
}
}
},
mounted () {
this.initStationSelectTree($('#station'))
},
methods: {
initStationSelectTree (anchor) {
this.$get('/xxxxx/list.json', {}, response => { //此處是使用的封裝過的
this.treeNodes = $.fn.zTree.init(anchor, this.selectTreeSetting, response.data)
})
},
filter (treeId, parentNode, childNodes) {
if (!childNodes) return null
for (var i = 0, l = childNodes.length; i < l; i++) {
if (childNodes[i].parentId === 'super') childNodes[i].open = true
}
curChildNodes = childNodes
return childNodes
},
zTreeOnClick: function (event, treeId, treeNode) {
// console.log(treeNode);點擊樹節點獲取當前節點 treeNode.name 等,編寫需要的邏輯即可
}
}
報錯jQuery is not defined
的解決
注意,在ztree
中會使用到jQuery
,可能會報錯jQuery is not defined
,一開始參考vue ztree 結合使用中的辦法:
項目build的時候自動加載jquery,並且輸出到jQuery中
new webpack.ProvidePlugin({ jQuery:'jquery', $:'jquery', })
在 npm run dev
之前,先build一下,解決了報錯 jQuery is not defined
的問題。
但是,重點來了,本地沒問題,打包發佈到正式環境依然報錯jQuery is not defined
,這就奇怪了,於是搜了很多解決報錯jQuery is not defined
的文章,各種方法試了很多,依然是報錯,最後,其中一篇Webpack引入jquery及其插件的幾種方法中的第四種方案,終於能成功解決了,本地運行和發佈到正式環境都沒再報錯了。
這裏貼一下解決方案:
此方法只依賴於自己,完全不需要任何其他插件與加載器,創建jquery的包裝對象jquery-vendor.js import $ from 'jquery' window.$ = $ window.jQuery = $ export default $ 以後引用jquery時指向jquery-vendor.js import $ from '../assets/jquery-vendor.js' import 'jquery-ui' // 此時UI的方法全部可用,如果需要引用bootstrap,可參照此方法 爲了調用方便,可在webpack配置文件中創建jquery-vendor.js的別名 alias: { jquery : 'src/assets/jquery-vendor.js' // 將其指向jquery-vendor.js所在位置 } --------------------- 作者:蟻方陣 來源:CSDN 原文:https://blog.csdn.net/yiifaa/article/details/51916560 版權聲明:本文爲博主原創文章,轉載請附上博文鏈接!
相關參考
vue ztree 結合使用
Webpack引入jquery及其插件的幾種方法
“jQuery/$ is not defined” 解決方法