json tree
//
'
return div;
},
setCss: function () {
var s = this.el.style;
s.position = 'absolute';
s.top = '200px';
s.left = '400px';
s.width = '300px';
s.height = '300px';
s.display = 'none';
s.background = '#e5b6f0';
s.color = 'white';
},
addEvent: function () {
me = this;
this.ok.onclick = function (e) {
me.name = me.val.value;
me.close();
}
this.cancel.onclick = function (e) {
me.close();
}
},
show: function () {
this.el.style.zIndex = 999;
this.val.value = '';
this.title.innerText = 'add a ' + this.type;
this.el.style.display = 'block';
},
hide: function () {
this.el.style.zIndex = 0;
this.el.style.display = 'none';
},
close: function () {
this.name = this.name || 'unName';
this.hide();
this.onClose && this.onClose.call(this, this.name);
},
init: function () {
this.setCss();
this.ok = this.el.querySelector('#ok');
this.cancel = this.el.querySelector('#cancel');
this.val = this.el.querySelector('#name');
this.title = this.el.querySelector('#title');
this.addEvent();
this.render();
},
render: function () {
document.body.appendChild(this.el);
}
}
//构造函数
function Menu(cfg) {
this.data = cfg.data || [];
this.parent = cfg.parent || document.body;
this.el = this.createBase();
this.itemClick = cfg.itemClick;
this.init();
}
//增加原型方法
Menu.prototype = {
createBase: function () {
var el = document.createElement('div');
el.className = 'j-menu';
this.el = el;
this.setCss();
return el;
},
setCss: function () {
var s = this.el.style;
s.position = 'absolute';
s.zIndex = 0;
s.background = '#b837d6';
s.color = 'white';
s.display = 'none';
s.padding = '10px';
s.border = '1px solid black';
s.borderRadius = '5px';
},
createItem: function (type) {
var item = document.createElement('div');
item.className = 'menu-item';
item.setAttribute('data-type', type);
item.innerText = type;
return item;
},
addEvent: function () {
var me = this;
this.el.onclick = function (e) {
var dom = e.target;
var fileType = dom.dataset['type'];
if (dom.className.indexOf('menu-item') != -1) {
if (!me.window) {
me.addWindow(fileType, function (fileName) {
//this is popup window
if (this.type != 'folder') {
fileName += ('.' + this.type);
}
if (me.itemClick) {
me.itemClick.call(me, e, this.type, fileName, fileName);
}
});
} else {
me.window.type = fileType;
me.window.show();
}
}
}
},
show: function (position) {
this.el.style.top = position.y + 'px';
this.el.style.left = position.x + 'px';
this.el.zIndex = 999;
this.el.style.display = 'block';
},
hide: function () {
this.el.style.zIndex = 0;
this.el.style.display = 'none';
},
destroy: function () {
this.parent.removeChild(this.el);
},
addWindow: function (fileType, fn) {
this.window = new windows({
type: fileType,
onClose: function (name) {
fn && fn.call(this, name);
}
});
this.window.show();
},
init: function (cfg) {
//添加点击事件
this.addEvent();
//渲染到dom
this.render();
},
render: function () {
var me = this;
Array.prototype.forEach.call(this.data, function (item) {
me.el.appendChild(me.createItem(item.type));
})
this.parent.appendChild(this.el);
}
}
//constructor
function Tree(cfg) {
this.el = this.createBase();
this.parent = document.querySelector(cfg.parent) || document.body;
this.data = cfg.data || [];
this.mdata = cfg.mdata || [];
this.dragStart = cfg.dragStart;
this.structureIndex = 0;
this.init();
}
//增加原型方法
Tree.prototype = {
getUuid: function () {
var S4 = function () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
},
//create base html
createBase: function () {
var c = document.createElement('div');
c.className = 'j-tree';
return c;
},
//add dom to document
render: function () {
var me = this, el = [];
Array.prototype.forEach.call(this.data, function (item, index) {
//一个类别下得节点
var node = me.createNode(item.node, item.id),
area = node.getDom(),
//一个类别下面所有的子节点
leafColl = node.getChildC();
//遍历所有节点,并添加到 leafColl 上
me.DG(leafColl, item.items, item.node);
me.el.appendChild(area);
});
this.parent.appendChild(this.el);
},
//update data structure
addData: function (target, data) {
var me = this;
for (var i = 0, len = target.length; i ' + text;
area.appendChild(a);
area.appendChild(leafColl);
return {
getChildC: function () {
return leafColl;
},
getDom: function () {
return area;
}
};
},
//递归
DG: function DG(parent, items, type) {
var me = this;
Array.prototype.forEach.call(items, function (leaf) {
if (!leaf.items) {
var el = me.createLeaf(leaf.name, leaf.text, type).getDom();
parent.appendChild(el);
} else {
var node = me.createNode(leaf.node, leaf.id),
dom = node.getDom();
parent.appendChild(dom);
me.DG.call(me, node.getChildC(), leaf.items, leaf.node);
}
});
},
//create leaf node
createLeaf: function (name, text, type) {
var a = document.createElement('div');
a.className = 'leaf-dom';
a.innerText = text;
a.id = name + '-' + Math.floor(Math.random() * 100000);
a.setAttribute('data-type', type);
a.setAttribute('data-name', name);
a.setAttribute('draggable', true);
a.uuid = this.getUuid();
return {
add: function (dom) {
a.appendChild(dom);
return this;
},
getDom: function () {
return a;
}
}
},
//add click and drag event
addEvent: function () {
var me = this;
this.el.onclick = function (e) {
var cls = e.target.className;
if (cls) {
if (cls == 'node-dom') {
me.nodeClick(e.target);
}
}
}
this.el.ondragstart = function (e) {
var cls = e.target.className;
if (cls) {
if (cls == 'leaf-dom') {
me.leafEventHandler.call(me, e);
}
}
}
this.el.addEventListener('contextmenu', function (e) {
me.addMenuEvent(e);
}, false);
},
//add context menu event
addMenuEvent: function (e) {
// this is a tree object
e.preventDefault();
if (e.target.className.indexOf('node-dom') != -1 || e.target.className.indexOf('middle-dom') != -1) {
this.menu.target = e.target.parentNode.querySelector('.leaf-container');
this.menu.node = e.target;
this.menu.show({x: e.x, y: e.y});
}
},
//add a menu object as a property
addMenu: function () {
// this is a tree object
var me = this, mdata = this.mdata;
this.menu = new Menu({
data: mdata,
itemClick: function (e, type, name, text) {
//this is a menu object
//e is menu click event params
//node 弹出menu 时，点击的 tree node
//target 弹出menu时，点击的tree node 下面的item container
var data = {
pid: this.node.dataset['id']
}, dom;
if (type == 'folder') {
data.node = name;
data.items = [];
data.type = 'folder';
var id = me.getUuid()
data.id = id;
dom = me.createNode(text, id).getDom();
} else {
data.name = name;
data.text = text;
data.type = 'file';
dom = me.createLeaf(name, text, type).getDom();
}
this.hide();
this.target.appendChild(dom);
me.addData(me.data, data);
}
});
},
//leaf node drag
leafEventHandler: function (e) {
if (this.dragStart) {
this.dragStart(e);
}
},
//node click (expand and collapse)
nodeClick: function (dom) {
var el = dom.querySelector('i'),
cls = el.className;
if (cls.indexOf('collapse') != -1) {
el.className = cls.replace('collapse', 'expand');
dom.parentNode.querySelector('.leaf-container').style.display = 'block';
} else {
el.className = cls.replace('expand', 'collapse');
dom.parentNode.querySelector('.leaf-container').style.display = 'none';
}
},
//initialize
init: function () {
//添加tree事件
this.addEvent();
this.addMenu();
this.render();
},
//get structure of the tree
getStructure: function () {
var structure = [];
//传进方法,去填充
this.getSingle(this.data, '', structure);
return structure;
},
//获取数据结构,并输出tree结构
getSingle: function (data, url, structure) {
var me = this;
var data = data || this.data;
var url = url || '';
for (var i = 0, len = data.length; i 0) {
this.getSingle(items, url + (data[i].node + '/'), structure);
} else {//空文件夹
structure.push(url + data[i].node);
}
} else {
structure.push(url + data[i].text);
}
}
}
}
// ]]>
//
json tree的更多相关文章
- JavaScript递归方法 生成 json tree 树形结构数据
//递归方法 生成 json tree 数据 var getJsonTree = function(data, parentId) { var itemArr = []; for (var i = 0 ...
- easyui 异步json tree跨域访问问题解决
最近在用easyui中的异步tree时发现了跨域访问问题,我们都知道jquery ajax提供get请求的跨域访问.所以解决easyui tree跨域访问的问题便是将数据通过jquery ajax将数 ...
- 路径字符串数据转化为树型层级对象，path to json tree
由于项目中使用了react 及 ant-design ,在使用tree树型控件时,需要 类似下面的数据, const treeData = [{ title: '0-0', key: '0-0', c ...
- jackson读取json tree讲解
待读取的json文本: {"data":{"count":4031,"list":[{"symbol":"SH ...
- easyUI中tree的简单使用
一.在JS中的代码 $('#tt').tree({ url: baseCtx + 'lib/easyui-1.4/demo/tree/tree_data1.json',//tree数据的来源,json ...
- A quick tour of JSON libraries in Scala
A quick tour of JSON libraries in Scala Update (18.11.2015): added spray-json-shapeless libraryUpdat ...
- JAVA 根据数据库表内容生产树结构JSON数据
1.利用场景 组织机构树,通常会有组织机构表,其中有code(代码),pcode(上级代码),name(组织名称)等字段 2.构造数据(以下数据并不是组织机构数据,而纯属本人胡编乱造的数据) List ...
- Java构造和解析Json数据的两种方法详解二
在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Jso ...
- Java构造和解析Json数据的两种方法详解二——org.json
转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/24/3096437.html 在www.json.org上公布了很多JAVA下的jso ...
随机推荐
- hdu 4607 树的直径
思路:利用dfs遍历整棵树,找出最长子树与次长子树,两者的和最大就是直径. 若k值小于直径就输出k-1,否则输出(k-d-1)*2+d; #include<iostream> #inclu ...
- MyBatis(3.2.3) - Mapped statements: The INSERT statement, Autogenerated keys
We can use the useGeneratedKeys and keyProperty attributes to let the database generate the auto_inc ...
- MyBatis(3.2.3) - One-to-one mapping using nested ResultMap
We can get Student along with the Address details using a nested ResultMap as follows: <resultMap ...
- Ajax B/S 聊天工具txt文件保存
打算做一个两个或多个网页之间交流的功能,思路是多个页面聊天的内容存放到一个文件里,每个页面都有提交聊天功能,当提交聊天信息时保存到上面那个文件里, 在每个也页面里放一个定时器,每秒钟获取聊天文件里的记 ...
- SQL中CONVERT()函数用法详解
SQL中CONVERT函数格式: CONVERT(data_type,expression[,style]) 参数说明: expression 是任何有效的 Microsoft® SQL Server ...
- PHP的语言规范
PHP的语言规范: 1.php中的变量名区分大小写,但是函数名,类名,方法名,不区分大小写,但建议区分大小写 2.php代码必须书写在<?php?>(php标签),开启标记(<?ph ...
- bzoj3405：[Usaco2009 Open]Grazing2 移动牛棚
思路:首先因为要让距离尽量大,所以奶牛1一定在1号牛棚,奶牛n一定在s号牛棚,然后考虑dp. 因为总距离为s-1,然后要使长度为d的段数尽量多,那么剩下的一定就是d+1的段数,也就是s-(n-1)*d ...
- XPOSED-LUA
转载说明 本篇文章可能已经更新,最新文章请转:http://www.sollyu.com/xposed-lua/ 说明 Xposed Lua Module 是一个Xposed的模块,他有下面的优点 本 ...
- HDU1857题解(逆向思维trie)
题目link:http://acm.hdu.edu.cn/showproblem.php?pid=1857 先简述一下题目: 有一个RXC的字母矩形,R,C在500内,要匹配m个单词,m在100000 ...
- ◆◆◆◆◆◆◆◆◆◆◆linux下软件包的管理◆◆◆◆◆◆◆◆◆◆◆◆◆◆
查看与制定的路径名相匹配的软件包 [root@localhost certs]# which ls alias ls='ls --color=auto' /bin/ls [root@localhost ...