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 ...
随机推荐
- 显示创建一个表的SQL语句
显示创建数据库中包的语句,从而可以方便的对表的结构进行修改和复制(当然还有其他的方式) 显示表结构: 显示创建表语句: show create table tablename;
- poisspdf（so also poisscdf, poissfit, poissinv, poissrnd, poisstat, pdf.）
Poisson分布的累积概率值 命令:poisscdf 格式:poisscdf (k, Lambda) Poisson分布 在二项分布中,当n的值很大,p的值很小,而np又较适中时,用Poisson分 ...
- Redux你的Angular 2应用--ngRx使用体验
Angular2和Rx的相关知识可以看我的Angular 2.0 从0到1系列第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2 ...
- HTML+CSS3 纯代码实现转盘效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- js 重庆38区县 数组
data:[ {name: '九龙坡区', value: 20057}, {name: '渝北区', value: 27}, {name: '渝中区', value: 27}, {name: '万州区 ...
- C#winform MDI子窗体打开时内容显示不全
出现这种情况一般是 打开了多个MDI的子窗体,打开新窗体的时候关闭其他的子窗体就OK了, 具体代码: foreach (Form form in main.MdiChildren) ...
- 页面所有的button绑定同一个事件,点击不同的button赋值不同
<script type="text/javascript"> $(function(){ $("input[type='button']").cl ...
- Ubuntu 设定壁纸自动切换的shell脚本
升级到Ubuntu14.04后,感觉bug的确比12.04少多了.顶部任务栏支持半透明效果,所以整个桌面也看上去漂亮了很多.这样的桌面也是值得瞎捣鼓一下的,想到换壁纸,但是没找到设定动态更换壁纸的选项 ...
- apache和php扩展问题
1.redis扩展: windows下开发用的xampp集成的环境,想装个php-redis扩展,扩展的github地址: https://github.com/nicolasff/phpredis ...
- 几个好用的截取字符串的php函数分享
分享几个好用的PHP 截取字符串函数(支持gb2312和utf-8). 1.截取GB2312字符用的函数 <?php /** **截取中文字符串 * edit by www.jbxue.com ...