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代码:


    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 companyDepartmentInfoList = this.companyStaffService.listCompanyDepartment();
    		//声明JSONArray对象,构建tree
    		JSONArray jsonChildTreeArray = new JSONArray();
    		//判空
    		if(companyDepartmentInfoList.size() != 0){
    			//循环迭代,生成JSON
    			for(CompanyDepartmentInfo companyDepartmentInfo:companyDepartmentInfoList){
    				//声明JSON对象
    				JSONObject jsonChildInfoObject = new JSONObject();
    				//放入JSON
    				jsonChildInfoObject.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变量传回JSON
    		PrintWriter out = response.getWriter();
    		out.write(treeData);
    		return null;
    	}

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

    最终效果如下:

    EasyUI中tree组件不显示数据或者显示undefined的解决方案_第1张图片



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

    你可能感兴趣的:(解决方案,解决方案,easyui,界面,json)