easy ui Tree请求跨域数据

扯淡篇：

jQuery EasyUI为提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。

jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的，同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用，相对于extjs更轻量。

jQuery EasyUI有以下特点：

1、基于jquery用户界面插件的集合

2、为一些当前用于交互的js应用提供必要的功能

3、EasyUI支持两种渲染方式分别为javascript方式（如：$('#p').panel({...})）和html标记方式（如：class="easyui-panel"）

4、支持HTML5（通过data-options属性）

5、开发产品时可节省时间和资源

6、简单，但很强大

7、支持扩展，可根据自己的需求扩展控件

----以上内容来自百度君----

 

由于项目中要用到树结构和表格数据等功能，因此选择了easy ui。在此之前对她只是简单的了解，经过项目的开发有了进一步的理解，本文主要分享一下我在使用tree组件过程中的一些心得，把我遇到的一些问题分享给大家。

附：http://www.jeasyui.com/官网地址可以查看相关API和demo

　　http://www.jeasyui.net/中文地址

 

tree组件的属性和事件，方法都可以在官网上找到，这里我就不多啰嗦了，本文我主要分享下请求跨域的数据（这个我在网上找了很久也没找到一个案例）的使用。

easy ui通过url属性只能请求到同域的数据，网上看到有大神提供的解决方法是修改源文件----》http://blog.csdn.net/shuo188/article/details/48300327

我是通过loader属性来实现的，代码如下

loader: function() {
$.ajax({
type: "get",
url: url,
dataType: 'jsonp',
data: data,
success: function(data) {
if(data.code == 0) {
var oriArr = data.content; //原始数据
var newArr = new Array(); //保存解析之后的数据
for(i = 0; i < oriArr.length; i++) {
notExist = true;
for(j in newArr) {
if(newArr[j].id == oriArr[i].channel) { //如果新数组中已经存在了当前的设备id，则将当前设备当做child保存
notExist = false; //将flag赋值为false，防止再次生成一级目录
var child = {};
child.id = newArr[j].id + j;
child.text = oriArr[i].kssj + "-" + oriArr[i].jssj;
child.attributes = {
bdt: oriArr[i].kssj,
edt: oriArr[i].jssj,
channel: oriArr[i].channel
};
newArr[j].children.push(child);
break;
}
}
if(notExist) { //生成一级目录
if(oriArr[i].channel == "undefind" || oriArr[i].channel == null) {
break;
} else {
var tree = {};
tree.id = oriArr[i].channel;
tree.text = oriArr[i].sbmc;
tree.state = "closed";
tree.children = [];
var child = {};
child.id = tree.id + i;
child.text = oriArr[i].kssj + "-" + oriArr[i].jssj;
child.attributes = {
bdt: oriArr[i].kssj,
edt: oriArr[i].jssj,
channel: oriArr[i].channel
}
tree.children.push(child);
newArr.push(tree);
}
}
};
$("#tree" ).tree("loadData", newArr);
}
},
error: function() {
error.apply(this, arguments);
}
});
}

在解决了跨域的问题之后，又遇到了一个问题，那就是请求回来的数据怎么渲染到树结构中，最后通过查看API找到loadData方法

最后欢迎大家进行讨论交流