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 ...
随机推荐
- JAVA网络编程常见问题
一. 网络程序运行过程中的常见异常及处理 第1个异常是 java.net.BindException:Address already in use: JVM_Bind. 该异常发生在服务器端进行new ...
- Jersey(1.19.1) - Client API, Testing services
The Jersey client API was originally developed to aid the testing of the Jersey server-side, primari ...
- 在VS2010中使用附加进程的方式调试IIS中的页面
h3{background:#333333; } 准备篇-配置IIS环境 在发布网站之前,需要安装iis环境! 之后点击确定即可! 发布网站至IIS-附加到进程调试 1. 用VS2010将 ...
- JavaScript之图片轮换
<!doctype html> <title>javascript图片轮换</title> <meta charset="utf-8"/& ...
- 给 Android 初学者的 Gradle 知识普及
给 Android 初学者的 Gradle 知识普及:http://gold.xitu.io/entry/5778f8bd165abd0054b443b0/promote?utm_source=bai ...
- iOS - 视图与手势(UIview & UIGestureRecognizer)
01 UIView视图的基本使用 --- 在根视图中添加2个UIView视图 //视图确实加载时调用 - (void)viewDidLoad { [super viewDidLoad]; // Do ...
- 深入理解JavaScript中的this关键字
1. 一般用处 2. this.x 与 apply().call() 3. 无意义(诡异)的this用处 4. 事件监听函数中的this 5. 总结 在JavaScript中this变量是一个令人难以 ...
- jQuery中的getter和setter方法
1.attr()方法是jQuery中用于HTML属性的getter/setter.一个相关函数是removeAttr(). 2.css()方法和attr()方法很类似,只是css()方法作用于元素的c ...
- JSON-lib框架，JAVA对象与JSON、XML之间的相互转换
Json-lib可以将Java对象转成json格式的字符串,也可以将Java对象转换成xml格式的文档,同样可以将json字符串转换成Java对象或是将xml字符串转换成Java对象. 一. 准备工作 ...
- 使用Script元素发送JSONP请求
// 根据指定URL发送一个JSONP请求 //然后把解析得到的相应数据传递给回调函数 //在URL中添加一个名为jsonp的查询参数,用于指定该请求的回调函数的名称 function getJSON ...