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方法

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