1. 程式人生 > >Kendo ui TreeView

Kendo ui TreeView

首先上成型圖,一個簡單得省省市列表樹

標題
//1.只需要一div容器
<div id="treeView"></div>
<input type="text" id="city" />




//2.JS程式碼


$(function () {
    var treeName = "";
    var treeRowid = "";
     $("#treeView").kendoTreeView({
            check: treeTaskChecked,   //選擇事件
            dataSource: [],   
            checkboxes: {
                checkChildren: true,
                template: "<input type='checkbox' id='checked#= item.id #' value='true' />"
            }
        });




//treeView的 選擇事件 
        function treeTaskChecked() {
            getCheckedTask(undefined);
        }
        function getCheckedTask(nodes) {
            //首次進入此方法使用
            if (nodes == undefined) {
                treeRowid = "";
                var treeView = $("#treeView").data("kendoTreeView");
                nodes = treeView.dataSource.view();
            }
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].hasChildren) {
                    getCheckedTask(nodes[i].children.view());
                }
                else {//以下是沒有子節點 (獲取所有沒有子節點的資料 拼成字串)
                    if (nodes[i].checked == true) {
                        if (treeTaskRowid == "") {
                            treeName = nodes[i].text;
                            treeRowid = nodes[i].id;
                        }
                        else {
                            treeName += "," + nodes[i].text;
                            treeRowid += "," + nodes[i].id;;
                        }
                    }
                }
            }
        }
        
    //獲取資料
    function initTreeData() {
            $.ajax({
                type: "POST",
                url: "/TreeView/getTreeViewData", 
                data: {province:"河南",
                       city:$("#city").val()},//data可以向後臺去傳遞相應的的值
                success: function (data) {                   
                    $("#treeTasks").data("kendoTreeView").setDataSource(new kendo.data.HierarchicalDataSource({
                        data: JSON.parse(data)
                    }));
                }
            });
        }
    //重新整理/進入呼叫一次該方法,當然可以寫進相應方法中,根據相應的條件獲取相應的資料
    initTreeData();
});
       



//3.後臺程式碼 

public string getTreeViewData(string province="",string city="")
{
   //獲取從前臺傳過來的引數
    province=Server.UrlDecode(province);
    city=Server.UrlDecode(city);
   //-------------
    // 跳過此步驟
   //---------------
    //
    string result = [{"id":"河北","text":"河北","items":[{"id":"保定","text":"保定"}]},{"id":"河南","text":"河南",,"items":[{"id":"鄭州","text":"鄭州"},{"id":"洛陽","text":"洛陽"}]}];

// result是簡單的舉例。 當 要涉及字串的拼接等一系列操作。如(要把"放入字串需要"\"");
return result;
}

總結:為什麼要寫這個,當然有很多人也寫了,但是自己剛開始看了很多人寫的方法,自己還是沒有完全的理解。為了幫助自己加深對此的印象,專門記錄一下備自己翻閱。最好可以幫助需要此功能的人。