今天使用了下kendoUI中的TreeView控件,一开始的时候总是不成功,
总是会报 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined,
后来查询相关的API,原来TreeView是比较特殊的控件,不能绑定kendo.data.DataSource数据源,
数据源必须是kendo.data.HierarchicalDataSource类型的数据源,
将数据源改为该类型的以后,任然报错,而且是奇怪的错误提示。。。
Uncaught TypeError: e.slice is not a function
使我又郁闷了半天,经由同事的提醒,我突然发现树的数据可能有问题,
代码如下:
1 /** 2 * 获取文档设置信息(树) 3 */ 4 @RequestMapping("/getDocSettingsTree") 5 @ResponseBody 6 public String getDocSettingsTree(HttpSession session,HttpServletRequest request) { 7 try{ 8 Settings rootSettings = new Settings(); 9 rootSettings.setSettingId("-1"); 10 rootSettings.setSettingName("文档分类"); 11 rootSettings.setSettingType("2"); 12 getSubSettings(rootSettings); 13 String settingList = JsonMapper.alwaysMapper().toJson(rootSettings); 14 return settingList; 15 16 }catch(Exception e){ 17 return "查询出错!"; 18 } 19 }
这里的根节点是单个对象,必须在包装成LIST才行,
于是修改代码为:
/** * 获取文档设置信息(树) */ @RequestMapping("/getDocSettingsTree") @ResponseBody public String getDocSettingsTree(HttpSession session,HttpServletRequest request) { try{ Settings rootSettings = new Settings(); rootSettings.setSettingId("-1"); rootSettings.setSettingName("文档分类"); rootSettings.setSettingType("2"); getSubSettings(rootSettings); //必须包装成LIST回传 List<Settings> listSettings = new ArrayList<Settings>(); listSettings.add(rootSettings); String settingList = JsonMapper.alwaysMapper().toJson(listSettings); return settingList; }catch(Exception e){ return "查询出错!"; } }
这样问题便解决了
JS代码:
1 function initTree(){ 2 3 $.ajax({ 4 type: "POST", 5 async: true, 6 url: ctx + "/Settings/getDocSettingsTree", 7 dataType: "json", 8 success: function(data){ 9 10 var dataSource = new kendo.data.HierarchicalDataSource({ 11 data: data, 12 schema: { 13 model: { 14 id: "settingId", 15 settingType: "settingType", 16 children: "subSettings" 17 } 18 } 19 }); 20 $("#docTree").kendoTreeView({ 21 dataSource: dataSource, 22 dataValueField: "id", 23 dataTextField: "settingName" 24 }); 25 26 $("#docTree").data("kendoTreeView").expand(".k-item"); 27 } 28 }); 29 }
这里的重点就是数据源的格式必须是kendo.data.HierarchicalDataSource,
并且数据是LIST形式的。