首页 > 程序开发 > web前端 > JavaScript >

dtree网页树状菜单及传递对象集合到js内,动态生成节点

2012-04-14

最近要做一个联系人的选择框,选择联系人后,将联系人的手机号添加到网页的输入框,可以支持复选框。在winform端,树状菜单是非常有用的,实现这个是非常便捷的,所以我想到在页面放入一个树状菜单的。我选择了d...

最近要做一个联系人的选择框,选择联系人后,将联系人的手机号添加到网页的输入框,可以支持复选框。在winform端,树状菜单是非常有用的,实现这个是非常便捷的,所以我想到在页面放入一个树状菜单的。我选择了dtree这个工具,网络上还有很多方法实现页面树状菜单的,不过我觉得这个比较好用的,而且配置比较简单,运用上上手很快。dtree是纯js的,所以不用导入jar包,并且配置只要在js内配置就好了。而且现在网络上有很多高手修改后的改良版,加了checkbox,更加方便。在开发过程中,最难的就是数据的交互的,因为dtree是纯js的,所以不存在和后台交互的方法,我的办法是先通过后台交互,将数据传递到页面,然后再传递到js内。后台传递到页面的数据我拼接成一个字符串,然后在js内切割,将数据整合成数组。
后台数据处理代码:
public String GetLinkManByDID(){
try {
directories = this.directoryService.GetAllDirecoty();
selectlinkMans = this.linkManService.GetAllLinkMans();
String direStringstring = "";
String linkString = "";
for (int i = 0; i < directories.size(); i++) {
if (i<directories.size()-1) {
direStringstring+=directories.get(i).getID()+"-"+directories.get(i).getDirectoryName()+"+";
}
else {
direStringstring+=directories.get(i).getID()+"-"+directories.get(i).getDirectoryName();
}
}
for (int i = 0; i < selectlinkMans.size(); i++) {
if (i<selectlinkMans.size()-1) {
linkString+=selectlinkMans.get(i).getDirectory().getID()+"-"+selectlinkMans.get(i).getName()+"-"+selectlinkMans.get(i).getPhoneNum()+"+";
}
else {
linkString+=selectlinkMans.get(i).getDirectory().getID()+"-"+selectlinkMans.get(i).getName()+"-"+selectlinkMans.get(i).getPhoneNum();
}
}
ActionContext.getContext().getSession().put("directories", direStringstring);
ActionContext.getContext().getSession().put("allLinkMans", linkString);
} catch (Exception e) {
e.printStackTrace();
}
return SUCCESS;
}
我是用s2sh款家的,所以数据存放到session中方式是
ActionContext.getContext().getSession().put(key, value)

<script type="text/javascript">
var linkmans= [];
var dires = [];
//linkmans = "${directories}".replace(&#39;[&#39;,&#39;&#39;).replace(&#39;]&#39;,&#39;&#39;).split(&#39;,&#39;);
linkmans="${allLinkMans}".split(&#39;,&#39;);
dires = "${directories}".split(&#39;,&#39;);
treeload(linkmans[0],dires[0]);
</script>
treeload 是我自己编写的一个js文件内的方法。
js:
function treeload(linkmans , dires){
var linklist= String2linklist(linkmans);
var direslist = String2direlist(dires);
d = new dTree(&#39;d&#39;,&#39;./&#39;);
d.config.checkbox=true;//显示checkbox
d.config.objValueId=&#39;phoneNums&#39;;
d.icon.root=&#39;images/hr/home.png&#39;,
d.icon.folder=&#39;images/hr/group.gif&#39;,
d.icon.folderOpen=&#39;images/hr/group.gif&#39;,
d.icon.node=&#39;images/hr/nan.gif&#39;,
d.add(0,-1,&#39;联系人&#39;,null);
var int = 0;
var direids = new Array();
var direpid= new Array();
for ( int; int < direslist.length; int++) {
d.add(int+1,0,direslist[int].name,false);
direids.push(direslist[int].id);
direpid.push(int+1);
}
d.add(int+1,0,&#39;全部联系人&#39;,false);
direpid.push(int+1);
for ( var int2 = 0; int2 < linklist.length; int2++) {
for ( var int3 = 0; int3 < direpid.length-1; int3++) {
if(linklist[int2].did==direids[int3])
{
int++;
d.add(int+1,direpid[int3],linklist[int2].name,false,linklist[int2].phone);
}
}
}
for ( var int4 = 0; int4 < linklist.length; int4++) {
int++;
d.add(int+1,direpid[direpid.length-1],linklist[int4].name,false,linklist[int4].phone);
}

document.write(d);
}
function String2linklist(linkmans){
var linkarray = new Array();
var a = linkmans.split(&#39;+&#39;);
// alert(a[0]);
for ( var int = 0; int < a.length; int++) {
var b = a[int].split(&#39;-&#39;);
// alert(b[2]);
linkarray.push(new linkman(b[0],b[1],b[2]));
}
return linkarray;
}
function String2direlist(dires){
var direlist = new Array();
var a = dires.split(&#39;+&#39;);
for ( var int = 0; int < a.length; int++) {
var b = a[int].split(&#39;-&#39;);
// alert(b[1]);
direlist.push(new dire(b[0],b[1]));
}
return direlist;
}
function linkman(Did,name,phone){
this.did = Did;
this.name = name ;
this.phone=phone;
}
function dire(id ,name){
this.id= id;
this.name = name;
}
最后,效果图

imageimage


我改写的dtree 的js:

// Node object

function Node(id, pid, name, checked, value, icon ,url, title, target, iconOpen, open) {

this.id = id;

this.pid = pid;

this.name = name;
//是否在该节点添加复选框并设置选中状态,true:选中,false:不选中,null:不添加
this.checked = checked==null?null:(checked || false);

this.value = value;//增加value属性,选中复选框,输入框内得到的就是这个value值

this.url = url;

this.title = title;

this.target = target;

this.icon = icon;

this.iconOpen = iconOpen;

this._io = open || false;

this._is = false;

this._ls = false;

this._hc = false;

this._ai = 0;

this._p;

};

// Tree object

function dTree(objName, path) {
//路径
this.path = path ||&#39;&#39;;
//加载css文件
this.loadCssFile(this.path+&#39;dtree.css&#39;);


this.config = {

target : null,

folderLinks : true,

useSelection : true,

useCookies : true,

useLines : true,

useIcons : true,

useStatusText : false,

closeSameLevel : false,

inOrder : false,
//是否显示复选框,true显示,false不显示
checkbox:false,
objValueId:&#39;&#39;

}

this.icon = {

root : this.path + &#39;images/img/base.gif&#39;,

folder : this.path + &#39;images/img/folder.gif&#39;,

folderOpen : this.path + &#39;images/img/folderopen.gif&#39;,

node : this.path + &#39;images/img/page.gif&#39;,

empty : this.path + &#39;images/img/empty.gif&#39;,

line : this.path + &#39;images/img/line.gif&#39;,

join : this.path + &#39;images/img/join.gif&#39;,

joinBottom : this.path + &#39;images/img/joinbottom.gif&#39;,

plus : this.path + &#39;images/img/plus.gif&#39;,

plusBottom : this.path + &#39;images/img/plusbottom.gif&#39;,

minus : this.path + &#39;images/img/minus.gif&#39;,

minusBottom : this.path + &#39;images/img/minusbottom.gif&#39;,

nlPlus : this.path + &#39;images/img/nolines_plus.gif&#39;,

nlMinus : this.path + &#39;images/img/nolines_minus.gif&#39;

};

this.obj = objName;

this.aNodes = [];

this.aIndent = [];

this.root = new Node(-1);

this.selectedNode = null;

this.selectedFound = false;

this.completed = false;

};
//设置选中节点
dTree.prototype.checkedNodes=function(){
if(this.config.objValueId==&#39;&#39;){
return;
}
var val=document.getElementById(this.config.objValueId).value;
if(val==&#39;&#39;){
return;
}
val=val.split(&#39;,&#39;);
var o=null;
for(var i=0;i<val.length;i++){
o=document.getElementById(&#39;cbx_&#39;+this.obj+val[i]);
if(o){
o.checked=true;
}
}
};
//实现输入框内自动输入选中项的value值
dTree.prototype.update=function(){
if(this.config.objValueId==&#39;&#39;){
return;
}
var cbx=null,v=[];
// v.push(aa);
var ns=this.aNodes;
for(var i=0;i<ns.length;i++){
cbx=document.getElementById(&#39;cbx_&#39;+this.obj+ns[i].id);
if(cbx){
if(cbx.checked){
if(ns[i].pid!=&#39;0&#39;){
v.push(cbx.value);//原先是得到节点的id的,换成value,可以实现选中联系人,得到号码。
}
}
}
}
document.getElementById(this.config.objValueId).value=v.join();
};
//加载css文件

dTree.prototype.loadCssFile=function (file) {
try{
var head=document.getElementsByTagName("head")[0];
var links=head.getElementsByTagName(&#39;link&#39;);
var i=0;
for(var i=0;i<links.length;i++){
if(links[i].getAttribute(&#39;href&#39;).toLowerCase().indexOf(file.toLowerCase())>-1){
return;
}
}
var f = document.createElement("link");
f.setAttribute("rel", "stylesheet");
f.setAttribute("type", "text/css");
f.setAttribute("href", file);
head.appendChild(f);
}catch(ex){
alert(&#39;加载css文件出错:&#39;+ex.message);
}
};

// Adds a new node to the node array

dTree.prototype.add = function(id, pid, name, checked, value,icon,url, title, target,iconOpen, open) {

this.aNodes[this.aNodes.length] = new Node(id, pid, name, checked, value,icon,url, title, target, iconOpen, open);

};

// Open/close all nodes

dTree.prototype.openAll = function() {

this.oAll(true);

};

dTree.prototype.closeAll = function() {

this.oAll(false);

};

// Outputs the tree to the page

dTree.prototype.toString = function() {

var str = &#39;<div class="dtree" id="dTree_&#39;+this.obj+&#39;">\n&#39;;

if (document.getElementById) {

if (this.config.useCookies) this.selectedNode = this.getSelected();

str += this.addNode(this.root);

} else str += &#39;Browser not supported.&#39;;

str += &#39;</div>&#39;;

if (!this.selectedFound) this.selectedNode = null;

this.completed = true;

return str;

};

// Creates the tree structure

dTree.prototype.addNode = function(pNode) {

var str = &#39;&#39;;

var n=0;

if (this.config.inOrder) n = pNode._ai;

for (n; n<this.aNodes.length; n++) {

if (this.aNodes[n].pid == pNode.id) {

var cn = this.aNodes[n];

cn._p = pNode;

cn._ai = n;

this.setCS(cn);

if (!cn.target && this.config.target) cn.target = this.config.target;

if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id);

if (!this.config.folderLinks && cn._hc) cn.url = null;

if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) {

cn._is = true;

this.selectedNode = n;

this.selectedFound = true;

}

str += this.node(cn, n);

if (cn._ls) break;

}

}

return str;

};

// Creates the node icon, url and text

dTree.prototype.node = function(node, nodeId) {

var str = &#39;<div class="dTreeNode">&#39; + this.indent(node, nodeId);

if (this.config.useIcons) {

if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node.pid==0) ? this.icon.folder : this.icon.node);
//node.pid==0 这个条件是我自己改的,如果群组内无人的话,还是用群组的icon,而不是联系人的icon,大家可以自己试试的
if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node;

if (this.root.id == node.pid) {

node.icon = this.icon.root;

node.iconOpen = this.icon.root;

}

str += &#39;<img id="i&#39; + this.obj + nodeId + &#39;" src="&#39; + ((node._io) ? node.iconOpen : node.icon) + &#39;" alt="" />&#39;;

}
/***添加checkbox显示***/
if(this.config.checkbox&&node.checked!=null){
str += &#39;<input &#39;+ (node.checked?&#39;checked=\"checked\"&#39;:&#39;&#39;) +&#39; onclick=\"javascript: &#39; + this.obj + (node._hc &&node.pid != this.root.id?&#39;.o(&#39; + nodeId + &#39;)&#39;:&#39;.update()&#39;)+&#39;;\" type=\"checkbox\" value=\"&#39;+node.value+&#39;\" name=\"cbx_&#39;+this.obj+&#39;\" id=\"cbx_&#39;+ this.obj + nodeId+&#39;\" title=\"&#39;+node.name+&#39;\"\/>&#39;;
}

if (node.url) {

str += &#39;<a id="s&#39; + this.obj + nodeId + &#39;" class="&#39; + ((this.config.useSelection) ? ((node._is ? &#39;nodeSel&#39; : &#39;node&#39;)) : &#39;node&#39;) + &#39;" href="&#39; + node.url + &#39;"&#39;;

if (node.title) str += &#39; title="&#39; + node.title + &#39;"&#39;;

if (node.target) str += &#39; target="&#39; + node.target + &#39;"&#39;;

if (this.config.useStatusText) str += &#39; onmouseover="window.status=\&#39;&#39; + node.name + &#39;\&#39;;return true;" onmouseout="window.status=\&#39;\&#39;;return true;" &#39;;

if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc))

str += &#39; onclick="javascript: &#39; + this.obj + &#39;.s(&#39; + nodeId + &#39;);"&#39;;

str += &#39;>&#39;;

}

else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)

str += &#39;<a href="javascript: &#39; + this.obj + &#39;.o(&#39; + nodeId + &#39;);" class="node">&#39;;

str += node.name;

if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += &#39;</a>&#39;;

str += &#39;</div>&#39;;

if (node._hc) {

str += &#39;<div id="d&#39; + this.obj + nodeId + &#39;" class="clip" style="display:&#39; + ((this.root.id == node.pid || node._io) ? &#39;block&#39; : &#39;none&#39;) + &#39;;">&#39;;

str += this.addNode(node);

str += &#39;</div>&#39;;

}

this.aIndent.pop();

return str;

};

// Adds the empty and line icons

dTree.prototype.indent = function(node, nodeId) {

var str = &#39;&#39;;

if (this.root.id != node.pid) {

for (var n=0; n<this.aIndent.length; n++)

str += &#39;<img src="&#39; + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + &#39;" alt="" />&#39;;

(node._ls) ? this.aIndent.push(0) : this.aIndent.push(1);

if (node._hc) {

str += &#39;<a href="javascript: &#39; + this.obj + &#39;.o(&#39; + nodeId + &#39;);"><img id="j&#39; + this.obj + nodeId + &#39;" src="&#39;;

if (!this.config.useLines) str += (node._io) ? this.icon.nlMinus : this.icon.nlPlus;

else str += ( (node._io) ? ((node._ls && this.config.useLines) ? this.icon.minusBottom : this.icon.minus) : ((node._ls && this.config.useLines) ? this.icon.plusBottom : this.icon.plus ) );

str += &#39;" alt="" /></a>&#39;;

} else str += &#39;<img src="&#39; + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + &#39;" alt="" />&#39;;

}

return str;

};

// Checks if a node has any children and if it is the last sibling

dTree.prototype.setCS = function(node) {

var lastId;

for (var n=0; n<this.aNodes.length; n++) {

if (this.aNodes[n].pid == node.id) node._hc = true;

if (this.aNodes[n].pid == node.pid) lastId = this.aNodes[n].id;

}

if (lastId==node.id) node._ls = true;

};

// Returns the selected node

dTree.prototype.getSelected = function() {

var sn = this.getCookie(&#39;cs&#39; + this.obj);

return (sn) ? sn : null;

};

// Highlights the selected node

dTree.prototype.s = function(id) {

if (!this.config.useSelection) return;

var cn = this.aNodes[id];

if (cn._hc && !this.config.folderLinks) return;

if (this.selectedNode != id) {

if (this.selectedNode || this.selectedNode==0) {

eOld = document.getElementById("s" + this.obj + this.selectedNode);

eOld.className = "node";

}

eNew = document.getElementById("s" + this.obj + id);

eNew.className = "nodeSel";

this.selectedNode = id;

if (this.config.useCookies) this.setCookie(&#39;cs&#39; + this.obj, cn.id);

}

};

// Toggle Open or close

dTree.prototype.o = function(id) {

var cn = this.aNodes[id];

this.nodeStatus(!cn._io, id, cn._ls);

cn._io = !cn._io;

if (this.config.closeSameLevel) this.closeLevel(cn);

if (this.config.useCookies) this.updateCookie();
//更新选中值if(this.config.objValueId!=&#39;&#39;)
this.update();

};

// Open or close all nodes

dTree.prototype.oAll = function(status) {

for (var n=0; n<this.aNodes.length; n++) {

if (this.aNodes[n]._hc && this.aNodes[n].pid != this.root.id) {

this.nodeStatus(status, n, this.aNodes[n]._ls)

this.aNodes[n]._io = status;

}

}

if (this.config.useCookies) this.updateCookie();

};

// Opens the tree to a specific node

dTree.prototype.openTo = function(nId, bSelect, bFirst) {

if (!bFirst) {

for (var n=0; n<this.aNodes.length; n++) {

if (this.aNodes[n].id == nId) {

nId=n;

break;

}

}

}

var cn=this.aNodes[nId];

if (cn.pid==this.root.id || !cn._p) return;

cn._io = true;

cn._is = bSelect;

if (this.completed && cn._hc) this.nodeStatus(true, cn._ai, cn._ls);

if (this.completed && bSelect) this.s(cn._ai);

else if (bSelect) this._sn=cn._ai;

this.openTo(cn._p._ai, false, true);

};

// Closes all nodes on the same level as certain node

dTree.prototype.closeLevel = function(node) {

for (var n=0; n<this.aNodes.length; n++) {

if (this.aNodes[n].pid == node.pid && this.aNodes[n].id != node.id && this.aNodes[n]._hc) {

this.nodeStatus(false, n, this.aNodes[n]._ls);

this.aNodes[n]._io = false;

this.closeAllChildren(this.aNodes[n]);

}

}

}

// Closes all children of a node

dTree.prototype.closeAllChildren = function(node) {

for (var n=0; n<this.aNodes.length; n++) {

if (this.aNodes[n].pid == node.id && this.aNodes[n]._hc) {

if (this.aNodes[n]._io) this.nodeStatus(false, n, this.aNodes[n]._ls);

this.aNodes[n]._io = false;

this.closeAllChildren(this.aNodes[n]);

}

}

}

// Change the status of a node(open or closed)

dTree.prototype.nodeStatus = function(status, id, bottom) {
try{

eDiv = document.getElementById(&#39;d&#39; + this.obj + id);

eJoin = document.getElementById(&#39;j&#39; + this.obj + id);

//****选择
if(this.config.checkbox){
cbx = document.getElementById(&#39;cbx_&#39; + this.obj + id);
cbx.checked=status;
cbxChild= eDiv.getElementsByTagName(&#39;input&#39;);
for(var i=0 ;i<cbxChild.length;i++){
cbxChild[i].checked=status;
}
}
//****选择


if (this.config.useIcons) {

eIcon = document.getElementById(&#39;i&#39; + this.obj + id);

eIcon.src = (status) ? this.aNodes[id].iconOpen : this.aNodes[id].icon;

}

eJoin.src = (this.config.useLines)?

((status)?((bottom)?this.icon.minusBottom:this.icon.minus):((bottom)?this.icon.plusBottom:this.icon.plus)):

((status)?this.icon.nlMinus:this.icon.nlPlus);

eDiv.style.display = (status) ? &#39;block&#39;: &#39;none&#39;;
}catch(ex){
}

};

// [Cookie] Clears a cookie

dTree.prototype.clearCookie = function() {

var now = new Date();

var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24);

this.setCookie(&#39;co&#39;+this.obj, &#39;cookieValue&#39;, yesterday);

this.setCookie(&#39;cs&#39;+this.obj, &#39;cookieValue&#39;, yesterday);

};

// [Cookie] Sets value in a cookie

dTree.prototype.setCookie = function(cookieName, cookieValue, expires, path, domain, secure) {

document.cookie =

escape(cookieName) + &#39;=&#39; + escape(cookieValue)

+ (expires ? &#39;; expires=&#39; + expires.toGMTString() : &#39;&#39;)

+ (path ? &#39;; path=&#39; + path : &#39;&#39;)

+ (domain ? &#39;; domain=&#39; + domain : &#39;&#39;)

+ (secure ? &#39;; secure&#39; : &#39;&#39;);

};

// [Cookie] Gets a value from a cookie

dTree.prototype.getCookie = function(cookieName) {

var cookieValue = &#39;&#39;;

var posName = document.cookie.indexOf(escape(cookieName) + &#39;=&#39;);

if (posName != -1) {

var posValue = posName + (escape(cookieName) + &#39;=&#39;).length;

var endPos = document.cookie.indexOf(&#39;;&#39;, posValue);

if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue, endPos));

else cookieValue = unescape(document.cookie.substring(posValue));

}

return (cookieValue);

};

// [Cookie] Returns ids of open nodes as a string

dTree.prototype.updateCookie = function() {

var str = &#39;&#39;;

for (var n=0; n<this.aNodes.length; n++) {

if (this.aNodes[n]._io && this.aNodes[n].pid != this.root.id) {

if (str) str += &#39;.&#39;;

str += this.aNodes[n].value;

}

}

this.setCookie(&#39;co&#39; + this.obj, str);

};

// [Cookie] Checks if a node id is in a cookie

dTree.prototype.isOpen = function(id) {

var aOpen = this.getCookie(&#39;co&#39; + this.obj).split(&#39;.&#39;);

for (var n=0; n<aOpen.length; n++)

if (aOpen[n] == id) return true;

return false;

};

// If Push and pop is not implemented by the browser

if (!Array.prototype.push) {

Array.prototype.push = function array_push() {

for(var i=0;i<arguments.length;i++)

this[this.length]=arguments[i];

return this.length;

}

};

if (!Array.prototype.pop) {

Array.prototype.pop = function array_pop() {

lastElement = this[this.length-1];

this.length = Math.max(this.length-1,0);

return lastElement;

}

};

大家可以借鉴一下,自己弄个小工程试试,dtree还是不错的。


摘自 超级大富

相关文章
最新文章
热点推荐