为什么每次标题都带个简单呢，看样子我一直走的是低端路线啊。
高端的，留在自己的F盘，默默的一个人享受中。
这公司也贼牛逼了，每天什么事也不让我做，还发工资给我。我要做事啊，跪求啊。
算了，进入正题把，今天酱油时间写的是，TreeView，不过为什么每次都发js 的呢，其实很简单因为我只会js，望给位大虾米们原谅哈。
Coding：
Js：
View Code
//申明：传的的数据必须要有个根节点，且有一定的规范性。
(function () {
var Jusoc = Jusoc || {};
Jusoc = {
_initial: function () { window.Jusoc = Jusoc; },
TreeView: (function () {
var lastNode = 0;
//添加子节点
function AppendChild(obj, val) {
if (obj.childNodes.length > 1) {
obj.childNodes[0].childNodes[0].className = "ex";
}
var div = document.createElement("div");
div.className = "node";
div.setAttribute("preId", val.ParentId);
div.setAttribute("nodeId", val.NodeId);
var divsshow = document.createElement("div");
divsshow.className = "show";
div.appendChild(divsshow);
var span = document.createElement("span");
var span1 = document.createElement("span");
var span2 = document.createElement("span");
var span3 = document.createElement("span");
var txt = document.createElement("input");
span.onclick = ExspanOrClose;
span.className = "blank";
span1.innerHTML = val.NodeName;
span1.className = "ct";
span2.innerHTML = "Add";
span2.className = "out ct";
span2.onclick = function () { if (txt.value == "") { alert("请输入节点名称！"); return; } AppendChild(div, { NodeName: txt.value, NodeId: lastNode + 1, ParentId: val.NodeId }); span.className = "ex"; lastNode = lastNode + 1; };
span3.innerHTML = "Remove";
span3.onclick = function () { RemoveNode(div); };
span3.className = "out ct";
span2.style.display = "none";
span3.style.display = "none";
txt.type = "text";
txt.style.display = "none";
hover(span2, "in ct", "out ct");
hover(span3, "in ct", "out ct");
hover(divsshow, "show hover", "show", function () {
span2.style.display = "block";
span3.style.display = "block";
txt.style.display = "block";
}, function () {
span2.style.display = "none";
span3.style.display = "none";
txt.style.display = "none";
});
divsshow.appendChild(span);
divsshow.appendChild(span1);
divsshow.appendChild(span2);
divsshow.appendChild(span3);
divsshow.appendChild(txt);
obj.appendChild(div);
return div;
}
function hover(obj, classIn, classOut, fn1, fn2) {
obj.onmouseover = function () {
obj.className = classIn;
if (fn1)
fn1();
}
obj.onmouseout = function () {
obj.className = classOut;
if (fn2)
fn2();
}
}
function RemoveNode(obj) {
//传入的为要删除的div 包括 一个div 内部包括span 和 0或多个 div 节点
var pobj = obj.parentNode;
pobj.removeChild(obj);
if (pobj.childNodes.length == 1) {
pobj.childNodes[0].childNodes[0].className = "blank";
}
}
//点击事件 伸缩或者扩张
function ExspanOrClose() {
var obj = this.parentNode.parentNode;
var flag = null;
var children = obj.childNodes;
if (children.length > 1) {
flag = children[1].style.display;
}
else {
return;
}
if (flag == "none" && flag != null) {
for (var i = 1; i < children.length; i++) {
children[i].style.display = "block";
}
this.className = "ex";
}
else {
for (var i = 1; i < children.length; i++) {
children[i].style.display = "none"
}
this.className = "cl";
}
}
//判断是否为数组
function IsArray(obj) {
return obj && typeof (obj) == "object" && typeof (obj.length) == "number" && typeof (obj.splice) == "function";
}
function _createTree(treeNode, Data, container) {
var root = AppendChild(container, treeNode);
for (var i = 0; i < Data.length; i++) {
if (Data[i].ParentId == treeNode.NodeId) {
_createTree(Data[i], Data, root);
}
}
//如果没有根节点 则 要从新做处理， 此处暂不做处理。
}
function CreateTree(Data, obj) {
for (var i = 0; i < Data.length; i++) {
if (Data[i].ParentId == 0) {
_createTree(Data[i], Data, obj);
}
if (Data[i].NodeId > lastNode) {
lastNode = Data[i].NodeId;
}
}
}
function _initial(Data, container) {
//判断是否有数据传过来 前提 必须是 array
var obj = container;
if (IsArray(Data)) {
if (!container) {
obj = document.body;
}
CreateTree(Data, obj);
}
else {
if (!container) {
obj = document.body;
}
obj.appendChild(AppendChild(obj, { NodeName: "根节点", NodeId: 1, ParentId: 0 }));
}
}
function _export(container, storage) {
if (container) {
var children = container.childNodes;
if (container.className != "node") {
children = container.childNodes[0].childNodes;
container = container.childNodes[0];
}
storage.push({ NodeName: children[0].childNodes[1].innerHTML, NodeId: container.attributes["nodeId"].nodeValue, ParentId: container.attributes["preId"].nodeValue });
if (children.length > 1) {
for (var i = 1; i < children.length; i++) {
_export(children[i], storage);
}
}
}
}
return { Initail: _initial, Export: function (container) {
var storage = [];
_export(container, storage);
return storage;
}
}
})()
}
Jusoc._initial();
})()
Html：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/TreeView.Jusoc.js" type="text/javascript"></script>
<style type="text/css">
/*类的命名 看不懂木有关系 你猜*/
*{ margin:0; padding:0}
body{font-size:12px;}
div{clear:both;}
.node{padding-left:20px; text-align:left}
.show{ height:28px; line-height:28px;}
.show .hover{ background:#9819fa;}
.show span{display:block;float:left;}
.show .ct{ margin:1px;border:1px solid #000; background:#696969; color:#fff; padding:2px; cursor:pointer; line-height:18px; height:18px}
.show .in{ background:#9234ff;}
.show .out{ background:#696969; cursor:pointer}
.show .blank{width:16px; height:16px;margin-right:5px}
.show .ex{width:16px; height:16px; background:url(images/expand.gif); margin-top:5px;cursor:pointer;margin-right:5px}
.show .cl{width:16px; height:16px; background:url(images/close.gif);margin-top:5px;cursor:pointer;margin-right:5px}
</style>
<script type="text/javascript">
window.onload =function () {
var data = [{ NodeName: "根节点", NodeId: 1, ParentId: 0 },
{ NodeName: "第一子节点", NodeId: 2, ParentId: 1 },
{ NodeName: "第二子节点", NodeId: 3, ParentId: 1 },
{ NodeName: "第三子节点", NodeId: 4, ParentId: 1 },
{ NodeName: "1-1", NodeId: 5, ParentId: 2 },
{ NodeName: "1-2", NodeId: 6, ParentId: 2 },
{ NodeName: "2-2", NodeId: 7, ParentId: 3 },
{ NodeName: "2-3", NodeId: 8, ParentId: 3 },
{ NodeName: "2-4", NodeId: 9, ParentId: 3 },
{ NodeName: "2-5", NodeId: 10, ParentId: 3 },
{ NodeName: "3-1", NodeId: 11, ParentId: 4 },
{ NodeName: "3-2", NodeId: 12, ParentId: 4 },
{ NodeName: "3-1-1", NodeId: 13, ParentId: 11 },
{ NodeName: "3-1-2", NodeId: 14, ParentId: 11 },
{ NodeName: "3-2-1", NodeId: 15, ParentId: 12 },
{ NodeName: "3-2-2", NodeId: 16, ParentId: 12 },
{ NodeName: "3-2-3", NodeId: 17, ParentId: 12}];
Jusoc.TreeView.Initail(data, document.getElementById("container"));
document.getElementById("Ex").onclick =function () {
var storege = Jusoc.TreeView.Export(document.getElementById("container"));
var html ="";
for (var i =0; i < storege.length; i++) {
html +="NodeName:"+ storege[i].NodeName +",NodeId:"+ storege[i].NodeId +",ParentId:"+ storege[i].ParentId +"\n";
}
alert(html);
}
}
</script>
</head>
<body>
<div id="container" style="border:1px solid #000; 450px;"></div>
<input type="button" value="导出数据" id="Ex"/>
</body>
</html>
还是给个截图吧，不然都不知道我写的是什么，不过我美工技术有限，样式有点惨不忍睹，你们懂的。
总结：搞定，HOHO~