一、前台显示
备注:一次性取出所有节点
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