快捷導(dǎo)航

百度編輯器從Json對象中取值，完成初次渲染，在編輯器內(nèi)畫表格

更新時(shí)間：2012年06月22日 01:22:23 作者：

在百度編輯器中，如何完成從服務(wù)器取值，來渲染出表格？這里需要先console.log(editor);在官方API中已經(jīng)告訴我們寫入的方法是setContent()，這里只要能傳入我們最終拼好的的字符串，即可以在初始化中，繪制出我們想要的任何節(jié)點(diǎn)

第一次做企業(yè)級(jí)應(yīng)用，感覺一點(diǎn)：對邏輯必須要非常明確，而且有了很多與之前不一樣的概念。
在百度編輯器中，如何完成從服務(wù)器取值，來渲染出表格？這里需要先console.log(editor);在官方API中已經(jīng)告訴我們寫入的方法是setContent()，這里只要能傳入我們最終拼好的的字符串，即可以在初始化中，繪制出我們想要的任何節(jié)點(diǎn)。
再send()完成之后，onreadystatechange = function(){},先上一段AJAX的代碼。這段AJAX是消除游覽器兼容，從尼古拉斯的書中學(xué)到。

復(fù)制代碼代碼如下:

 
function AJAX() { 
if (typeof XMLHttpRequest != "undefined") { 
return new XMLHttpRequest(); 
} else if (typeof ActiveXObject != "undefined") { 
if (typeof arguments.callee.activeXString != "string") { 
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"]; 
for (var i = 0, len = versions.length; i < len; i++) { 
try { 
var xhr = new ActiveXObject(versions[i]); 
arguments.callee.activeXString = versions[i]; 
return xhr; 
} catch (ex) { 
} 
} 
} 
return new ActiveXObject(arguments.callee.activeXString); 
} else { 
throw new Error("錯(cuò)誤"); 
} 
} 

在JSON數(shù)據(jù)集中，我們知道，這是一對key value的數(shù)據(jù)集。在我們從服務(wù)器端取到Json對象時(shí)，我們就要開始解析它，然后再生成，我們需要的DOM節(jié)點(diǎn)。比如，如下一對JSON數(shù)據(jù)集。

復(fù)制代碼代碼如下:

 
{ 
"head":{ 
　　　　"rows":3, 
"cells":2 　　　　 
　}, 
"body":{ 
　　　　"rows":3, 
"cells":2 　　　　 
　} 
} 

接下來，我們?nèi)〉玫臄?shù)據(jù)是存儲(chǔ)在responseText中的，所以，還需要設(shè)置一個(gè)變量接受一下，如此var a = eval("("+xhr.responseText+")");到了這一步，我們整個(gè)Json對象，就從服務(wù)端取了出來。接著for in它，就可以取到在Json對象中存儲(chǔ)的數(shù)據(jù)。

復(fù)制代碼代碼如下:

 
for (var b in a) { 
console.log(a[b].rows); 
} 
//for in遍歷Json對象，b就是已經(jīng)取到了key值了。 

再得到具體的JSON數(shù)據(jù)集后，就可以通過+= 來拼寫節(jié)點(diǎn)的字符串，用+=來拼寫，從上到下，判斷，循環(huán)，都可以，只需要在最開始設(shè)置一個(gè)空變量，來接收這一切。
最后一步，editor.setContent(Json);即可以完成編輯器可以編輯區(qū)域的初始化，從服務(wù)端取值，來渲染節(jié)點(diǎn)。
業(yè)精于勤，荒于嬉。行成于思，毀于隨。新人的成長，在于總結(jié)。所有文章與例子，僅是自我總結(jié)，都僅供學(xué)習(xí)交流。

您可能感興趣的文章: