📄 1.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0022)http://hi.baidu.com/skyperson/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
ul,li{list-style:none; padding:0 0 0 20px; margin:0 0 0 20px;}
-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var jsonTxt=function(value,name,fathernode){
this.value=value;
this.name=name;
this.fathernode=fathernode;
return '{"value":' + '"' + this.value + '",' + '"name":' + '"' + this.name + '",' + '"fathernode":' + '"' + this.fathernode + '"},';
}
var createRoot=function(){
tempId=new Date().getTime();
rootId="root_" + tempId;
nodeId="node_" + tempId;
addId="add_" + tempId;
delId="del_" + tempId;
var template=$(document).find("#template");
var cloneTemplate=template.clone(true);
cloneTemplate.attr("id",rootId);
cloneTemplate.attr("fathernode","");
cloneTemplate.find("input[@id=template]").attr({id:nodeId,name:nodeId});
cloneTemplate.find("a[@id^=add_]").attr("id",addId);
cloneTemplate.find("a[@id^=del_]").attr("id",delId);
$("#tree").append(cloneTemplate.show());
}
var setRoot=function(nodeId,val){
tempId=nodeId.split("_")[1];
rootId="root_" + tempId;
nodeId="node_" + tempId;
addId="add_" + tempId;
delId="del_" + tempId;
var template=$(document).find("#template");
var cloneTemplate=template.clone(true);
cloneTemplate.attr("id",rootId);
cloneTemplate.attr("fathernode","");
cloneTemplate.find("input[@id=template]").attr({id:nodeId,name:nodeId,value:val});
cloneTemplate.find("a[@id^=add_]").attr("id",addId);
cloneTemplate.find("a[@id^=del_]").attr("id",delId);
$("#tree").append(cloneTemplate.show());
}
var createNode=function(){
tempId=new Date().getTime();
rootId="root_" + tempId;
nodeId="node_" + tempId;
addId="add_" + tempId;
delId="del_" + tempId;
$_this = $(this);
var thisid=$_this.attr('id').split("_")[1];
var parentNode=$(document).find("#root_"+thisid);
var cloneTemplate=$(document).find("#template").clone(true);
cloneTemplate.attr("id",rootId);
cloneTemplate.attr("fathernode","root_"+thisid);
cloneTemplate.find("input[@id=template]").attr({id:nodeId,name:nodeId});
cloneTemplate.find("a[@id^=add_]").attr("id",addId);
cloneTemplate.find("a[@id^=del_]").attr("id",delId);
parentNode.append(cloneTemplate.show());
}
var setNode=function(nodeId,fatherId,value){
currId=nodeId.split("_")[1];
addId="add_" + currId;
delId="del_" + currId;
var parentNode=$(document).find("#"+fatherId);
var cloneTemplate=$(document).find("#template").clone(true);
cloneTemplate.attr("id","root_"+currId);
cloneTemplate.attr("fathernode",fatherId);
cloneTemplate.find("input[@id=template]").attr({id:nodeId,name:nodeId,value:value});
cloneTemplate.find("a[@id^=add_]").attr("id",addId);
cloneTemplate.find("a[@id^=del_]").attr("id",delId);
parentNode.append(cloneTemplate.show());
}
var createJSON=function(){
var treeJsonObj="";
$("div#tree input").each(function(){
var thisid=$(this).attr('id').split("_")[1];
var currNode=$(document).find("#root_"+thisid);
var fathernode=$(currNode).attr("fathernode");
var value=$(this).attr("value");
var name=$(this).attr("name");
treeJsonObj+=jsonTxt(value,name,fathernode);
});
reg = new RegExp("(,$)","");
treeJsonObj = treeJsonObj.replace(reg,'');
treeJsonObj = "{node:[" + treeJsonObj +"]}";
$("#JSON_Div").html(treeJsonObj);
}
var loadJSON=function(){
$.getJSON("jsonData.js", function(json){
$.each(json.node,function(i){
currObj=json.node[i];
if(currObj.fathernode==""){
setRoot(currObj.name,currObj.value);
}else{
setNode(currObj.name,currObj.fathernode,currObj.value);
}
});
});
};
var deleteNode=function(){
$_this = $(this);
var thisid=$_this.attr('id').split("_")[1];
var parentNode=$(document).find("#root_"+thisid);
parentNode.remove();
}
$(document).ready(function(){
$("#add_root").bind("click", function(){
createRoot.call(this);
});
$("#add_node").bind("click", function(){
createNode.call(this);
});
$("#del_node").bind("click", function(){
deleteNode.call(this);
});
$("#create").click(function(){
createJSON.call();
});
$("#load").click(function(){
loadJSON.call();
});
});
</script>
</head>
<body>
<span style="font-size:12px; color:#333"><a href="#" id="add_root">添加根节点</a></span>
<hr />
<ul id="template" style="display:none;" fathernode="fathernode">
<li><input type="text" value="" id="template" name="template"/> <span style="font-size:12px; color:#333"><a href="#" id="add_node">添加子节点</a> | <a href="#" id="del_node">删除</a></span></li>
</ul>
<div id="tree"></div>
<input id="create" type="button" value="生成数组"/>
<input id="load" type="button" value="读取数组"/>
<div id="JSON_Div"></div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -