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 ...
随机推荐
- [设计模式]<<设计模式之禅>>工厂方法模式
1 女娲造人的故事 东汉<风俗通>记录了一则神话故事:“开天辟地,未有人民,女娲搏黄土做人”,讲述的内容就是大家非常熟悉的女娲造人的故事.开天辟地之初,大地上并没有生物,只有苍茫大地,纯粹 ...
- 关于FastStone Capture输入中文出现乱码.
关于FastStone Capture 中输入中文出现乱码. 根据我的使用,公司用的生产机是英文操作系统,这个时候用FSCapture输入中文就是乱码.英文是正常的. 自己的机器是中文的.输入中文和英 ...
- HDOJ2021发工资咯：）
发工资咯:) Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- 北大ACM(POJ1005-I Think I Need a Houseboat)
Question:http://poj.org/problem?id=1005问题点:计算半圆面积及向上取整. Memory: 256K Time: 0MS Language: C++ Result: ...
- firebug调试js时提示调试器未激活处理办法
firebug是web开发中最常用的分析调试软件,不过我今天使用在调试百度在线编辑器UEditor时一直提示调试器未激活. 从使用经验来看不应该啊,我都下了断点了为什么会提示调试器未激活呢!多次载入网 ...
- 学习 .net 的一些主要网站
学习 .net 的一些主要网站 来自 http://www.cnblogs.com/trymybest121/articles/500176.html http://msdn.microsoft. ...
- 移动端高清、多屏适配方案 [来源：http://div.io/topic/1092]
Lovesueee 发布于 8 月前 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视 ...
- H5API——Canvas
http://item.jd.com/11241807.html HTML5移动Web开发实战http://item.jd.com/10982275.html HTML5程序设计(第2版)http:/ ...
- [GeekBand] STL与泛型编程(1)
在C++语法的学习过程中,我们已经对模板有了基本的了解.泛型编程就是以模板为工具的.泛化的编程思想.本篇文章介绍了一些在之前的文章中没有涉及到的一些模板知识.泛型编程知识和几种容器.关于模板的一些重复 ...
- Linux C 程序 指针数组和二级指针(TEN)
指针数组和二级指针 #include<stdio.h> int main(){ ] = {,,,,}; ], i; int **pp = p; //使p指针数组指向每一个a ; i < ...