EasyUI中tree组件不显示数据或者显示undefined的解决方案
2015-05-08 08:24
531 查看
这几天学习easyUI,用到了tree组件,蛋疼了N天,终于出来了,现在总结几个问题。
1、官方demo里,取的数据都是在.json文件里取的,在实际应用中显然不能这么做,要从数据库中取出,那么问题来了,怎么取?官方demo里也没有说明,在网上找半天也没找到什么结果,现做如下总结:
方法1:Ajax取,在web界面加载完成后调用ajax,从后台在数据库中取值,拼接成JSON,拼接的方法有很多,这里不一一列举,拼接完成后,用response的writer回写JSON,在js里,tree的data参数即为传回的JSON(时间原因,这个方法没有测试,理论可行)。
方法2:根方法一大同小异:以下是代码,一看便知:
tree的html代码:
tree的js代码:
其中URL中是后台传回JSON的action,代码如下
其中一定要注意的是,在做完JSON的封装后,一定要print一下,看看JSON外是不是有[]符号包裹,否则tree读不出数据!!!!
最终效果如下:
这个过程千辛万苦。。。说多了都是泪,网上好多问题都达不到点子上,我也是琢磨了好多天才想明白的,希望以后学习的同学少走弯路
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对象,构建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组件最新数据的BUG解决方案
- easyUI 后台存的数据,前台显示文字 或者是前台是下拉框,选择是汉字的情况
- SenchaTouch2中list组件无法绑定存储或者绑定后仍旧无法显示数据问题解决
- SenchaTouch2中list组件无法绑定存储或者绑定后仍旧无法显示数据问题解决
- 关于EasyUI 1.5版Datagrid组件在空数据时无法显示"空记录"提示的BUG解决方法
- easyui 中Datagrid 控件在列较多且无数据时,列显示不全的解决方案
- pydev在Elipse中使用第三方组件时,显示“Undefined variable from import:xxx()"的解决方案
- 如何让EasyUI的Tree或者ComboTree节点不显示图标?
- easyUI的datagrid控件日期列不能正确显示Json格式数据的解决方案
- EasyUI中tree,Datagrid,pagenation的使用EasyUI中Datagrid和pagenation进行关联时,再次点击pagenation时让表格数据显示的问题
- easyui 中Datagrid 控件在列较多且无数据时,列显示不全的解决方案
- EasyUI中tree,Datagrid,pagenation的使用EasyUI中Datagrid和pagenation进行关联时,再次点击pagenation时让表格数据显示的问题
- EasyUI组件datagrid不显示json数据问题
- easyUI的datagrid控件日期列不能正确显示Json格式数据的解决方案
- Jquery easyUI treeGride用js初始化后不显示树结构的解决方案
- 使用EasyUI的tree组件,叶子节点下会加载所有节点数据,形成死循环......
- easyui treegrid 显示数据没有树状结构
- SSH整合出现org.hibernate.LazyInitializationException: could not initialize proxy - no Session或者前台没有显示任何数据
- 建站或者网站搬家换空间的时候,企业站长最关心的一个问题是该如何选择网站空间,而这一问题对于一些擅长的站长来说非常小意思,但对于部分企业站长来说是一个比较头疼的问题。根据不完整数据显示,很多企业站长因为
- Easyui获取数据库date数据的显示