人生路漫漫,编程无止境

生活,工作,娱乐,学习学习再学习

 

kendoTreeView,需要注意的地方

今天使用了下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形式的。

posted on 2016-03-16 17:19  超级无敌大熊猫  阅读(3349)  评论(0编辑  收藏  举报

导航