JavaScript-Tool：wdtree
| ylbtech-JavaScript-Tool：wdtree |
| 1.返回顶部 |
1、
插件描述：wdTree是一个轻量级jQuery插件用于创建一个带有嵌套Check Boxe的树形控件。
wdTree是一个轻量级jQuery插件用于创建一个带有嵌套Check Boxe的树形控件。它拥有以下特性：
- 父子节点选中
- 从数据库懒加树节点
- 可配置的节点属性
- 庞大的数据树
此演示一次装入10,000节点的性能，
您可以展开/折叠和检查/ uncheked节点，了解如何快速响应。
使用步骤
获取选中的节点
以下几行显示如何得到选中的节点
$("#showchecked").click(function(e){
var s=$("#tree").getCheckedNodes();
if(s !=null)
alert(s.join(","));
else
alert("NULL");
});
获取当前节点
以下几行显示如何得到当前节点
//以下几行显示如何得到当前节点。
$("#showcurrent").click(function(e){
var s=$("#tree").getCurrentNode();
if(s !=null)
alert(s.text);
else
alert("Current node is nothing");
});
2、
| 2.返回顶部 |
| 3.返回顶部 |
1、wdtree/tree.js
(function ($) {
$.fn.swapClass = function (c1, c2) {
return this.removeClass(c1).addClass(c2);
};
$.fn.switchClass = function (c1, c2) {
if (this.hasClass(c1)) {
return this.swapClass(c1, c2);
}
else {
return this.swapClass(c2, c1);
}
};
$.fn.treeview = function (settings) {
var dfop =
{
method: "GET",
datatype: "json",
url: false,
param: null,
cbiconpath: "/Content/js/wdtree/images/icons/",
icons: ["checkbox_0.png", "checkbox_1.png", "checkbox_2.png"],
showcheck: false,
oncheckboxclick: false,
onnodeclick: false,
cascadecheck: true,
data: null,
clicktoggle: true,
theme: "bbit-tree-arrows",
isTool: false,
nodeTools: []
};
$.extend(dfop, settings);
var treenodes = dfop.data;
var me = $(this);
var id = me.attr("id");
if (id == null || id == "") {
id = "bbtree" + new Date().getTime();
me.attr("id", id);
}
me.height(dfop.height);
if (dfop.slimscroll == true) {
me.css({ "overflow": "auto", "overflow-y": "hidden" });
} else {
me.css({ "overflow": "auto" });
}
var html = [];
buildtree(dfop.data, html);
me.html('');
me.addClass("bbit-tree").append(html.join(""));
InitEvent(me);
html = null;
if (dfop.showcheck) {
for (var i = 0; i < 3; i++) {
var im = new Image();
im.src = dfop.cbiconpath + dfop.icons[i];
}
}
function buildtree(data, ht) {
ht.push("<div class='bbit-tree-bwrap'>");
ht.push("<div class='bbit-tree-body " + id + "'>");
ht.push("<ul class='bbit-tree-root ", dfop.theme, "'>");
if (data && data.length > 0) {
var l = data.length;
for (var i = 0; i < l; i++) {
buildnode(data[i], ht, 0, i, i == l - 1);
}
}
else {
asnyloadc(null, false, function (data) {
if (data && data.length > 0) {
treenodes = data;
dfop.data = data;
if (dfop.description) {
data.unshift({
"id": "",
"text": dfop.description,
"value": "",
"img": "-1",
"parentnodes": "0",
"showcheck": false,
"isexpand": true,
"complete": true,
"hasChildren": false,
"ChildNodes": []
});
}
var l = data.length;
for (var i = 0; i < l; i++) {
buildnode(data[i], ht, 0, i, i == l - 1);
}
}
});
}
ht.push("</ul>");
ht.push("</div>");
ht.push("</div>");
}
function buildnode(nd, ht, deep, path, isend) {
var nid = nd.id.replace(/[^\w]/gi, "_");
ht.push("<li class='bbit-tree-node'>");
var title = nd.title;
if (title) {
title = nd.title;
} else {
title = nd.text;
}
ht.push("<div id='", id, "_", nid, "' tpath='", path, "' unselectable='on' title='", title, "'");
var cs = [];
cs.push("bbit-tree-node-el");
if (nd.hasChildren) {
cs.push(nd.isexpand ? "bbit-tree-node-expanded" : "bbit-tree-node-collapsed");
}
else {
cs.push("bbit-tree-node-leaf");
}
if (nd.classes) { cs.push(nd.classes); }
ht.push(" class='", cs.join(" "), "'>");
ht.push("<span class='bbit-tree-node-indent'>");
if (deep == 1) {
ht.push("<img class='bbit-tree-icon' src='" + dfop.cbiconpath + "s.gif'/>");
}
else if (deep > 1) {
ht.push("<img class='bbit-tree-icon' src='" + dfop.cbiconpath + "s.gif'/>");
for (var j = 1; j < deep; j++) {
ht.push("<img class='bbit-tree-elbow-line' src='" + dfop.cbiconpath + "s.gif'/>");
}
}
ht.push("</span>");
cs.length = 0;
if (nd.hasChildren) {
if (nd.isexpand) {
cs.push(isend ? "bbit-tree-elbow-end-minus" : "bbit-tree-elbow-minus");
}
else {
cs.push(isend ? "bbit-tree-elbow-end-plus" : "bbit-tree-elbow-plus");
}
}
else {
cs.push(isend ? "bbit-tree-elbow-end" : "bbit-tree-elbow");
}
ht.push("<img class='bbit-tree-ec-icon ", cs.join(" "), "' src='" + dfop.cbiconpath + "s.gif'/>");
if (dfop.showcheck && nd.showcheck) {
if (nd.checkstate == null || nd.checkstate == undefined) {
nd.checkstate = 0;
}
ht.push("<img id='", id, "_", nid, "_cb' class='bbit-tree-node-cb' src='", dfop.cbiconpath, dfop.icons[nd.checkstate], "'/>");
}
if (nd.hasChildren) {
if (nd.img == -1) {
ht.push("");
} else
if (!!nd.img) {
ht.push("<i class=\"" + nd.img + "\"></i>");
} else {
ht.push("<i class=\"fa fa-folder-open\" style='width:15px'></i>");
}
} else {
if (nd.img == -1) {
ht.push("");
} else
if (!!nd.img) {
ht.push("<i class=\"" + nd.img + "\"></i>");
} else {
ht.push("<i class=\"fa fa-file-text-o\"></i>");
}
}
ht.push("<a hideFocus class='bbit-tree-node-anchor' tabIndex=1 href='javascript:void(0);'>");
ht.push("<span data-value='" + nd.id + "' class='bbit-tree-node-text' unselectable='on'>", nd.text, "</span>");
ht.push("</a>");
if (dfop.isTool) {
ht.push("<div class='bbit-tree-node-tool'>");
for (var ii in dfop.nodeTools) {
var toolItem = dfop.nodeTools[ii];
ht.push("<span class='" + toolItem.img + "' title='" + toolItem.text + "'></span>");
}
ht.push("</div>");
}
ht.push("</div>");
if (nd.hasChildren) {
if (nd.isexpand) {
ht.push("<ul class='bbit-tree-node-ct' style='z-index: 0; position: static; visibility: visible; top: auto; left: auto;'>");
if (nd.ChildNodes) {
var l = nd.ChildNodes.length;
for (var k = 0; k < l; k++) {
nd.ChildNodes[k].parent = nd;
buildnode(nd.ChildNodes[k], ht, deep + 1, path + "." + k, k == l - 1);
}
}
ht.push("</ul>");
}
else {
ht.push("<ul style='display:none;'>");
if (nd.ChildNodes) {
var l = nd.ChildNodes.length;
for (var k = 0; k < l; k++) {
nd.ChildNodes[k].parent = nd;
buildnode(nd.ChildNodes[k], ht, deep + 1, path + "." + k, k == l - 1);
}
}
ht.push("</ul>");
}
}
ht.push("</li>");
nd.render = true;
}
function getItem(path) {
var ap = path.split(".");
var t = treenodes;
for (var i = 0; i < ap.length; i++) {
if (i == 0) {
t = t[ap[i]];
}
else {
t = t.ChildNodes[ap[i]];
}
}
return t;
}
function check(item, state, type) {
var pstate = item.checkstate;
if (type == 1) {
item.checkstate = state;
}
else {
var cs = item.ChildNodes;
var l = cs.length;
var ch = true;
for (var i = 0; i < l; i++) {
if ((state == 1 && cs[i].checkstate != 1) || state == 0 && cs[i].checkstate != 0) {
ch = false;
break;
}
}
if (ch) {
item.checkstate = state;
}
else {
item.checkstate = 2;
}
}
if (item.render && pstate != item.checkstate) {
var nid = item.id.replace(/[^\w]/gi, "_");
var et = $("#" + id + "_" + nid + "_cb");
if (et.length == 1) {
et.attr("src", dfop.cbiconpath + dfop.icons[item.checkstate]);
}
}
}
function cascade(fn, item, args) {
if (fn(item, args, 1) != false) {
if (item.ChildNodes != null && item.ChildNodes.length > 0) {
var cs = item.ChildNodes;
for (var i = 0, len = cs.length; i < len; i++) {
cascade(fn, cs[i], args);
}
}
}
}
function bubble(fn, item, args) {
var p = item.parent;
while (p) {
if (fn(p, args, 0) === false) {
break;
}
p = p.parent;
}
}
function nodeclick(e) {
var path = $(this).attr("tpath");
var et = e.target || e.srcElement;
var item = getItem(path);
if (et.tagName == "IMG") {
if ($(et).hasClass("bbit-tree-elbow-plus") || $(et).hasClass("bbit-tree-elbow-end-plus")) {
if ($(this).find('i').hasClass('fa-folder')) {
$(this).find('i').swapClass('fa-folder', 'fa-folder-open');
}
var ul = $(this).next();
if (ul.hasClass("bbit-tree-node-ct")) {
ul.slideDown(200);
}
else {
var deep = path.split(".").length;
if (item.complete) {
item.ChildNodes != null && asnybuild(item.ChildNodes, deep, path, ul, item);
}
else {
$(this).addClass("bbit-tree-node-loading");
asnyloadc(item, true, function (data) {
item.complete = true;
item.ChildNodes = data;
asnybuild(data, deep, path, ul, item);
});
}
}
if ($(et).hasClass("bbit-tree-elbow-plus")) {
$(et).swapClass("bbit-tree-elbow-plus", "bbit-tree-elbow-minus");
}
else {
$(et).swapClass("bbit-tree-elbow-end-plus", "bbit-tree-elbow-end-minus");
}
$(this).swapClass("bbit-tree-node-collapsed", "bbit-tree-node-expanded");
}
else if ($(et).hasClass("bbit-tree-elbow-minus") || $(et).hasClass("bbit-tree-elbow-end-minus")) {
if ($(this).find('i').hasClass('fa-folder-open')) {
$(this).find('i').swapClass('fa-folder-open', 'fa-folder');
}
$(this).next().slideUp(200);
if ($(et).hasClass("bbit-tree-elbow-minus")) {
$(et).swapClass("bbit-tree-elbow-minus", "bbit-tree-elbow-plus");
}
else {
$(et).swapClass("bbit-tree-elbow-end-minus", "bbit-tree-elbow-end-plus");
}
$(this).swapClass("bbit-tree-node-expanded", "bbit-tree-node-collapsed");
}
else if ($(et).hasClass("bbit-tree-node-cb")) {
var s = item.checkstate != 1 ? 1 : 0;
var r = true;
if (dfop.oncheckboxclick) {
r = dfop.oncheckboxclick.call(et, item, s);
}
if (r != false) {
if (dfop.cascadecheck) {
cascade(check, item, s);
bubble(check, item, s);
}
else {
check(item, s, 1);
}
}
}
}
else {
if (dfop.citem) {
var nid = dfop.citem.id.replace(/[^\w]/gi, "_");
$("." + id).removeClass("bbit-tree-selected");
}
dfop.citem = item;
$("." + id).find('div').removeClass("bbit-tree-selected");
$(this).addClass("bbit-tree-selected");
if (dfop.onnodeclick) {
if (!item.expand) {
item.expand = function () { expandnode.call(item); };
}
dfop.onnodeclick.call(this, item);
}
}
}
function expandnode() {
var item = this;
var nid = item.id.replace(/[^\w]/gi, "_");
var img = $("#" + id + "_" + nid + " img.bbit-tree-ec-icon");
if (img.length > 0) {
img.click();
}
}
function asnybuild(nodes, deep, path, ul, pnode) {
var l = nodes.length;
if (l > 0) {
var ht = [];
for (var i = 0; i < l; i++) {
nodes[i].parent = pnode;
buildnode(nodes[i], ht, deep, path + "." + i, i == l - 1);
}
ul.html(ht.join(""));
ht = null;
InitEvent(ul);
}
ul.addClass("bbit-tree-node-ct").css({ "z-index": 0, position: "static", visibility: "visible", top: "auto", left: "auto", display: "" });
ul.prev().removeClass("bbit-tree-node-loading");
}
function asnyloadc(pnode, isAsync, callback) {
if (dfop.url) {
if (pnode && pnode != null)
var param = builparam(pnode);
if (dfop.param != null) {
var param = dfop.param
}
$.ajax({
type: dfop.method,
url: dfop.url,
data: param,
async: isAsync,
dataType: dfop.datatype,
success: callback,
error: function (e) { dialogMsg("服务端未响应。", -1); }
});
}
}
function builparam(node) {
var p = [{ name: "id", value: encodeURIComponent(node.id) }
, { name: "text", value: encodeURIComponent(node.text) }
, { name: "value", value: encodeURIComponent(node.value) }
, { name: "checkstate", value: node.checkstate }];
return p;
}
function bindevent() {
$(this).hover(function () {
$(this).addClass("bbit-tree-node-over");
}, function () {
$(this).removeClass("bbit-tree-node-over");
}).click(nodeclick)
.find("img.bbit-tree-ec-icon").each(function (e) {
if (!$(this).hasClass("bbit-tree-elbow")) {
$(this).hover(function () {
$(this).parent().addClass("bbit-tree-ec-over");
}, function () {
$(this).parent().removeClass("bbit-tree-ec-over");
});
}
});
}
function InitEvent(parent) {
var nodes = $("li.bbit-tree-node>div", parent);
nodes.each(bindevent);
}
function reflash(itemId) {
var nid = itemId.replace(/[^\w-]/gi, "_");
var node = $("#" + id + "_" + nid);
if (node.length > 0) {
node.addClass("bbit-tree-node-loading");
var isend = node.hasClass("bbit-tree-elbow-end") || node.hasClass("bbit-tree-elbow-end-plus") || node.hasClass("bbit-tree-elbow-end-minus");
var path = node.attr("tpath");
var deep = path.split(".").length;
var item = getItem(path);
if (item) {
asnyloadc(item, true, function (data) {
item.complete = true;
item.ChildNodes = data;
item.isexpand = true;
if (data && data.length > 0) {
item.hasChildren = true;
}
else {
item.hasChildren = false;
}
var ht = [];
buildnode(item, ht, deep - 1, path, isend);
ht.shift();
ht.pop();
var li = node.parent();
li.html(ht.join(""));
ht = null;
InitEvent(li);
bindevent.call(li.find(">div"));
});
}
}
}
function getck(items, c, fn) {
for (var i = 0, l = items.length; i < l; i++) {
(items[i].showcheck == true && items[i].checkstate == 1) && c.push(fn(items[i]));
if (items[i].ChildNodes != null && items[i].ChildNodes.length > 0) {
getck(items[i].ChildNodes, c, fn);
}
}
}
function getCkAndHalfCk(items, c, fn) {
for (var i = 0, l = items.length; i < l; i++) {
(items[i].showcheck == true && (items[i].checkstate == 1 || items[i].checkstate == 2)) && c.push(fn(items[i]));
if (items[i].ChildNodes != null && items[i].ChildNodes.length > 0) {
getCkAndHalfCk(items[i].ChildNodes, c, fn);
}
}
}
me[0].t = {
getSelectedNodes: function (gethalfchecknode) {
var s = [];
if (gethalfchecknode) {
getCkAndHalfCk(treenodes, s, function (item) { return item; });
}
else {
getck(treenodes, s, function (item) { return item; });
}
return s;
},
getSelectedValues: function () {
var s = [];
getck(treenodes, s, function (item) { return item.value; });
return s;
},
getCurrentItem: function () {
return dfop.citem;
},
reflash: function (itemOrItemId) {
var id;
if (typeof (itemOrItemId) == "string") {
id = itemOrItemId;
}
else {
id = itemOrItemId.id;
}
reflash(id);
}
};
return me;
};
$.fn.getCheckedNodes = function () {
var $id = $(this);
var _length = $id.attr('id').trim().length + 1;
var value = []
$id.find('.bbit-tree-node-cb').each(function () {
var _src = $(this).attr('src');
_src = _src.substr(_src.lastIndexOf("/") + 1);
if (_src == 'checkbox_1.png' || _src == 'checkbox_2.png') {
var _value = $(this).attr('id').substring(parseInt(_length)).replace(/_/g, "-");
_value = _value.substring(0, _value.length - 3);
value.push(_value)
}
});
return value;
};
$.fn.setCheckedNodes = function (data) {
var $id = $(this);
var id = $id.attr('id').trim();
$.each(data, function (i, item) {
var object = $id.find(('#' + id + '_' + item.replace(/-/g, "_") + '_cb'));
if (object.length != 0) {
object.trigger("click");
}
});
}
$.fn.setCheckedNodeOne = function (data) {
var $id = $(this);
var id = $id.attr('id').trim();
var object = $id.find(('#' + id + '_' + data.replace(/-/g, "_") + '_cb'));
if (object.length != 0) {
object.trigger("click");
}
}
$.fn.setNoCheckedNodes = function (item) {
var $id = $(this);
var id = $id.attr('id').trim();
var object = $id.find(('#' + id + '_' + item.replace(/-/g, "_") + '_cb'));
var _src = object.attr('src');
object.attr('src', _src.replace('checkbox_1.png', 'checkbox_0.png'));
}
$.fn.getTSNs = function (gethalfchecknode) {
if (this[0].t) {
return this[0].t.getSelectedNodes(gethalfchecknode);
}
return null;
};
$.fn.getCurrentNode = function () {
if (this[0].t) {
return this[0].t.getCurrentItem();
}
return null;
};
$.fn.reflash = function (ItemOrItemId) {
if (this[0].t) {
return this[0].t.reflash(ItemOrItemId);
}
};
$.fn.setTreeHeight = function (height) {
var me = $(this);
me.height(height);
}
$.fn.setNodeChecked = function (value) {
var $id = $(this);
var id = $id.attr('id').trim();
$id.find('.bbit-tree-selected').removeClass('bbit-tree-selected');
var object = $id.find(('#' + id + '_' + value.replace(/-/g, "_")));
object.addClass('bbit-tree-selected');
}
})(jQuery);
2、
| 4.返回顶部 |
1、下载 wdtree
2、
| 5.返回顶部 |
1、
2、
| 6.返回顶部 |
 |
作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |
JavaScript-Tool：wdtree的更多相关文章
- JavaScript宝座：七大框架论剑
JavaScript宝座:七大框架论剑 一周前,Throne of JS大会在多伦多召开,这应该是我参加过的最有料也最不一样的一次大会.大会官网如是说: 加载整个页面,然后再“渐进增强”以添加动态行为 ...
- 微信浏览器内置JavaScript 对象：WeixinJSBridge
微信公众平台开发 微信公众平台开发模式 企业微信公众平台 微信浏览器 分享到朋友圈 发送给好友 分享到腾讯微博 作者:方倍工作室 原文: http://www.cnblogs.com/txw1958/ ...
- JavaScript基础：数据类型的中的那些少见多怪
原文:JavaScript基础:数据类型的中的那些少见多怪 Javascript共有6种数据类型,其中包括3个基本数据类型(string,number,boolean).2个特殊数据类型(undefi ...
- JavaScript -- 原型：prototype的使用
JavaScript -- 原型:prototype的使用 在 JavaScript 中,prototype 是函数的一个属性,同时也是由构造函数创建的对象的一个属性. 函数的原型为对象. 它主要在函 ...
- JavaScript运算符：递增递减运算符前置和后置的区别
从两段代码说起 var num1 = 2; var num2 = 20; var num3 = --num1 + num2; var num4 = num1 + num2; console.log(n ...
- 杂项-TOOL：NPIO
ylbtech-杂项-TOOL:NPIO NPOI是指构建在POI 3.x版本之上的一个程序,NPOI可以在没有安装Office的情况下对Word或Excel文档进行读写操作.NPOI是一个开源的Ja ...
- C# -- 等待异步操作执行完成的方式 C# -- 使用委托 delegate 执行异步操作 JavaScript -- 原型：prototype的使用 DBHelper类连接数据库 MVC View中获取action、controller、area名称、参数
C# -- 等待异步操作执行完成的方式 C# -- 等待异步操作执行完成的方式 1. 等待异步操作的完成,代码实现: class Program { static void Main(string[] ...
- [翻译]Review——How JavaScript works：The building blocks of Web Workers
原文地址:https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-w ...
- JavaScript基础：
一. JavaScript概述 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型. document.write("<h1>这是一个标 ...
随机推荐
- avi视频文件提取与合并
最近在做一个avi视频文件的提取与合并,花了几天熟悉avi文件格式.制作了一个提取与合并的动态库,不过仅限于提取视频,视频的合并还没添加一些额外判断,可能导致不同分辨率的视频文件合成后不能播放.欢迎大 ...
- Ubuntu官方Wiki教程资源
前言:通常学习一样新知识时,最快的方式是通过搜索引擎然后以最快的方式拿枪上战场,如果接下来还一直依赖搜索引擎去打,那么你会发现自己永远都在打游击:那么如果要解决这个问题,必须要学会系统的学习,只有连贯 ...
- win10中显示wpcap.dll丢失的处理方式
win10中显示wpcap.dll丢失的处理方式 学习了:https://jingyan.baidu.com/article/4f34706e30e673e387b56dd8.html 直接安装Win ...
- Monkey源代码分析之事件注入
本系列的上一篇文章<Monkey源代码分析之事件源>中我们描写叙述了monkey是怎么从事件源取得命令.然后将命令转换成事件放到事件队列里面的.可是到如今位置我们还没有了解monkey里面 ...
- weex 项目开发（三） weexpack + weex-ui
github地址:weex-ui https://github.com/alibaba/weex-ui 官网: https://alibaba.github.io/weex-ui/#/cn/ 创建项目 ...
- 深入JVM系列（二）之GC机制、收集器与GC调优（转）
一.回顾JVM内存分配 需要了解更多内存模式与内存分配的,请看 深入JVM系列(一)之内存模型与内存分配 1.1.内存分配: 1.对象优先在EDEN分配2.大对象直接进入老年代 3.长期存活的对象 ...
- PHP通用分页
php通用分页,先看下样式 代码如下: <style> body { font-size:12px;font-family:verdana;width:100%; } div.page{ ...
- Android设置系统开机自己主动永不休眠
android4.2系统增永不休眠同一时候隐藏休眠选项 1. android\frameworks\base\packages\SettingsProvider\res\values\defaults ...
- hihoCoder 1234 fractal
#1234 : Fractal 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 This is the logo of PKUACM 2016. More specific ...
- php 封装memcache类
<?php /* * memcache类 */ class Memcacheds{ //声明静态成员变量 private static $m = null; pri ...