第一次做企業(yè)級(jí)應(yīng)用，感覺一點(diǎn)：對(duì)邏輯必須要非常明確，而且有了很多與之前不一樣的概念。
在百度編輯器中，如何完成從服務(wù)器取值，來(lái)渲染出表格？這里需要先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ù)集中，我們知道，這是一對(duì)key value的數(shù)據(jù)集。在我們從服務(wù)器端取到Json對(duì)象時(shí)，我們就要開始解析它，然后再生成，我們需要的DOM節(jié)點(diǎn)。比如，如下一對(duì)JSON數(shù)據(jù)集。
復(fù)制代碼 代碼如下:
{
"head":{
"rows":3,
"cells":2
},
"body":{
"rows":3,
"cells":2
}
}
接下來(lái)，我們?nèi)〉玫臄?shù)據(jù)是存儲(chǔ)在responseText中的，所以，還需要設(shè)置一個(gè)變量接受一下，如此var a = eval("("+xhr.responseText+")");到了這一步，我們整個(gè)Json對(duì)象，就從服務(wù)端取了出來(lái)。接著for in它，就可以取到在Json對(duì)象中存儲(chǔ)的數(shù)據(jù)。
復(fù)制代碼 代碼如下:
for (var b in a) {
console.log(a[b].rows);
}
//for in遍歷Json對(duì)象，b就是已經(jīng)取到了key值了。
再得到具體的JSON數(shù)據(jù)集后，就可以通過(guò)+= 來(lái)拼寫節(jié)點(diǎn)的字符串，用+=來(lái)拼寫，從上到下，判斷，循環(huán)，都可以，只需要在最開始設(shè)置一個(gè)空變量，來(lái)接收這一切。
最后一步，editor.setContent(Json);即可以完成編輯器可以編輯區(qū)域的初始化，從服務(wù)端取值，來(lái)渲染節(jié)點(diǎn)。
業(yè)精于勤，荒于嬉。行成于思，毀于隨。新人的成長(zhǎng)，在于總結(jié)。所有文章與例子，僅是自我總結(jié)，都僅供學(xué)習(xí)交流。
您可能感興趣的文章:- Vue.js實(shí)現(xiàn)可編輯的表格
- angularjs實(shí)現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài)示例
- vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例
- 使用JavaScript實(shí)現(xiàn)表格編輯器(實(shí)例講解)
- jQuery實(shí)現(xiàn)可編輯表格并生成json結(jié)果(實(shí)例代碼)
- JS表格組件BootstrapTable行內(nèi)編輯解決方案x-editable
- JavaScript簡(jiǎn)單表格編輯功能實(shí)現(xiàn)方法
- javascript實(shí)現(xiàn)表格排序 編輯 拖拽 縮放
- editable.js 基于jquery的表格的編輯插件
- js+Html實(shí)現(xiàn)表格可編輯操作
