手机
当前位置:查字典教程网 >编程开发 >网页编辑器 >百度编辑器从Json对象中取值,完成初次渲染,在编辑器内画表格
百度编辑器从Json对象中取值,完成初次渲染,在编辑器内画表格
摘要:第一次做企业级应用,感觉一点:对逻辑必须要非常明确,而且有了很多与之前不一样的概念。在百度编辑器中,如何完成从服务器取值,来渲染出表格?这里...

第一次做企业级应用,感觉一点:对逻辑必须要非常明确,而且有了很多与之前不一样的概念。

在百度编辑器中,如何完成从服务器取值,来渲染出表格?这里需要先console.log(editor);在官方API中已经告诉我们写入的方法是setContent(),这里只要能传入我们最终拼好的的字符串,即可以在初始化中,绘制出我们想要的任何节点。

再send()完成之后,onreadystatechange = function(){},先上一段AJAX的代码。这段AJAX是消除游览器兼容,从尼古拉斯的书中学到。

复制代码 代码如下:

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("错误");

}

}

在JSON数据集中,我们知道,这是一对key value的数据集。在我们从服务器端取到Json对象时,我们就要开始解析它,然后再生成,我们需要的DOM节点。比如,如下一对JSON数据集。

复制代码 代码如下:

{

"head":{

"rows":3,

"cells":2

},

"body":{

"rows":3,

"cells":2

}

}

接下来,我们取得的数据是存储在responseText中的,所以,还需要设置一个变量接受一下,如此var a = eval("("+xhr.responseText+")");到了这一步,我们整个Json对象,就从服务端取了出来。接着for in它,就可以取到在Json对象中存储的数据。

复制代码 代码如下:

for (var b in a) {

console.log(a[b].rows);

}

//for in遍历Json对象,b就是已经取到了key值了。

再得到具体的JSON数据集后,就可以通过+= 来拼写节点的字符串,用+=来拼写,从上到下,判断,循环,都可以,只需要在最开始设置一个空变量,来接收这一切。

最后一步,editor.setContent(Json);即可以完成编辑器可以编辑区域的初始化,从服务端取值,来渲染节点。

业精于勤,荒于嬉。行成于思,毁于随。新人的成长,在于总结。所有文章与例子,仅是自我总结,都仅供学习交流。

【百度编辑器从Json对象中取值,完成初次渲染,在编辑器内画表格】相关文章:

fckediter javascript事件函数代码

jsp Ewebeditor使用说明

百度编辑器ueditor前台代码高亮无法自动换行解决方法

彻底解决ewebeditor网站后台不能上传图片的方法

百度编辑器二次开发常用手记整理小结

fckeditor asp版本的文件重命名

FCKEditor SyntaxHighlighter整合实现代码高亮显示

免费开源百度编辑器(UEditor)使用方法

FckEditor 配置手册中文教程详细说明

通过Fckeditor把图片上传到独立图片服务器的方法

精品推荐
分类导航