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);