分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

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

发布时间:2023-09-06 01:20责任编辑:顾先生关键词:暂无标签

一、前台显示

  备注:一次性取出所有节点

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

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

原文地址:http://www.cnblogs.com/wjx-blog/p/7746508.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved