EasyUI中tree组件不显示数据或者显示undefined的解决方案

这几天学习easyUI，用到了tree组件，蛋疼了N天，终于出来了，现在总结几个问题。

1、官方demo里，取的数据都是在.json文件里取的，在实际应用中显然不能这么做，要从数据库中取出，那么问题来了，怎么取？官方demo里也没有说明，在网上找半天也没找到什么结果，现做如下总结：

方法1：Ajax取，在web界面加载完成后调用ajax，从后台在数据库中取值，拼接成JSON，拼接的方法有很多，这里不一一列举，拼接完成后，用response的writer回写JSON，在js里，tree的data参数即为传回的JSON（时间原因，这个方法没有测试，理论可行）。

方法2：根方法一大同小异：以下是代码，一看便知：

tree的html代码：

<ul id="department_tree" class="easyui-tree"></ul>

tree的js代码：

/** * @argument 通过URL取tree中的数据 * @author ZHENGWEI * @date 2015-5-8 * @version 1.0 */$(document).ready(function(){/*加载完成时调用*/$("#department_tree").tree({/*JSON拼接的地址*/url:'CompanyStaffAction!listCompanyDepartment.action',/*连线*/lines:true,/*动画效果*/animate:true});})

其中URL中是后台传回JSON的action，代码如下

/** * 查询公司的部门信息 * @author ZHENGWEI * @throws JSONException  * @throws IOException  * @date 2015-5-7 */public String listCompanyDepartment() throws JSONException, IOException{//设置编码格式，防止中文乱码response.setCharacterEncoding("UTF-8");//返回公司部门信息List<CompanyDepartmentInfo> companyDepartmentInfoList = this.companyStaffService.listCompanyDepartment();//声明JSONArray对象，构建treeJSONArray jsonChildTreeArray = new JSONArray();//判空if(companyDepartmentInfoList.size() != 0){//循环迭代，生成JSONfor(CompanyDepartmentInfo companyDepartmentInfo:companyDepartmentInfoList){//声明JSON对象JSONObject jsonChildInfoObject = new JSONObject();//放入JSONjsonChildInfoObject.put("id", '"'+companyDepartmentInfo.getDepartmentId()+'"');jsonChildInfoObject.put("text", companyDepartmentInfo.getDepartmentName());//set进JSON数组jsonChildTreeArray.put(jsonChildInfoObject);}}//最终生成的JSON树JSONObject jsonDepartmentTree = new JSONObject();//树根jsonDepartmentTree.put("id", "0");jsonDepartmentTree.put("text", "公司部门分类");jsonDepartmentTree.put("state", "open");//将jsonChildTreeArray变成子节点jsonDepartmentTree.put("children", jsonChildTreeArray);//string型，将JSON加上'[]'String treeData = jsonDepartmentTree.toString();treeData = "["+treeData+"]";//声明PrintWriter变量传回JSONPrintWriter out = response.getWriter();out.write(treeData);return null;}

其中一定要注意的是，在做完JSON的封装后，一定要print一下，看看JSON外是不是有[]符号包裹，否则tree读不出数据！！！！

最终效果如下：

这个过程千辛万苦。。。说多了都是泪，网上好多问题都达不到点子上，我也是琢磨了好多天才想明白的，希望以后学习的同学少走弯路