<html>
<link rel="stylesheet" href="ztree/zTreeStyle.css" type="text/css"></link>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript" src="jquery.ztree.all-3.2.min.js"></script>
<script>
jQuery(document).ready(function(){
var settings={
data:{
simpleData:{
enable:true,
idKey:"id",
pIdKey:"pId"
}
},
view:{
showIcon:false,
dblClickExpand:false
},
callback:{
onDblClick:function(event,treeId,treeNode){
ztree.editName(treeNode);
}
},
edit:{
enable:true,
showRenameBtn:true
}
}
jQuery.fn.zTree.init(jQuery("#tree"),settings,null);
var ztree=jQuery.fn.zTree.getZTreeObj("tree");
jQuery("#parseBtn").click(function(){
var treeNodes=parseTree(jQuery("#jsonText").val());
jQuery.fn.zTree.init(jQuery("#tree"),settings,treeNodes);
});
jQuery("#unParseBtn").click(function(){
jQuery("#jsonText").val(formatJson(parseFromTree(ztree)));
});
jQuery("#formatBtn").click(function(){
jQuery("#jsonText").val(formatJson(jQuery("#jsonText").val()));
});
jQuery("#addBtn").click(function(){
var nodes=ztree.getSelectedNodes();
if(nodes.length==0){
alert("请至少选择一个父节点！");
}else{
var node=nodes[0];
if(node.isParent){
ztree.addNodes(node,{id:node.id,pId:node.id+""+(node.children.length+1),name:"新增节点"});
}else{
ztree.addNodes(node,{id:node.id,pId:node.id+"0",name:"新增节点"});
}
}
});
jQuery("#expandBtn").click(function(){
var selectedNodes=ztree.getSelectedNodes();
if(selectedNodes.length==0){
ztree.expandAll(true);
}else{
ztree.expandNode(selectedNodes[0],true,true,true);
}
});
});
//从树反解析
function parseFromTree(tree){
var json;
var nodes=tree.getNodes();
if(nodes.length==1){
json=getJsonFromNode(nodes[0]);
}else{
json=[];
for(var i in nodes){
json[i]=getJsonFromNode(nodes[i]);
}
}
return json;
}
function getJsonFromNode(node){
if(!node.isParent){
return node.name;
}else{
var children=node.children;
if(children.length==1){
if(!children[0].isParent){
return children[0].name;
}else{
var json={};
for(var i in children){
json[children[i].name]=getJsonFromNode(children[i]);
}
return json;
}
}else{
var isArray=true;
for(var i=0;i<children.length;i++){
if(children[i].isParent){
isArray=false;
}
}
if(isArray){
var json=[];
for(var i in children){
json[i]=children[i].name;
}
return json;
}else{
var json={};
for(var i in children){
json[children[i].name]=getJsonFromNode(children[i]);
}
return json;
}
}
return json;
}
}
//解析成树对象
function parseTree(str){
var json=eval('('+str+')');
var result=[];
var index=1;
if(!isArray(json)){
result.push({id:0,pId:null,name:""});
}
for(var i in json){
result.push({id:index,pId:0,name:i});
result=result.concat(parseTreeJson(json[i],index));
index++;
}
return result;
}
function parseTreeJson(json,parentId){
var index=1;
var result=[];
if(typeof(json)=='object'){
for(var i in json){
if(isArray(json) && typeof(json[i])!='object'){
result.push({id:parentId+""+index,pId:parentId,name:json[i]});
}else{
result.push({id:parentId+""+index,pId:parentId,name:i});
result=result.concat(parseTreeJson(json[i],parentId+""+index));
}
index++;
}
}else{
result.push({id:parentId+""+index,pId:parentId,name:json});
}
return result;
}
var formatJson = function(json, options) {
var reg = null,
formatted = '',
pad = 0,
PADDING = ' '; // one can also use '\t' or a different number of spaces
// optional settings
options = options || {};
// remove newline where '{' or '[' follows ':'
options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
// use a space after a colon
options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
// begin formatting...
if (typeof json != 'string') {
// make sure we start with the JSON as a string
json = JSON.stringify(json);
} else {
// is already a string, so parse and re-stringify in order to remove extra whitespace
json = eval('('+json+')');
json = JSON.stringify(json);
}
// add newline before and after curly braces
reg = /([\{\}])/g;
json = json.replace(reg, '\r\n$1\r\n');
// add newline before and after square brackets
reg = /([\[\]])/g;
json = json.replace(reg, '\r\n$1\r\n');
// add newline after comma
reg = /(\,)/g;
json = json.replace(reg, '$1\r\n');
// remove multiple newlines
reg = /(\r\n\r\n)/g;
json = json.replace(reg, '\r\n');
// remove newlines before commas
reg = /\r\n\,/g;
json = json.replace(reg, ',');
// optional formatting...
if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
reg = /\:\r\n\{/g;
json = json.replace(reg, ':{');
reg = /\:\r\n\[/g;
json = json.replace(reg, ':[');
}
if (options.spaceAfterColon) {
reg = /\:/g;
json = json.replace(reg, ': ');
}
$.each(json.split('\r\n'), function(index, node) {
var i = 0,
indent = 0,
padding = '';
if (node.match(/\{$/) || node.match(/\[$/)) {
indent = 1;
} else if (node.match(/\}/) || node.match(/\]/)) {
if (pad !== 0) {
pad -= 1;
}
} else {
indent = 0;
}
for (i = 0; i < pad; i++) {
padding += PADDING;
}
formatted += padding + node + '\r\n';
pad += indent;
});
formatted=formatted.replace(/^\s*[\n\r]/,'');
return formatted;
};
function isArray(obj){
return Object.prototype.toString.call(obj)=="[object Array]";
}
</script>
<body>
<table style="margin-left:200px;border:1px solid;" >
<tr >
<td style="border:#000000 1px solid">
字符串
</td>
<td style="border:#000000 1px solid">
视图
</td>
</tr>
<tr>
<td style="border:#000000 1px solid">
<textarea style="width:300;height:350" id="jsonText" >{user:{username:"guzy",password:"guzy"},students:[{a:"x"},{b:"y"}]}</textarea>
</td>
<td valign="top" style="border:#000000 1px solid">
<ul id="tree" class="ztree cb"></ul>
</td>
<tr >
<td style="border:#000000 1px solid">
<input id="parseBtn" type="button" value="解析" >
<input id="formatBtn" type="button" value="格式化" >
</td>
<td style="border:#000000 1px solid">
<input id="unParseBtn" type="button" value="反解析" >
<input id="expandBtn" type="button" value="展开子节点" >
<input id="addBtn" type="button" value="新增子节点" >
</td>
</tr>
</tr>
</table>
</body>
</html>
json可视化编辑工具（页面js实现）
4星 · 超过85%的资源 需积分: 49 54 浏览量
2013-09-10
19:53:23
上传
评论 1
收藏 74KB RAR 举报 
json_visual_deal.rar （18个子文件） 
json_visual_deal 
jquery.ztree.all-3.2.min.js 57KB
myJsonTree.html 7KB jquery-1.7.min.js 92KB ztree zTreeStyle.css 6KB img 
zTreeStandard.png 11KB
zTreeStandard.gif 5KB line_conn.gif 45B loading.gif 381B diy 4.png 399B 1_close.png 601B 3.png 762B 1_open.png 580B 7.png 534B 5.png 710B 2.png 570B 6.png 432B 8.png 529B 9.png 467B
- 1
- 2
前往页