ios 破解虚拟定位软件下载

根据我的项目实践情况，主要是几个关键点：

1：支持静态的树，即一次性将全部数据加载到客户端。
2：异步树，即一次只加载一级或若干级节点，子节点可以异步加载数据。
3：Checkbox树（可能是静态树也可能是异步树），用于选择（如选择组织机构，选择数据字典项）等，最好是能够支持节点级联（这个是难点）
4：能够承载大数据量，并性能表现优异
5：能够在主流浏览器中运行良好

那我要打造的TreeView就是为了实现这个5个主要指标的。

先来看下效果图

上图是中国行政区域的数据树，总共得节点是3500+。

那么我们要开工了；

1：第一个确定的节点Dom结构（即用什么样的HTML来构建节点）

比较土的是table套table的（样式上好控制,但是大数据量，和层次较深的树，这种结构肯定顶不住的）
还有一种是比较新鲜的UL套LI的方式，这是现下很多书采取的方式如Jquery.treeview就是采用的这种格式，好处比较明显就是结构简洁明了，
而且在不支持Js的浏览器上，同样也能呈现出树的形状（这种情况其实咱可以忽略），但是Jquery.treeview的节点在IE下，特别是IE6下无法被内部元素撑开，（IE7，8当达到一定深度时无法撑开），请奇怪的现象（我猜测是因为使用padding来做缩进，margin-left：负值来控制图标位置有关，但是修改起来难度也较大），在这种情况下书会变形（Jquery.treeview）就有这种问题，只能通过设置节点的width来解决。

JQuery.treeview的节点结构

Jquery.TreeView IE6 下展开第三级即出现错位

IE8下展开到第5级

还有一些是div套table的方式，CSDN的导航树就是这种，是种折中的方法（节点也不算太复杂，而且CSS也比较好写），如下图所示

而我采用的也是第二种方式，但是缩进采用了填空的方式，即缩进的位置用空白的图片填充来避免Jquery.treeview的问题

我的树节点结构

确定了节点的HTML我们就可以来写CSS了。有了效果图，有个节点结构接着就编写CSS了

下面是CSS的完整代码

复制代码代码如下:

 
.ie .bbit-tree .bbit-tree-bwrap{ 
} 
.bbit-tree ul,.bbit-tree li 
{ 
list-style-type:none; 
margin:0px; 
padding:0px; 
} 
.bbit-tree-body 
{ 
font-size:12px; 
} 
.bbit-tree-icon, .bbit-tree-ec-icon, .bbit-tree-node-cb,.bbit-tree-elbow-line, .bbit-tree-elbow, .bbit-tree-elbow-end, .bbit-tree-elbow-plus, .bbit-tree-elbow-minus, .bbit-tree-elbow-end-plus, .bbit-tree-elbow-end-minus{ 
border: 0 none; 
height: 18px; 
margin: 0; 
padding: 0; 
vertical-align: top; 
width: 16px; 
background-repeat: no-repeat; 
} 
.bbit-tree-node-cb 
{ 
height:16px; 
} 
.bbit-tree-node-collapsed .bbit-tree-node-icon, .bbit-tree-node-expanded .bbit-tree-node-icon, .bbit-tree-node-leaf .bbit-tree-node-icon{ 
border: 0 none; 
height: 18px; 
margin: 0; 
padding: 0; 
vertical-align: top; 
width: 16px; 
background-position:center; 
background-repeat: no-repeat; 
} 
.ie .bbit-tree-node-indent img, .ie .bbit-tree-node-icon, .ie .bbit-tree-ec-icon { 
vertical-align:middle !important; 
} 
.bbit-tree-noicon .bbit-tree-node-icon{ 
width:0; height:0; 
} 
/* No line styles 没有线的样式 */ 
.bbit-tree-no-lines .bbit-tree-elbow{ 
background:transparent; 
} 
.bbit-tree-no-lines .bbit-tree-elbow-end{ 
background:transparent; 
} 
.bbit-tree-no-lines .bbit-tree-elbow-line{ 
background:transparent; 
} 
/* Arrows Vista系统树的样式只有箭头*/ 
.bbit-tree-arrows .bbit-tree-elbow{ 
background:transparent; 
} 
.bbit-tree-arrows .bbit-tree-elbow-plus{ 
background:transparent no-repeat 0 0; 
} 
.bbit-tree-arrows .bbit-tree-elbow-minus{ 
background:transparent no-repeat -16px 0; 
} 
.bbit-tree-arrows .bbit-tree-elbow-end{ 
background:transparent; 
} 
.bbit-tree-arrows .bbit-tree-elbow-end-plus{ 
background:transparent no-repeat 0 0; 
} 
.bbit-tree-arrows .bbit-tree-elbow-end-minus{ 
background:transparent no-repeat -16px 0; 
} 
.bbit-tree-arrows .bbit-tree-elbow-line{ 
background:transparent; 
} 
.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-plus{ 
background-position:-32px 0; 
} 
.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-minus{ 
background-position:-48px 0; 
} 
.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-end-plus{ 
background-position:-32px 0; 
} 
.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-end-minus{ 
background-position:-48px 0; 
} 
.bbit-tree-elbow-plus, .bbit-tree-elbow-minus, .bbit-tree-elbow-end-plus, .bbit-tree-elbow-end-minus{ 
cursor:pointer; 
} 
.ie ul.bbit-tree-node-ct{ 
font-size:0; 
line-height:0; 
zoom:1; 
} 
.bbit-tree-node{ 
white-space: nowrap; 
} 
.bbit-tree-node-el { 
line-height:18px; 
cursor:default; 
/* cursor:pointer;*/ 
} 
.bbit-tree-node a{ 
text-decoration:none; 
-khtml-user-select:none; 
-moz-user-select:none; 
-webkit-user-select:ignore; 
-kthml-user-focus:normal; 
-moz-user-focus:normal; 
-moz-outline: 0 none; 
outline:0 none; 
} 
.bbit-tree-node a span{ 
text-decoration:none; 
padding:1px 3px 1px 2px; 
} 
.bbit-tree-node .bbit-tree-node-disabled .bbit-tree-node-icon{ 
-moz-opacity: 0.5; 
opacity:.5; 
filter: alpha(opacity=50); 
} 
.bbit-tree-node .bbit-tree-node-inline-icon{ 
background:transparent; 
} 
.bbit-tree-node a:hover{ 
text-decoration:none; 
} 

/* Fix for ie rootVisible:false issue，修正一个IEdebug */ 
.bbit-tree-root { 
zoom:1; 
} 

/***********这里是图标了，可以在这里替换哦*****************/ 
.bbit-tree-node-expanded .bbit-tree-node-icon{ 
background-image:url(images/tree/folder-open.gif); 
} 
.bbit-tree-node-leaf .bbit-tree-node-icon{ 
background-image:url(images/tree/leaf.gif); 
} 
.bbit-tree-node-collapsed .bbit-tree-node-icon{ 
background-image:url(images/tree/folder.gif); 
} 
.bbit-tree-node-loading .bbit-tree-node-icon{ 
background-image:url(images/tree/loading.gif) !important; 
} 
.bbit-tree-node .bbit-tree-node-inline-icon { 
background-image: none; 
} 
.bbit-tree-node-loading a span{ 
font-style: italic; 
color:#444444; 
} 
.bbit-tree-lines .bbit-tree-elbow{ 
background-image:url(images/tree/elbow.gif); 
} 
.bbit-tree-lines .bbit-tree-elbow-plus{ 
background-image:url(images/tree/elbow-plus.gif); 
} 
.bbit-tree-lines .bbit-tree-elbow-minus{ 
background-image:url(images/tree/elbow-minus.gif); 
} 
.bbit-tree-lines .bbit-tree-elbow-end{ 
background-image:url(images/tree/elbow-end.gif); 
} 
.bbit-tree-lines .bbit-tree-elbow-end-plus{ 
background-image:url(images/tree/elbow-end-plus.gif); 
} 
.bbit-tree-lines .bbit-tree-elbow-end-minus{ 
background-image:url(images/tree/elbow-end-minus.gif); 
} 
.bbit-tree-lines .bbit-tree-elbow-line{ 
background-image:url(images/tree/elbow-line.gif); 
} 
.bbit-tree-no-lines .bbit-tree-elbow-plus{ 
background-image:url(images/tree/elbow-plus-nl.gif); 
} 
.bbit-tree-no-lines .bbit-tree-elbow-minus{ 
background-image:url(images/tree/elbow-minus-nl.gif); 
} 
.bbit-tree-no-lines .bbit-tree-elbow-end-plus{ 
background-image:url(images/tree/elbow-end-plus-nl.gif); 
} 
.bbit-tree-no-lines .bbit-tree-elbow-end-minus{ 
background-image:url(images/tree/elbow-end-minus-nl.gif); 
} 
.bbit-tree-arrows .bbit-tree-elbow-plus{ 
background-image:url(images/tree/arrows.gif); 
} 
.bbit-tree-arrows .bbit-tree-elbow-minus{ 
background-image:url(images/tree/arrows.gif); 
} 
.bbit-tree-arrows .bbit-tree-elbow-end-plus{ 
background-image:url(images/tree/arrows.gif); 
} 
.bbit-tree-arrows .bbit-tree-elbow-end-minus{ 
background-image:url(images/tree/arrows.gif); 
} 
/*TreeNode 选中的Disabled的一些颜色，字体样式*/ 
.bbit-tree-node{ 
color:#000; 
font: normal 11px arial, tahoma, helvetica, sans-serif; 
} 
.bbit-tree-node a{ 
color:#000; 
} 
.bbit-tree-node a span{ 
color:#000; 
} 
.bbit-tree-node .bbit-tree-node-disabled a span{ 
color:gray !important; 
} 
.bbit-tree-node .bbit-tree-node-over { 
background-color: #eee; 
} 
.bbit-tree-node .bbit-tree-selected { 
background-color: #d9e8fb; 
} 

上面了树的基本样式外，定义了一个有+号带line的样式和+号不带line的样式

这就是那个+号带line的样式

css中所用到的所有图片

2：确定数据结构

复制代码代码如下:

 
var menudata = [{ 
id: "0.1",//唯一的ID即可 
text: "Beyondbit UI Demo", 
hasChildren: true, 
isexpand: true, 
complete: true, 
ChildNodes: [{ 
id: "0.1.1", 
text: "日期选择", 
hasChildren: true, 
isexpand: false, 
complete: true, 
ChildNodes: [{ 
id: "0.1.1.1", 
text: "控件演示", 
value: "Testpages/datepickerDemo.htm", 
hasChildren: false, 
isexpand: false, 
complete: true, 
ChildNodes: null 
}, 
... 
] 

这样的结构有个好处就数据本身是带层次的，非常利于遍历，在后面的级联关联中会看到
3：面子做好了那就开始做里子了，编写脚本（Javascript）
我是JQuery得拥护者，所以自然js的框架自然是采用Jquery了
先上个完整代码，再逐一分析

复制代码代码如下:

 
/**************************************** 
author:xuanye.wan@gmail.com 
page:http://xuanye.cnblogs.com/ 
***************************************/ 
(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: "POST", 
datatype: "json", 
url: false, 
cbiconpath: "/images/icons/", 
icons: ["checkbox_0.gif", "checkbox_1.gif", "checkbox_2.gif"], 
showcheck: false, //是否显示选择 
oncheckboxclick: false, //当checkstate状态变化时所触发的事件，但是不会触发因级联选择而引起的变化 
onnodeclick: false, 
cascadecheck: true, 
data: null, 
clicktoggle: true, //点击节点展开和收缩子节点 
theme: "bbit-tree-arrows" //bbit-tree-lines ,bbit-tree-no-lines,bbit-tree-arrows 
} 
$.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); 
} 
var html = []; 
buildtree(dfop.data, html); 
me.addClass("bbit-tree").html(html.join("")); 
InitEvent(me); 
html = null; 
//预加载图片 
if (dfop.showcheck) { 
for (var i = 0; i < 3; i++) { 
var im = new Image(16,16); 
im.src = dfop.cbiconpath + dfop.icons[i]; 
} 
} 
//region 
function buildtree(data, ht) { 
ht.push("<div class='bbit-tree-bwrap'>"); // Wrap ; 
ht.push("<div class='bbit-tree-body'>"); // body ; 
ht.push("<ul class='bbit-tree-root ", dfop.theme, "'>"); //root 
var l = data.length; 
for (var i = 0; i < l; i++) { 
buildnode(data[i], ht, 0, i, i == l - 1); 
} 
ht.push("</ul>"); // root and; 
ht.push("</div>"); // body end; 
ht.push("</div>"); // Wrap end; 
} 
//endregion 
function buildnode(nd, ht, deep, path, isend) { 
ht.push("<li class='bbit-tree-node'>"); 
ht.push("<div id='", id, "_", nd.id, "' tpath='", path, "' unselectable='on'"); 
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(" "), "'>"); 
//span indent 
ht.push("<span class='bbit-tree-node-indent'>"); 
if (deep == 1) { 
ht.push("<img class='bbit-tree-icon' src='../Themes/Shared/images/s.gif'/>"); 
} 
else if (deep > 1) { 
ht.push("<img class='bbit-tree-icon' src='../Themes/Shared/images/s.gif'/>"); 
for (var j = 1; j < deep; j++) { 
ht.push("<img class='bbit-tree-elbow-line' src='../Themes/Shared/images/s.gif'/>"); 
} 
} 
ht.push("</span>"); 
//img 
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='../Themes/Shared/images/s.gif'/>"); 
ht.push("<img class='bbit-tree-node-icon' src='../Themes/Shared/images/s.gif'/>"); 
//checkbox 
if (dfop.showcheck && nd.showcheck) { 
if (nd.checkstate == null || nd.checkstate == undefined) { 
nd.checkstate = 0; 
} 
ht.push("<img id='", id, "_", nd.id, "_cb' class='bbit-tree-node-cb' src='", dfop.cbiconpath, dfop.icons[nd.checkstate], "'/>"); 
} 
//a 
ht.push("<a hideFocus class='bbit-tree-node-anchor' tabIndex=1 href='javascript:void(0);'>"); 
ht.push("<span unselectable='on'>", nd.text, "</span>"); 
ht.push("</a>"); 
ht.push("</div>"); 
//Child 
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;'></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; 
} 
} 
//change show 
if (item.render && pstate != item.checkstate) { 
var et = $("#" + id + "_" + item.id + "_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); 
//debugger; 
if (et.tagName == "IMG") { 
// +号需要展开 
if ($(et).hasClass("bbit-tree-elbow-plus") || $(et).hasClass("bbit-tree-elbow-end-plus")) { 
var ul = $(this).next(); //"bbit-tree-node-ct" 
if (ul.hasClass("bbit-tree-node-ct")) { 
ul.show(); 
} 
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(ul, item, 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")) { //- 号需要收缩 
$(this).next().hide(); 
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")) // 点击了Checkbox 
{ 
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) { 
$("#" + id + "_" + dfop.citem.id).removeClass("bbit-tree-selected"); 
} 
dfop.citem = item; 
$(this).addClass("bbit-tree-selected"); 
if (dfop.onnodeclick) { 
dfop.onnodeclick.call(this, item); 
} 
} 
} 
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(pul, pnode, callback) { 
if (dfop.url) { 
var param = builparam(pnode); 
$.ajax({ 
type: dfop.method, 
url: dfop.url, 
data: param, 
dataType: dfop.datatype, 
success: callback, 
error: function(e) { alert("error occur!"); } 
}); 
} 
} 
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 InitEvent(parent) { 
var nodes = $("li.bbit-tree-node>div", parent); 
nodes.each(function(e) { 
$(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 getck(items, c, fn) { 
for (var i = 0, l = items.length; i < l; i++) { 
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); 
} 
} 
} 
me[0].t = { 
getSelectedNodes: function() { 
var s = []; 
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; 
} 
}; 
return me; 
} 
//获取所有选中的节点的Value数组 
$.fn.getTSVs = function() { 
if (this[0].t) { 
return this[0].t.getSelectedValues(); 
} 
return null; 
} 
//获取所有选中的节点的Item数组 
$.fn.getTSNs = function() { 
if (this[0].t) { 
return this[0].t.getSelectedNodes(); 
} 
return null; 
} 
$.fn.getTCT = function() { 
if (this[0].t) { 
return this[0].t.getCurrentItem(); 
} 
return null; 
} 
})(jQuery); 

第一步：自然是所有Jquery的控件的第一步都是搭这个架子，兼容JQuery和$避免闭包，避免和其他类库冲突，接受一个参数（是个对象）

复制代码代码如下:

 
;(function($) { 
//也可以使用$.fn.extend(treeview:function(setting){}) 
$.fn.treeview = function(settings) { 
} 
})(jQuery); 

那第二步：给控件加一些参数默认参数，同时能调用方法$.extend让最终调用时的参数覆盖默认的（如果没有则使用默认）

复制代码代码如下:

 
var dfop ={ 
method: "POST",//默认采用POST提交数据 
datatype: "json",//数据类型是json 
url: false,//异步请求的url 
cbiconpath: "/images/icons/",//checkbox icon的目录位置 
icons: ["checkbox_0.gif", "checkbox_1.gif", "checkbox_2.gif"],//checkbxo三态的图片 
showcheck: false, //是否显示checkbox 
oncheckboxclick: false, //点击checkbox时触发的事件 
onnodeclick: false,//点击node触发的时间 
cascadecheck: true,//是否启用级联 
data: null,//初始化数据 
theme: "bbit-tree-arrows" //三种风格备选bbit-tree-lines ,bbit-tree-no-lines,bbit-tree-arrows 
} 
//用传进来的参数覆盖默认，没传则保留 
$.extend(dfop, settings); 

第三步：生成默认数据的HTML（根据我们的分析节点的Dom结构，数据的数据结构，生成节点那是非常的简单），，添加到当前容器中。最后是注册事件这里有一个非常重要的地方，即懒加载(没有展开的节点HTML是不生成的)，这就要求我们在树内部要维护一套数据（开销很小），对于性能的提升那是相当的明显。另外一个重要的地方，就是使用一次生成所有展开节点的HTML并通过innerHTML属性来生成Dom，而不是通过append操作，因为直接操作innerHTML比通过dom原生的方法要快上N倍（节点越多，N越大），切记切记！

复制代码代码如下:

 
var treenodes = dfop.data; //内部的数据，其实直接用 dfop.data也可以 
var me = $(this); 
var id = me.attr("id"); 
if (id == null || id == "") { 
id = "bbtree" + new Date().getTime(); 
me.attr("id", id); 
}//全局唯一的ID 
var html = []; 
buildtree(dfop.data, html);//生成展开节点的HTML，push到数组中 
me.addClass("bbit-tree").html(html.join("")); 
InitEvent(me);//初始化事件 
html = null; 

在节点生成过程中，同时可生产节点的Path（节点路径），方便检索

复制代码代码如下:

 
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;'></ul>"); 
} 
} 

注册事件，接受参数parent，即从某一父节点开始附加事件（因为做了个hover效果，所以事件是在每个节点上，如果取消该效果，事件可直接附加Tree上通过Event的srcElement来分发可略提升性能）

复制代码代码如下:

 
function InitEvent(parent) { 
var nodes = $("li.bbit-tree-node>div", parent); 
nodes.each(function(e) { 
$(this).hover(function() { 
$(this).addClass("bbit-tree-node-over"); //鼠标浮动节点的样式变化 
}, function() { 
$(this).removeClass("bbit-tree-node-over"); 
}) 
.click(nodeclick)//node的onclick事件，这个是重点哦 
.find("img.bbit-tree-ec-icon").each(function(e) { //arrow的hover事件，为了实现vista那个风格的 
if (!$(this).hasClass("bbit-tree-elbow")) { 
$(this).hover(function() { 
$(this).parent().addClass("bbit-tree-ec-over"); 
}, function() { 
$(this).parent().removeClass("bbit-tree-ec-over"); 
}); 
} 
}); 
}); 
} 

这里最主要的还是node的click事件，因为他要处理的事情很多，如树的展开收缩（如果子节点不存在，但是hasChildren为真，同时complete属性不为真则需要异步加载子节点，如子节点存在，但是没有Render那么就要Render）,点击checkbox要出发级联的事件和oncheckbox事件，点击其他则触发配置条件的nodeonclick事件，这一切都通过前面event的源元素的class来区分点击的对象

复制代码代码如下:

 
function nodeclick(e) { 
var path = $(this).attr("tpath");//获取节点路径 
var et = e.target || e.srcElement;//获取事件源 
var item = getItem(path);//根据path获取节点的数据 
//debugger; 
if (et.tagName == "IMG") { 
// +号需要展开，处理加减号 
if ($(et).hasClass("bbit-tree-elbow-plus") || $(et).hasClass("bbit-tree-elbow-end-plus")) { 
var ul = $(this).next(); //"bbit-tree-node-ct" 
if (ul.hasClass("bbit-tree-node-ct")) { 
ul.show(); 
} 
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(ul, item, 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")) { //- 号需要收缩 
$(this).next().hide(); 
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")) // 点击了Checkbox 
{ 
var s = item.checkstate != 1 ? 1 : 0; 
var r = true; 
if (dfop.oncheckboxclick) { //触发配置的函数 
r = dfop.oncheckboxclick.call(et, item, s); 
} 
if (r != false) {//如果返回值不为false，即checkbxo变化有效 
if (dfop.cascadecheck) {//允许触发级联 
//遍历 
cascade(check, item, s);//则向下关联 
//上溯 
bubble(check, item, s); //向上关联 
} 
else { 
check(item, s, 1);//否则只管自己 
} 
} 
} 
} 
else {//点击到了其他地方 
if (dfop.citem) { //上一个当前节点 
$("#" + id + "_" + dfop.citem.id).removeClass("bbit-tree-selected"); 
} 
dfop.citem = item;//这次的当前节点 
$(this).addClass("bbit-tree-selected"); 
if (dfop.onnodeclick) { 
dfop.onnodeclick.call(this, item); 
} 
} 
} 

展开节点，异步请求的部分代码应该不是很复杂就不细诉了，关键来讲一下级联
级联有两个问题要处理，第一个是遍历子节点，第二个是上溯到祖节点，因为我们的数据结构这两个操作都显得非常简单

复制代码代码如下:

 
//遍历子节点 
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; 
} 
} 

找到节点的同时都会触发check这个回调函数，来判断当前节点的状态，详细请看下面代码中的注释部分应该是比较清晰，描写了这个过程

复制代码代码如下:

 
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; //半选 
} 
} 
//change show 如果节点已输出，而其前后状态不一样，则变化checkbxo的显示 
if (item.render && pstate != item.checkstate) { 
var et = $("#" + id + "_" + item.id + "_cb"); 
if (et.length == 1) { 
et.attr("src", dfop.cbiconpath + dfop.icons[item.checkstate]); 
} 
} 
} 

至此我们树的主体功能已经完全实现了。其他就是公开一些方法等，大家可详见代码，示例中公开了两个一个当前选中的所有节点，另外一个当前的节点。

大家可以通过以下网址查看文中的示例，selected拼错了，大家海涵！ windows azure部署还是麻烦懒得修改了3500+节点一次加载，大家可以点击根节点的全选来看看速度

http://jscs.cloudapp.net/ControlsSample/BigTreeSample

异步加载，按需加载的情况也是非常常用的，使用的是SQL Azure服务器在美国ing，所以可能异步有点慢，本地数据源那是瞬间的

http://jscs.cloudapp.net/ControlsSample/TreeAsnySample

FAQ：

1：如何设置每个节点不同的图标？

回答：

其实不用扩展，本身就支持，只是没有说明而已，我们来看一下这个代码吧？在BuildNode方法中有这么一句？
if (nd.classes) { cs.push(nd.classes); }

在节点的数据结构中可以设置属性classes ，该属性将作为节点特殊的Css Class 添加到节点上。那么利用这点，就可以设置节点的图标了

然后就是编写一个Style 即可

最后来看下效果吧？

ios 破解虚拟定位软件下载

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

苹果虚拟定位a下载
下面贴上完整的代码，我走了很多弯路，原因就是看了回复中朋友们的代码，现在想起来其实不用那么费事吧。复制代码代码如下: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="js/jquery.mytre…...
2024/4/20 10:34:08
华为MATE10手机怎么设置后台腾讯游戏助手王者荣耀虚拟定位不
然后建议去看看张子秋大哥的从零开始学jQuery系列本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式从零开始学习jQuery (…...
2024/4/25 22:27:47
用微信虚拟定位会被封号吗
一.摘要在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等. 二.前言本系列的2,3篇上面列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这…...
2024/4/28 2:45:16
苹果手机怎样才有没有虚拟定位的模拟器
一.摘要本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属…...
2024/4/27 6:47:57
虚拟定位安卓下载软件
一.摘要事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言本篇文章是至今为止本系列内容最多的一篇, 足以可见其重要性. 大家反映要多列举示例. 我会在时间允许的情况下尽量多列举示例. 真正的投入生…...
2024/4/24 8:40:09
x分身可以虚拟定位吗
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式.二.前言Ajax让用户页面丰富起来, 增强了用户体验. …...
2024/4/25 18:59:15
iphone qq虚拟定位软件
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.开发人员一直痛疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手! 本文将介绍jQuery的动画相关函数.原来…...
2024/4/25 7:52:01
微信发ios8 地图 fake gps pros vivo x9 允许ipad mini4越狱的苹果手机怎么口袋复刻安卓虚拟定位大牛
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.本篇文章属于临时插播, 用于介绍我在本公司的jQuery实施方案. 二.前言有了前几章扎实的基础知识我们已经可以在项目中投入使用jQuery了.…...
2024/4/25 21:57:54
小米怎么虚拟定位国外
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.我们经常要使用脚本处理各种业务逻辑, 最常见的就是数组和对象的操作. jQuery工具函数为我们操作对象和数组提供了便利条件.二.前言大部分…...
2024/4/25 2:14:39
钉钉虚拟定位软件评测
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.本文是实战篇. 使用jQueryUI完成制作网站的大部分常用功能. 二.前言经过公司内部收集, 整理了一些经常使用javascript实现的功能. 实现…...
2024/4/25 1:51:12
魅蓝x怎么设置钉钉4.0 微信虚拟定位被钉钉
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.本文是介绍两个最常用的jQuery插件. 分别用于表单验证和自动完成提示(类似google suggest).二.前言研究别人的作品真是一件花时间而且痛苦…...
2024/4/14 14:16:15
苹果手机系统虚拟定位软件注册码
一.摘要本系列文章是为了抽象通用的,跨浏览器的脚本方法. 本篇文章讲解弹出浮动层的javascript函数, 以及函数的原理和使用注意事项. 二.实现效果用脚本弹出浮动层是我们最常用的脚本方法之一.下面是效果图: 点击图中的"航空公司"后,会在"航空公司"下面…...
2024/4/26 3:01:41
iphone虚拟定位 11.4
复制代码代码如下:(function($){ var no_ie_pr=function(e){ var _this=e; var tabpr=function(e){ _this.attr(tabIndex, 1).click(function(){ _this.focus(); }); if(!$.browser.msie){ _this.css("outline-style", "none"); } } var gettag=_this[0].…...
2024/4/14 14:16:13
真真可以苹果QQ自带ios11.3虚拟定位失效
使用该jQuery插件要想使用该jQuery插件，需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的"selector"，例如："a[rel=boxy],form.with-confirmation"。这会给匹配的元素附加一些行为，如下：一个href属性中如果锚点包含…...
2024/4/14 14:16:12
苹果系统虚拟定位软件注册码
实现目标：两个日期，有下拉框：复制代码代码如下: <head> //导入jquery地址 <script src="（Jquery地址）" language="JavaScript" type="text/javascript"></script> <script type="text/javascript"> //s…...
2024/4/14 14:16:11
ios11系统虚拟定位越狱
查找了很多方法，有些不能实现（被滚动内容的宽度未知，但使用这种方法必须已知），其它的不能完全兼容这些浏览器（IE6，Firefox，Chrome）。最后决定使用JQuery的Slider控件。 1. 下载jquery-1.3.2.min.js，jquery-ui-1.7.1.custom.min.js 2. Html 复制代码代码如下: <di…...
2024/4/14 14:16:10
虚拟定位一定要root
复制代码代码如下: (function($) { /** * 取得浏览器视图的宽度 */ $.viewWidth=function(){ var w = 0, D=document; if( D.documentElement && D.documentElement.clientWidth ) { w = D.documentElement.clientWidth; } else if( D.body && D.body.clientW…...
2024/4/14 14:16:09
ipad 探探虚拟定位精灵账号
我建了一个文件里面代码是网上下的<精通dojo>的代码：复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- ! Excerpted from "Mastering Dojo"…...
2024/4/14 14:16:08
ios虚拟定位搜不出来
复制代码代码如下: Easy.Ajax = { proxyPool: { length: function () { var i = 0; for (var p in this) i++; return i - 1; } }, index: 0, async: true, xmlData: false, timeout: 1, defaultHeader: application/json; charset=utf-8, clearCache: true, emptyFn: functio…...
2024/4/22 12:04:48
win10 虚拟定位软件哪个好
1. LightviewLightview是一个基于Prototype与Script.aculo.us开发，用于创建可以覆盖整个页面的模式对话框。展示的内容不仅可以是图片、文字、网页、通过Ajax 调用的内容，还可以是Quicktime/Flash影片都能够以非常酷的效果展示。2. ThickBox (演示地址)ThickBox是一个模式对话…...
2024/4/16 20:36:26

ios 破解虚拟定位软件下载

相关文章

最新文章