Compare commits

...

9 Commits
1.0.0 ... 1.0.5

Author SHA1 Message Date
ayou
fc5b9f58ff 1.0.5 2018-02-11 21:37:56 +08:00
ayou
c846f7a9c1 add node click event 2018-02-11 21:35:53 +08:00
ayou
1580a3524d 1.0.4 2018-02-06 21:58:05 +08:00
ayou
6812b1eb30 remove jquery 2018-02-06 21:51:45 +08:00
youxingzhi
bbbe58a4e0 1.0.3 2018-01-05 10:59:54 +08:00
youxingzhi
97f0db4343 #3 add dragDisabled params 2018-01-05 10:52:09 +08:00
youxingzhi
527bae5bdc 1.0.2 2017-08-31 18:27:39 +08:00
youxingzhi
dce8f74717 #1 2017-08-31 18:25:47 +08:00
ayou
9f286fde0d 1.0.1 for update npm 2017-07-23 11:08:20 +08:00
8 changed files with 198 additions and 115 deletions

File diff suppressed because one or more lines are too long

View File

@@ -78,7 +78,7 @@
</span>
New Treenode
</button>
<vue-tree-list :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
<vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
</div>
<div class="container">
@@ -127,6 +127,7 @@
name: 'Node 1',
id: 1,
pid: 0,
dragDisabled: true,
children: [
{
name: 'Node 1-2',
@@ -139,7 +140,8 @@
{
name: 'Node 2',
id: 3,
pid: 0
pid: 0,
dragDisabled: true
},
{
name: 'Node 3',
@@ -155,24 +157,25 @@
},
addNode: function () {
var node = new VueTreeList.TreeNode('new node', false)
var node = new VueTreeList.TreeNode({ name: 'new node', isLeaf: false })
if (!this.data.children) this.data.children = []
this.data.addChildren(node)
},
getNewTree: function () {
const vm = this
var vm = this
function _dfs (oldNode) {
let newNode = {}
var newNode = {}
newNode.name = oldNode.name
newNode.pid = oldNode.pid
newNode.isLeaf = oldNode.isLeaf
newNode.id = oldNode.id
for (var k in oldNode) {
if (k !== 'children' && k !== 'parent') {
newNode[k] = oldNode[k]
}
}
if (oldNode.children && oldNode.children.length > 0) {
newNode.children = []
for (let i = 0, len = oldNode.children.length; i < len; i++) {
for (var i = 0, len = oldNode.children.length; i < len; i++) {
newNode.children.push(_dfs(oldNode.children[i]))
}
}
@@ -180,6 +183,10 @@
}
vm.newTree = _dfs(vm.data)
},
onClick(model) {
console.log(model)
}
}
})

View File

@@ -1,7 +1,7 @@
{
"name": "vue-tree-list",
"version": "1.0.0",
"description": "A vue component for tree structure.",
"version": "1.0.5",
"description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
"main": "dist/vue-tree-list.min.js",
"scripts": {
"test": "karma start --single-run",
@@ -23,9 +23,6 @@
"url": "https://github.com/ParadeTo/vue-tree-list/issues"
},
"homepage": "https://github.com/ParadeTo/vue-tree-list#readme",
"dependencies": {
"jquery": "^3.2.1"
},
"devDependencies": {
"autoprefixer": "^6.4.0",
"babel-core": "^6.0.0",

View File

@@ -10,7 +10,7 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
```javascript
<button @click="addNode">Add Node</button>
<vue-tree-list :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
<vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
<button @click="getNewTree">Get new tree</button>
<pre>
{{newTree}}
@@ -23,12 +23,15 @@ export default {
},
data () {
return {
isMobile: isMobile(),
record: null,
newTree: {},
data: new Tree([
data: new VueTreeList.Tree([
{
name: 'Node 1',
id: 1,
pid: 0,
dragDisabled: true,
children: [
{
name: 'Node 1-2',
@@ -41,7 +44,8 @@ export default {
{
name: 'Node 2',
id: 3,
pid: 0
pid: 0,
dragDisabled: true
},
{
name: 'Node 3',
@@ -52,25 +56,30 @@ export default {
}
},
methods: {
getTreeChange: function () {
this.record = Object.assign({}, VueTreeList.Record)
},
addNode: function () {
var node = new TreeNode('new node', false)
var node = new VueTreeList.TreeNode({ name: 'new node', isLeaf: false })
if (!this.data.children) this.data.children = []
this.data.addChildren(node)
},
getNewTree: function () {
const vm = this
var vm = this
function _dfs (oldNode) {
let newNode = {}
var newNode = {}
newNode.name = oldNode.name
newNode.pid = oldNode.pid
newNode.isLeaf = oldNode.isLeaf
newNode.id = oldNode.id
for (var k in oldNode) {
if (k !== 'children' && k !== 'parent') {
newNode[k] = oldNode[k]
}
}
if (oldNode.children && oldNode.children.length > 0) {
newNode.children = []
for (let i = 0, len = oldNode.children.length; i < len; i++) {
for (var i = 0, len = oldNode.children.length; i < len; i++) {
newNode.children.push(_dfs(oldNode.children[i]))
}
}
@@ -78,11 +87,45 @@ export default {
}
vm.newTree = _dfs(vm.data)
},
onClick(model) {
console.log(model)
}
}
}
```
# props
default-tree-node-name: Default name for new treenode.
default-leaf-node-name: Default name for new leafnode.
**default-tree-node-name**
Default name for new treenode.
**default-leaf-node-name**
Default name for new leafnode.
# events
**click**
```javascript
<vue-tree-list @click="onClick" ...
...
onClick(model) {
console.log(model)
}
...
```
# Forbid dragging
Use `dragDisabled` to forbid dragging:
```javascript
data: new Tree([
{
name: 'Node 1',
id: 1,
pid: 0,
dragDisabled: true,
...
```

View File

@@ -1,40 +1,50 @@
// used to record treenode's change
let Record = {}
// let Record = {}
// treenode's id
let nodeId = 1
/**
* Tree data struct
* Created by ayou on 2017/7/20.
* @param name: treenode's name
* @param isLeaf: treenode is leaf node or not
* @param id
* @param data: treenode's params
* name: treenode's name
* isLeaf: treenode is leaf node or not
* id: id
* dragDisabled: decide if it can be dragged
*/
const TreeNode = function (name, isLeaf, id) {
this.name = name
const TreeNode = function (data) {
const { id, isLeaf } = data
// this.name = name
this.id = (typeof id === 'undefined') ? ('new' + nodeId++) : id
this.parent = null
this.pid = null
// this.pid = null
this.children = null
this.isLeaf = !!isLeaf
}
TreeNode.prototype.updateRecordProperty = function () {
if (!Record[this.id]) {
Record[this.id] = {}
// other params
for (var k in data) {
if (k !== 'id' && k !== 'children' && k !== 'isLeaf') {
this[k] = data[k]
}
}
Record[this.id].name = this.name
Record[this.id].id = this.id
Record[this.id].pid = this.pid
Record[this.id].isLeaf = this.isLeaf
}
// TreeNode.prototype.updateRecordProperty = function () {
// if (!Record[this.id]) {
// Record[this.id] = {}
// }
//
// Record[this.id].name = this.name
// Record[this.id].id = this.id
// Record[this.id].pid = this.pid
// Record[this.id].isLeaf = this.isLeaf
// }
TreeNode.prototype.changeName = function (name) {
this.name = name
this.updateRecordProperty()
Record[this.id].modify = true
// this.updateRecordProperty()
// Record[this.id].modify = true
}
TreeNode.prototype.addChildren = function (children, isNew) {
@@ -48,10 +58,10 @@ TreeNode.prototype.addChildren = function (children, isNew) {
child.parent = this
child.pid = this.id
if (isNew) {
child.updateRecordProperty()
Record[child.id].add = true
}
// if (isNew) {
// child.updateRecordProperty()
// Record[child.id].add = true
// }
}
this.children.concat(children)
} else {
@@ -60,10 +70,10 @@ TreeNode.prototype.addChildren = function (children, isNew) {
child.pid = this.id
this.children.push(child)
if (isNew) {
child.updateRecordProperty()
Record[child.id].add = true
}
// if (isNew) {
// child.updateRecordProperty()
// Record[child.id].add = true
// }
}
}
@@ -73,8 +83,8 @@ TreeNode.prototype.remove = function () {
const index = parent.findChildIndex(this)
parent.children.splice(index, 1)
this.updateRecordProperty()
Record[this.id].remove = true
// this.updateRecordProperty()
// Record[this.id].remove = true
}
// remove child
@@ -121,10 +131,10 @@ TreeNode.prototype.moveInto = function (target) {
}
target.children.unshift(this)
this.updateRecordProperty()
Record[this.id].targetId = target.id
Record[this.id].move = true
Record[this.id].moveType = 'inside'
// this.updateRecordProperty()
// Record[this.id].targetId = target.id
// Record[this.id].move = true
// Record[this.id].moveType = 'inside'
}
TreeNode.prototype.findChildIndex = function (child) {
@@ -160,10 +170,10 @@ TreeNode.prototype.insertBefore = function (target) {
const pos = target.parent.findChildIndex(target)
target.parent.children.splice(pos, 0, this)
this.updateRecordProperty()
Record[this.id].targetId = target.id
Record[this.id].move = true
Record[this.id].moveType = 'before'
// this.updateRecordProperty()
// Record[this.id].targetId = target.id
// Record[this.id].move = true
// Record[this.id].moveType = 'before'
}
TreeNode.prototype.insertAfter = function (target) {
@@ -172,14 +182,14 @@ TreeNode.prototype.insertAfter = function (target) {
const pos = target.parent.findChildIndex(target)
target.parent.children.splice(pos + 1, 0, this)
this.updateRecordProperty()
Record[this.id].targetId = target.id
Record[this.id].move = true
Record[this.id].moveType = 'after'
// this.updateRecordProperty()
// Record[this.id].targetId = target.id
// Record[this.id].move = true
// Record[this.id].moveType = 'after'
}
function Tree(data) {
this.root = new TreeNode('root', false, 0)
this.root = new TreeNode({ name: 'root', isLeaf: false, id: 0 })
this.initNode(this.root, data)
return this.root
}
@@ -188,7 +198,7 @@ Tree.prototype.initNode = function (node, data) {
for (let i = 0, len = data.length; i < len; i++) {
var _data = data[i]
var child = new TreeNode(_data.name, _data.isLeaf, _data.id)
var child = new TreeNode(_data)
if (_data.children && _data.children.length > 0) {
this.initNode(child, _data.children)
}
@@ -198,4 +208,4 @@ Tree.prototype.initNode = function (node, data) {
exports.Tree = Tree
exports.TreeNode = TreeNode
exports.Record = Record
// exports.Record = Record

View File

@@ -6,10 +6,8 @@
@dragenter="dragEnterUp"
@dragover='dragOverUp'
@dragleave="dragLeaveUp"></div>
<div class='tree-node' :id='model.id' :class="{'active': isDragEnterNode}"
draggable="true"
@click=""
:draggable="!model.dragDisabled"
@dragstart='dragStart'
@dragover='dragOver'
@dragenter='dragEnter'
@@ -17,7 +15,8 @@
@drop='drop'
@dragend='dragEnd'
@mouseover='mouseOver'
@mouseout='mouseOut'>
@mouseout='mouseOut'
@click.stop='click'>
<span class="caret icon is-small" v-if="model.children && model.children.length > 0">
<i class="vue-tree-icon" :class="caretClass" @click.prevent.stop="toggle"></i>
</span>
@@ -83,9 +82,10 @@
<script>
import { Tree, TreeNode } from './Tree.js'
import $ from 'jquery'
import { addHandler, removeHandler } from './tools.js'
let fromComp = null
let fromComp = ''
export default {
data: function () {
return {
@@ -126,7 +126,7 @@
},
mounted () {
const vm = this
$(window).on('keyup', function (e) {
addHandler(window, 'keyup', function (e) {
// click enter
if (e.keyCode === 13 && vm.editable) {
vm.editable = false
@@ -134,7 +134,7 @@
})
},
beforeDestroy () {
$(window).off('keyup')
removeHandler(window, 'keyup')
},
methods: {
updateName (e) {
@@ -151,7 +151,8 @@
setEditable () {
this.editable = true
this.$nextTick(() => {
$(this.$refs.nodeInput).trigger('focus')
this.$refs.nodeInput.focus()
// fireFocusEvent(this.$refs.nodeInput)
})
},
@@ -173,18 +174,31 @@
this.isHover = false
},
click() {
var node = this.$parent
var clickModel = this.model
while (node._props.model.name !== 'root') {
node = node.$parent
}
node.$emit('click', clickModel)
},
addChild(isLeaf) {
const name = isLeaf ? this.defaultLeafNodeName : this.defaultTreeNodeName
this.expanded = true
var node = new TreeNode(name, isLeaf)
var node = new TreeNode({ name, isLeaf })
this.model.addChildren(node, true)
},
dragStart(e) {
fromComp = this
e.dataTransfer.effectAllowed = 'move'
return true
if (!this.model.dragDisabled) {
fromComp = this
// for firefox
e.dataTransfer.setData("data","data");
e.dataTransfer.effectAllowed = 'move'
return true
}
return false
},
dragEnd(e) {
fromComp = null
@@ -194,20 +208,21 @@
return true
},
dragEnter(e) {
if (this.model.isLeaf) {
return
}
if (!fromComp) return
if (this.model.isLeaf) return
this.isDragEnterNode = true
},
dragLeave(e) {
this.isDragEnterNode = false
},
drop(e) {
if (!fromComp) return
fromComp.model.moveInto(this.model)
this.isDragEnterNode = false
},
dragEnterUp () {
if (!fromComp) return
this.isDragEnterUp = true
},
dragOverUp (e) {
@@ -215,14 +230,17 @@
return true
},
dragLeaveUp () {
if (!fromComp) return
this.isDragEnterUp = false
},
dropUp () {
if (!fromComp) return
fromComp.model.insertBefore(this.model)
this.isDragEnterUp = false
},
dragEnterBottom () {
if (!fromComp) return
this.isDragEnterBottom = true
},
dragOverBottom (e) {
@@ -230,9 +248,11 @@
return true
},
dragLeaveBottom () {
if (!fromComp) return
this.isDragEnterBottom = false
},
dropBottom () {
if (!fromComp) return
fromComp.model.insertAfter(this.model)
this.isDragEnterBottom = false
}

View File

@@ -4,4 +4,4 @@
exports.VueTreeList = require('./VueTreeList.vue')
exports.TreeNode = require('./Tree.js').TreeNode
exports.Tree = require('./Tree.js').Tree
exports.Record = require('./Tree.js').Record
// exports.Record = require('./Tree.js').Record

31
src/tools.js Normal file
View File

@@ -0,0 +1,31 @@
/**
* Created by ayou on 18/2/6.
*/
var handlerCache
exports.addHandler = function(element, type, handler) {
handlerCache = handler
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
exports.removeHandler = function (element, type) {
if (element.removeEventListener) {
element.removeEventListener(type, handlerCache, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handlerCache);
} else {
element["on" + type] = null;
}
}
// exports.fireFocusEvent = function (ele) {
// var event = new FocusEvent()
// ele.dispatch(event)
// }