<template>
<div class="wrapper">
<pop-nav :nav-list="navList"></pop-nav>
<pop-title>{{$t("store.shopCategory.title")}}</pop-title>
<div class="btn-group">
<pop-button type="danger">{{ $t("store.shopCategory.btnDelete") }}</pop-button>
<pop-button type="primary">{{ $t("store.shopCategory.btnExpandAll") }}</pop-button>
<pop-button type="primary">{{ $t("store.shopCategory.btnCollapseAll") }}</pop-button>
</div>
<div class="category-title">
<div class="left-title">{{ $t("store.shopCategory.catetoryTitle") }}</div>
<div class="right-title">{{ $t("store.shopCategory.addSubCategoryTitle") }}</div>
</div>
<div class="category-tree-wrapper">
<ul id="ul_shop_category_tree" class="ztree"></ul>
</div>
<div class="add-category">
<pop-button type="primary">{{ $t("store.shopCategory.btnAddCategory") }}</pop-button>
</div>
<div class="text-center">
<pop-button type="primary">{{ $t("store.shopCategory.btnSave") }}</pop-button>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import popNav from "components/common/PopNav";
import popTitle from "components/common/PopTitle";
import popButton from "components/common/PopButton";
import "ztree/css/zTreeStyle/zTreeStyle.css";
import $ from "jquery";
import "ztree/js/jquery.ztree.all.min";
// const HIDDEN_NODE_NAME = "-9999999999";
export default {
data () {
return {
cateList: [{
"children": [{
"id": 886,
"name": "new subcategory1"
}, {
"id": 887,
"name": "new subcategory2"
}],
"id": 885,
"name": "new main category1",
"shopId": 125
}, {
"children": [{
"id": 889,
"name": "new subcategory3"
}, {
"id": 890,
"name": "new subcategory4"
}],
"id": 888,
"name": "new main category2",
"shopId": 125
}, {
"children": [{
"id": 892,
"name": "new subcategory5"
}, {
"id": 893,
"name": "new subcategory6"
}],
"id": 891,
"name": "new main category3",
"shopId": 125
}, {
"children": [{
"id": 895,
"name": "new subcategory7"
}, {
"id": 896,
"name": "new subcategory8"
}],
"id": 894,
"name": "new main category4",
"shopId": 125
}, {
"children": [{
"id": 898,
"name": "new subcategory9"
}, {
"id": 899,
"name": "new subcategory10"
}],
"id": 897,
"name": "new main category5",
"shopId": 125
}]
};
},
mounted () {
this._initTreeData();
},
methods: {
_initTreeData () {
if (this.cateList) {
var setting = {
edit: {
drag: {
autoExpandTrigger: true
// prev: dropPrev,
// inner: dropInner,
// next: dropNext
},
enable: true,
showRemoveBtn: true,
showRenameBtn: true
},
data: {
key: {
children: "children"
}
},
callback: {
// beforeDrag: beforeDrag,
// beforeRemove: beforeRemove,
// beforeRename: beforeRename,
// onRemove: onRemove
},
view: {
showTitle: false,
showIcon: false,
nameIsHTML: true
}
};
let ztree = $.fn.zTree.init($("-sharpul_shop_category_tree"), setting, this.cateList);
ztree.expandAll(true);
let ztreeNode = ztree.getNodesByParam("level", 0);
// var hiddenTreeNode;
for (let i = 0, len = ztreeNode.length; i < len; iPP) {
let aObj = $("-sharp" + ztreeNode[i].tId + "_a");
aObj.append("<span name="span_add_category" class="add-category">+Add SubCategory</span>");
}
}
}
},
components : {
popNav, popTitle, popButton
},
computed: {
navList () {
return [
this.$t("store.shopCategory.navFirstLevel"),
this.$t("store.shopCategory.navSecondLevel"),
this.$t("store.shopCategory.navThirdLevel")
];
}
}};
< / script >
< style lang= "stylus" rel= "stylesheet/stylus" scoped >
.wrapper
.btn-group
padding: 29px 21px
.category-title
border-top: 1px solid -sharpe2e2e2
border-bottom: 1px solid -sharpe2e2e2
background-color: -sharpf4f5f9
height: 44px
line-height: 44px
color: -sharp333
font-size: 14px
font-weight: bold
.left-title
display: inline-block
width: 553px
padding-left: 33px
.right-title
display: inline-block
.category-tree-wrapper
padding: 12px 33px
border-bottom: 1px solid -sharpe2e2e2
/*ztree*/
.ztree
width: 500px
padding: 0
overflow: visible
& *
box-sizing: border-box;
font-size: 20px;
font-weight: 700;
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","",Arial,sans-serif !important;
.ztree li
background-color: red
li span.button
background-image: url("./zTree_standard_category.png") !important
&.root_close,
&.roots_close,
&.center_close,
&.bottom_close,
&.noline_close
width: 7px
height: 12px
background-position: -3px -8px
&.root_docu,
&.roots_docu,
&.center_docu,
&.bottom_docu,
&.noline_docu
margin-top: 14px
margin-right: 7px
width: 18px
height: 18px
background-position: -3px -64px
li span.button.edit
width: 19px;
height: 17px;
background-position: -3px -43px;
.ztree li span.button.root_open,
.ztree li span.button.roots_open,
.ztree li span.button.center_open,
.ztree li span.button.bottom_open,
.ztree li span.button.noline_open {
width: 11px;
height: 7px;
background-position: -3px 0;
}
.ztree li span.button.remove {
width: 21px;
height: 21px;
background-position: 0 -21px;
}
.ztree li span.node_name{
display: inline-block;
width: 390px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ztree li ul.line {
background: none;
}
.ztree li a {
position: relative;
border: 1px solid -sharpe2e2e2;
width: 420px;
height: 34px !important;
line-height: 34px;
margin-top: 12px !important;
padding: 0 15px;
}
.ztree li span {
line-height: 34px;
}
.ztree li span.button.ico_close,
.ztree li span.button.ico_open {
vertical-align: middle !important;
}
.ztree li span.button.edit {
position: absolute;
top: -8px;
right: 18px;
}
.ztree li span.button.remove {
position: absolute;
right: -10px;
top: -10px;
margin: 0;
}
.ztree li a.curSelectedNode,
.ztree li a.curSelectedNode_Edit {
background-color: -sharpfff;
border: 1px solid -sharpe2e2e2;
}
.ztree li span.add {
margin-top: -3px;
background-position: -145px 0;
}
.ztree li a input.rename {
position: absolute;
left: 0;
top: 0;
padding: 0 15px;
height: 32px;
width: 418px;
margin: 0;
font-size: 14px;
border: none;
}
.ztree li a input:focus.rename {
padding: 0 15px;
}
.ztree li span.add-category {
position: absolute;
left: 504px;
color: -sharp0664b6;
font-size: 14px;
}
.add-category
padding: 20px 26px< / style >
for example:
li
background-color: red
li span.button
background-image: url("./zTree_standard_category.png") !importantdid not take effect. I don"t know why