Kendo ui TreeView

最新推荐文章于 2021-02-04 15:16:00 发布

原创最新推荐文章于 2021-02-04 15:16:00 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何使用Kendo UI TreeView组件创建一个省市区列表。通过实例展示，帮助读者深入理解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;
}

总结：为什么要写这个，当然有很多人也写了，但是自己刚开始看了很多人写的方法，自己还是没有完全的理解。为了帮助自己加深对此的印象，专门记录一下备自己翻阅。最好可以帮助需要此功能的人。