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 ...
随机推荐
- MSP430常见问题之通信类
Q1: 430 串口中,有个R/D 控制线,在接收上位机的数据,但本身的数据有无发送完毕不知道啊,什么时候才可置低R/d 位来接收数据啊?好像430 没有发送完中断标志A1:字节主动发送,一般都能发出 ...
- 通过Bresenham算法实现完成矢量线性多边形向栅格数据的转化
1.实验目的与要求 目的:通过本次实验,完成矢量线性多边形向栅格数据的转化过程: 要求:采用VC++6.0实现. 2.实验方法 采用Bresenham算法实现 3.实验材料 直线的定义:y = x/3 ...
- Map集合的四种遍历方式
很久以前写的代码,和上一个做比较吧!便于以后查看 import java.util.HashMap; import java.util.Iterator; import java.util.Map; ...
- Ehcache(2.9.x) - API Developer Guide, Basic Caching
Creating a CacheManager All usages of the Ehcache API start with the creation of a CacheManager. The ...
- java开发：分享一下MemCached的使用
在项目开发中,有些不经常修改的数据,我们通常都会选择使用缓存.其中一种方式,就是memcached. windows系统中,我们需要下载并安装memcached. 地址如:D:\memcached\m ...
- SQL 行转列
---1.最简单的行转列/* 问题:假设有张学生成绩表(tb)如下:姓名 课程 分数张三 语文 74张三 数学 83张三 物理 93李四 语文 74李四 数学 84李四 物理 94 想变成(得到如下结 ...
- Oracle 12c Dataguard 数据库恢复
http://allthingsoracle.com/rolling-forward-a-physical-standby-database-using-the-recover-command/ 当主 ...
- Cocos2d-x实例：设置背景音乐与音效-HelloWorld场景实现
HelloWorld场景就是游戏中的主菜单场景.HelloWorld.h文件代码如下: #define __HELLOWORLD_SCENE_H__ #include "cocos2d.h& ...
- MVC 生成PDf表格并插入图片
最近做的项目中有一个功能,将最终的个人信息生成PDF表格,并插入图片.对于没接触过的程序员来说回一片茫然,网上有多种生成PDf的方法,我给大家介绍一下我认为比较简单,好操作的一种. iTextShar ...
- 菜鸟级asp.net 与ms sql server数据库打交道的简单总结
using System.Data.SqlClient;using System.Data; 上面是必须的 下面说的都是用存储过程 首先是webconfig里面的连接字符串: <connecti ...