JSON 編輯器實(shí)現(xiàn)代碼

更新時(shí)間：2009年12月06日 00:03:48 作者：

用來簡(jiǎn)單的查看、輔助修改繁雜的JSON數(shù)據(jù)，格式化或者壓縮JJSON，當(dāng)然也可以自由即時(shí)編輯一些簡(jiǎn)單的JSON數(shù)據(jù)。

大家可以輸入或者粘貼一些JSON數(shù)據(jù)來校驗(yàn)是否正確。
按Tab鍵自動(dòng)全文縮進(jìn)格式化。

<script type="text/javascript"><!-- 
/* 
main Object 
*/ 
JE={ 
data:{},/* 關(guān)聯(lián)數(shù)據(jù) */ 
code:false,/* 格式化后的代碼 */ 
oldCode:[],/* 歷史代碼 */ 
editUI:null,/* 關(guān)聯(lián)編輯框 */ 
msgUI:null,/* 信息顯示窗口 */ 
treeUI:null,/* 樹窗口 */ 
name:'JE',/* 實(shí)例名 */ 
root:'<b>JSON無憂</b>',/* 根節(jié)點(diǎn)標(biāo)題 */ 
checkbox:0,/* 是否添加復(fù)框 */ 
hot:null,/* 選中節(jié)點(diǎn) */ 
indent:' ',/*縮進(jìn)符'\t'或者4個(gè)' '*/ 
firstUp:true,/*第一次自動(dòng)刷新*/ 
onclick:Array,/*樹點(diǎn)擊通知*/ 
countInfo:'',/*統(tǒng)計(jì)信息*/ 
formating:false,/* 格式化中(禁止重構(gòu)樹) */ 
ico:{/* 樹圖標(biāo) */ 
//文件夾結(jié)構(gòu)線 
r0:'img?uuid=20166b3094daba4bc6e18817b8301b093a', 
r0c:'img?uuid=208018827ed877e31810e838d33e4ac2b0', 
r1:'img?uuid=2094c793496278bde84be80bb6cb2117f5', 
r1c:'img?uuid=205f2329c537dcfd32b5f33bf642f76fa6', 
r2:'img?uuid=20af62be7c197cae64d3e533f7aaf28c25', 
r2c:'img?uuid=20a005983863e5bc8544cecd8b7f82fcdb', 
//前綴圖片 
nl:'img?uuid=20f508bdc9bb8d98f4529e0fa2475b91bb', 
vl:'img?uuid=20d5de63f4e6927bbb23c377bd1073d26f', 
//文件結(jié)構(gòu)線 
f1:'img?uuid=202ccc639afd44130a3946e9837672479c', 
f2:'img?uuid=20900ceb0053a2f7bd07a22337c4e4c72c', 
root:'img?uuid=2069cf3fd1e53a2bb365f771eac65b50a2', 
//文件夾 
arr:'img?uuid=20b7d6e86f4f288ea097c10b1c0d7f4b6b', 
arrc:'img?uuid=20b7d6e86f4f288ea097c10b1c0d7f4b6b', 
obj:'img?uuid=20c34d1d5d5a4639061e08165c61a97e63', 
objc:'img?uuid=20c34d1d5d5a4639061e08165c61a97e63', 
//文件 
arr2:'img?uuid=20327500502b71ed0278a0cc1bf8f8bb41', 
obj2:'img?uuid=203346cafeedac1fb7628bc886b9b7fb47' 
}, 
toTree:function(){/* JSON轉(zhuǎn)換為樹HTML,同時(shí)格式化代碼 */ 
var draw=[],This=this,ico=this.ico; 
JE.firstUp=false;/*完成首次自動(dòng)構(gòu)造*/ 
var notify=function(prefix/*前綴HTML*/,lastParent/*父是否是尾節(jié)點(diǎn)(確定圖標(biāo)是空白|結(jié)構(gòu)線)*/,name /*節(jié)點(diǎn)名*/,value/*節(jié)點(diǎn)值*/,formObj/* 父是否是對(duì)象(確定子圖標(biāo)) */){/* 構(gòu)造子節(jié)點(diǎn) */ 
var rl=prefix==''?ico.r0:lastParent?ico.r1:ico.r2;/* 配置根節(jié)點(diǎn)圖標(biāo) */ 
if(value&&value.constructor==Array){/* 處理數(shù)組節(jié)點(diǎn) */ 
draw.push('<dl><dt>',This.draw(prefix,rl,ico.arr,name,''),'</dt><dd>');/* 繪制文件夾 */ 
for (var i=0;i<value.length;i++) 
notify(prefix+This.img(lastParent?ico.nl:ico.vl),i==value.length-1,i,value[i]); 
draw.push('</dd></dl>'); 
}else if(value&&typeof value=='object'){/* 處理對(duì)象節(jié)點(diǎn) */ 
draw.push('<dl><dt>',This.draw(prefix,rl,ico.obj,name,''),'</dt><dd>');/* 繪制文件夾 */ 
var len=0,i=0; 
for(var key in value)len++;/* 獲取對(duì)象成員總數(shù) */ 
for(var key in value)notify(prefix+This.img(lastParent?ico.nl:ico.vl),++i==len,key,value[key],true); 
draw.push('</dd></dl>'); 
}else{/* 處理葉節(jié)點(diǎn)(繪制文件) */ 
draw.push('<dl><dt>',This.draw(prefix,lastParent?ico.f1:ico.f2,formObj?ico.obj2:ico.arr2,name,value),'</dt></dl>'); 
}; 
};/* 不是[]或者{}不繪制 */ 
if(typeof this.data=='object'){notify('',true,this.root,this.data);}; 
if(this.treeUI)this.treeUI.innerHTML=draw.join('');/* 顯示在樹窗口 */ 
this.msg('成功構(gòu)造樹視圖!'); 
}, 
draw:function(prevfix,line,ico,name,value){/* 子項(xiàng)HTML構(gòu)造器 */ 
var cmd=false,J=this.ico,imgName=false; 
switch (line) {//傳遞切換圖標(biāo) 
case J.r0:imgName='r0';break; 
case J.r1:imgName='r1';break; 
case J.r2:imgName='r2'; 
} 
if(imgName)cmd=' onclick="'+this.name+'.show(this,\''+imgName+'\')" ';/* 加入折疊命令 */ 
var type=typeof name=='string'?'(對(duì)象成員)':'(數(shù)組索引)'; 
return prevfix+this.img(line,cmd) 
+(this.checkbox?'<input type="checkbox" onclick="'+this.name+'.select(this)" />':'') 
+this.img(ico)+' <a href="javascript:void(0)" href="javascript:void(0)" onclick="'+this.name+'.click(this);" ' 
+'key="'+name+'" val="'+value+'" >' 
+name+type+(value==''?'':' = ')+value+'</a>' 
}, 
img:function(src,attr){/* img HTML構(gòu)造 */ 
return '<img src="'+src+'" src="'+src+'" '+(attr||'')+' />'; 
}, 
click:function(item){/* 子項(xiàng)點(diǎn)擊統(tǒng)一回調(diào) */ 
if(this.hot)this.hot.className=''; 
this.hot=item; 
this.hot.className='hot';/* 切換選中項(xiàng) */ 
this.onclick(item); 
}, 
format:function(txt,compress/*是否為壓縮模式*/){/* 格式化JSON源碼(對(duì)象轉(zhuǎn)換為JSON文本) */ 
if(/^\s*$/.test(txt))return this.msg('數(shù)據(jù)為空,無法格式化! '); 
try{var data=eval('('+txt+')');} 
catch(e){ 
JE.editUI.style.color='red'; 
return this.msg('數(shù)據(jù)源語法錯(cuò)誤,格式化失敗! 錯(cuò)誤信息: '+e.description,'err'); 
}; 
JE.editUI.style.color='#000'; 
var draw=[],last=false,This=this,line=compress?'':'\n',nodeCount=0,maxDepth=0; 
var notify=function(name,value,isLast,indent/*縮進(jìn)*/,formObj){ 
nodeCount++;/*節(jié)點(diǎn)計(jì)數(shù)*/ 
for (var i=0,tab='';i<indent;i++ )tab+=This.indent;/* 縮進(jìn)HTML */ 
tab=compress?'':tab;/*壓縮模式忽略縮進(jìn)*/ 
maxDepth=++indent;/*縮進(jìn)遞增并記錄*/ 
if(value&&value.constructor==Array){/*處理數(shù)組*/ 
draw.push(tab+(formObj?('"'+name+'":'):'')+'['+line);/*縮進(jìn)'[' 然后換行*/ 
for (var i=0;i<value.length;i++) 
notify(i,value[i],i==value.length-1,indent,false); 
draw.push(tab+']'+(isLast?line:(','+line)));/*縮進(jìn)']'換行,若非尾元素則添加逗號(hào)*/ 
}else if(value&&typeof value=='object'){/*處理對(duì)象*/ 
draw.push(tab+(formObj?('"'+name+'":'):'')+'{'+line);/*縮進(jìn)'{' 然后換行*/ 
var len=0,i=0; 
for(var key in value)len++; 
for(var key in value)notify(key,value[key],++i==len,indent,true); 
draw.push(tab+'}'+(isLast?line:(','+line)));/*縮進(jìn)'}'換行,若非尾元素則添加逗號(hào)*/ 
}else{ 
if(typeof value=='string')value='"'+value+'"'; 
draw.push(tab+(formObj?('"'+name+'":'):'')+value+(isLast?'':',')+line); 
}; 
}; 
var isLast=true,indent=0; 
notify('',data,isLast,indent,false); 
this.countInfo='共處理節(jié)點(diǎn)<b>'+nodeCount+'</b>個(gè),最大樹深為<b>'+maxDepth+'</b>'; 
return draw.join(''); 
}, 
msg:function(text,type){/* 編輯狀態(tài)或者錯(cuò)誤通知 */ 
if(!this.msgUI)return alert(text); 
with(new Date)var now=([getHours(),getMinutes(),getSeconds()].join(':')).replace(/\b\d\b/g,'0$&'); 
this.msgUI.innerHTML='<div>['+now+'] &nbsp;&nbsp;'+text.replace(/\n/g,'<br/>')+'</div>'; 
this.msgUI.className=type; 
}, 
show:function (ico,id){/* 顯隱樹節(jié)點(diǎn) */ 
var subView=ico.parentNode.parentNode.childNodes[1].style,J=this.ico; 
if(subView.display=='none'){ 
subView.display=''; 
ico.src=J[id]; 
}else{ 
subView.display='none'; 
ico.src=J[id+'c']; 
}; 
}, 
select:function (sender){ 
var sub=sender.parentNode.parentNode.getElementsByTagName("INPUT"); 
for (var i=0;i<sub.length;i++ ) {sub[i].checked=sender.checked;} 
} 
}; 
JE.add=function(){ 
this.msg('功能添加中...*_^'); 
} 
JE.editItem=function(){ 
this.msg('功能添加中...*_^'); 
} 
JE.begin=function(){/* 設(shè)置UI控件關(guān)聯(lián)響應(yīng) */ 
var $=function (id){return document.getElementById(id)}; 
/* 關(guān)聯(lián)UI */ 
JE.editUI=$("json_eidit"); 
JE.msgUI=$("json_editInfo"); 
JE.treeUI=$("tree"); 
var updateUI=$("update"); 
var auto=$("autoUpdate"); 
var fontSize=$("fontSize"); 
/* 單擊樹子項(xiàng) */ 
JE.onclick=function(item){ 
var key='鍵名: <input value="'+item.getAttribute('key')+'" />', 
val=' 鍵值: '+(item.getAttribute('val')==''?'成員列表':'<input value="'+item.getAttribute('val')+'" />'), 
add='<button onclick="'+this.name+'.add(this)">新增</button>', 
edit='<button onclick="'+this.name+'.editItem(this)">修改</button>'; 
JE.msg(key+val+add+edit,'info'); 
} 
/* 監(jiān)聽代碼變化事件 */ 
JE.editUI.oninput=JE.editUI.onpropertychange=function (){ 
if(JE.formating)return;/* 格式化不刷新樹 */ 
if(/^\s*$/.test(this.value))return JE.msg('請(qǐng)輸入JSON格式的代碼!');; 
clearTimeout(JE.update); 
try{JE.data=eval('('+this.value+')'); 
}catch(e){ 
JE.editUI.style.color='red'; 
return JE.msg("源代碼有錯(cuò)誤: "+e.description+' , 如果正在編輯中, 請(qǐng)忽略此消息!','err'); 
}; 
JE.editUI.style.color='#000'; 
if(auto.checked||JE.firstUp){/*若同步*/ 
JE.msg('語法正確,正在重新構(gòu)造樹,請(qǐng)稍候...','busy'); 
JE.update=setTimeout(function(){ 
JE.toTree(); 
},450); 
}else{ 
JE.msg('語法正確,請(qǐng)點(diǎn)擊刷新,或者打開視圖同步開關(guān),或者繼續(xù)編輯!') 
} 
return true; 
}; 
if(window.ActiveXObject) 
document.execCommand("BackgroundImageCache", false, true); 
/* 攔截Tab,自動(dòng)格式化 */ 
JE.editUI.onkeydown=function (){ 
if(event.keyCode==9){$('format_indent').onclick();event.returnValue=false;}; 
JE.code=this.value; 
} 
/* 格式化 */ 
var format=function(compress){ 
var code=JE.format(JE.editUI.value,compress); 
JE.formating=true; 
if(code)JE.editUI.value=code; 
JE.editUI.focus(); 
setTimeout(function(){JE.formating=false;},1000); 
return code; 
} 
/* 工具欄按鈕 */ 
$('format_indent').onclick=function (){if(format())JE.msg('完成縮進(jìn)風(fēng)格轉(zhuǎn)換,'+JE.countInfo)} 
$('format_compress').onclick=function (){if(format(true)!=undefined)JE.msg('完成緊湊風(fēng)格轉(zhuǎn)換,'+JE.countInfo);} 
updateUI.onclick=function (){ 
JE.firstUp=true; 
JE.editUI.onpropertychange()?JE.msg('成功刷新視圖!'):JE.msg('數(shù)據(jù)有誤,刷新失敗!','err') 
JE.firstUp=false; 
}; 
$('clear_txt').onclick=function (){JE.editUI.value=JE.treeUI.innerHTML='';JE.editUI.focus();} 
auto.onclick=function (){JE.msg('自動(dòng)同步視圖功能'+(this.checked?'開啟':'關(guān)閉!'));}; 
/* 另存為 */ 
if(/*@cc_on !@*/true){$('save_as').style.display='none'}; 
$('save_as').onclick=function (){ 
var d=document,w=d.createElement('IFRAME'); 
w.style.display="none"; 
d.body.appendChild(w); 
setTimeout(function(){ 
var g=w.contentWindow.document; 
g.charset = 'utf-8'; 
g.body.innerHTML=JE.editUI.value; 
g.execCommand("saveas",'', "json.txt") ; 
},1); 
} 
}; 
/* 從這里開始 */ 
window.onload=function (){ 
JE.begin(); 
} 
// --></script>