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

使我又郁悶了半天，經由同事的提醒，我突然發現樹的數據可能有問題，

代碼如下：

    /**
     * 獲取文檔設置信息（樹）
     */
    @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);
            String settingList = JsonMapper.alwaysMapper().toJson(rootSettings);
            return settingList;
            
        }catch(Exception e){
            return "查詢出錯！";
        }
    }

這里的根節點是單個對象，必須在包裝成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代碼：

function initTree(){
    
    $.ajax({
        type: "POST",
        async: true,
        url: ctx + "/Settings/getDocSettingsTree",
        dataType: "json",
        success: function(data){

            var dataSource = new kendo.data.HierarchicalDataSource({
                data: data,
                schema: {
                    model: {
                        id: "settingId",
                        settingType: "settingType",
                        children: "subSettings"
                    }
                }
            });
            $("#docTree").kendoTreeView({
                dataSource: dataSource,
                dataValueField: "id",    
                dataTextField: "settingName"
            });
            
            $("#docTree").data("kendoTreeView").expand(".k-item");
        }
    }); 
}

這里的重點就是數據源的格式必須是kendo.data.HierarchicalDataSource，

並且數據是LIST形式的。