asp.net 第三方UI控件 Telerik KendoUI 之 TreeVIew 的用法記錄

一、前台顯示

　　備注：一次性取出所有節點

function loadTreeData() {
        $.ajax({
            type: 'POST',
            url: '@(Html.UrlHref("ScriptSite", "/FilesManager/MyFiles/GetFolderTree"))',
            data: {},
            success: function (result) {
                if (result) {
                        inlineDefault = new kendo.data.HierarchicalDataSource({
                            data: eval(result),
                            schema: {
                                model: {
                                    children: "Items"
                                }
                            }
                        });
                        $("#treeviewFolder").kendoTreeView({
                            dataSource: inlineDefault,
                            change: onTreeViewChange,
                            dataTextField: ["Text"]
                        });
                }
                else {

                }
            },
            error: function (err) {
                window.alert(err);
            }
        });
}

二、后台實現

1、獲取樹的主方法

        public string GetFolderTree()
        {
            List<Cust_TreeViewItemModel> lstNodes = new FileManageLogic().GetMyFolderTree(CurrentUser.Id);
            string strResult = Newtonsoft.Json.JsonConvert.SerializeObject(lstNodes);
            return strResult;
        }

根據條件獲得樹型控件里的所有需要的數據

        public List<Cust_TreeViewItemModel> GetMyFolderTree(Guid userId)
        {
            List<Cust_TreeViewItemModel> lstResult = new List<Cust_TreeViewItemModel>();
            dvaContext context = new dvaContext();
            List<es_data_path_mini> lstPaths = context.Database.SqlQuery<es_data_path_mini>("select ID,PID,SEQ,D_PATH from es_data_path where createuserid='" + userId.ToString() + "'").ToList();
            GetKendoTree(lstPaths, lstResult, context, userId);
            return lstResult;
        }

遞歸實現父子級綁定的關系

private void AddChildKendoTree(List<Cust_TreeViewItemModel> lstTree, es_data_path_mini currentPath, List<es_data_path_mini> lstPaths, bool isFirstLevel)
        {
            Cust_TreeViewItemModel currentTreeNode = new Cust_TreeViewItemModel();
            currentTreeNode.Text = currentPath.D_PATH;
            currentTreeNode.Id = currentPath.ID.ToString();
            currentTreeNode.Items = null;
            currentTreeNode.ParentId = currentPath.PID.ToString();
            if (isFirstLevel)
            {
                currentTreeNode.Expanded = true;
            }
            else
            {
                currentTreeNode.Expanded = false;
            }
            currentTreeNode.Remarks = "";
            currentTreeNode.spriteCssClass = "folder";
            if (currentTreeNode.Items == null)
            {
                currentTreeNode.Items = new List<Cust_TreeViewItemModel>();
            }
            List<es_data_path_mini> lstChildPath = lstPaths.Where(c => c.PID == currentPath.ID).ToList();
            if (lstChildPath != null && lstChildPath.Any())
            {
                currentTreeNode.HasChildren = true;
                foreach (var path in lstChildPath)
                {
                    AddChildKendoTree(currentTreeNode.Items, path, lstPaths, false);
                }
            }
            else
            {
                currentTreeNode.HasChildren = false;
            }
            if (currentTreeNode.Items.Count == 0)
            {
                currentTreeNode.Items = null;
            }
            lstTree.Add(currentTreeNode);
        }

三、技巧

1、根據數據里的id獲得當前記錄（主鍵一定要用全小寫的id，全部小寫，我為什么這么強調？！因為我在這個問題上懷疑人生了一個多小時）

var barDataItem = treeview.dataSource.get(currentSelectedId);

2、根據當前記錄的uid獲得當前記錄的node，下面的barElement 已經是一個node類型的值。

var barElement = treeview.findByUid(barDataItem.uid);

3、根據一個node獲得它綁定的數據的id值：

('#treeviewFolder').data('kendoTreeView').dataItem(node).id

4、根據一個node獲取它綁定的數據的Text值：

$('#treeviewFolder').data('kendoTreeView').dataItem(node).Text

5、根據一個node獲取它的父級node

treeview, treeview.parent(node)

6、自動選中treeView上的某一個節點

var treeView = $('#treeviewFolder').data('kendoTreeView');
var data = treeView.dataSource.get(id);
var selectitem = treeView.findByUid(data.uid);
treeView.select(selectitem);

 7、選中第一個節點

var el = $('#' + treeId);
var tree = el.data('kendoTreeView');
var firstNode = el.find('.k-first');
tree.select(firstNode);