easyui combotree的使用示例

一、View:

1、定义输入控件

<input id="ParentId" name="ParentId">

2、绑定combotree

$(‘#ParentId‘).combotree({
	url: "/Action/GetMenuTreeData/",
	method: "post",
	lines: true,
	required: true,
	onClick: function (node) {          //自动生成排序号
		$.post("/Action/GetMenuDisOrder/", { pId: node.id }, function (data) {
			$("#DisOrder").val(data);
		});                //自动生成当前层级
		$.post("/Action/GetMenuDisLevel/", { pId: node.id }, function (data) {
			$("#DisLevel").val(data);
		});

	}
});

二、Controller:

[HttpPost]
public ActionResult GetMenuTreeData()
{
	//取从数据字典中取中Menu对应的ID号
	var dic = _dictionaryService.Single(o => o.Name == "MENU" && o.IsDeleted == false);
	var menuId = dic.Id;

	//查询所有菜单信息
	var menus = _actionService.Where(o => o.IsDeleted == false && o.OperationType == menuId && o.IsShow == true, o => o.DisOrder).ToList();

	//获取根结点信息
	RSCC.Model.TreeNode rootNode = _actionService.Single(o => o.ParentId == 0).ToNode();

	//3、根据根结点对应的ID,查询其所有的子节点
	rootNode.children = FillSonNodes(menus, rootNode.id);

	return Content("[" + operationContext.ToJson(rootNode) + "]");
}
/// <summary>
/// 递归生成子节点集合
/// </summary>
/// <param name="listPermission"></param>
/// <param name="parentId"></param>
/// <returns></returns>
List<RSCC.Model.TreeNode> FillSonNodes(List<RSCC.Model.Action> list, int parentId)
{
	List<RSCC.Model.TreeNode> sonNodes = null;

	//循环权限集合,查找子权限
	foreach (RSCC.Model.Action m in list)
	{
		//查找到子权限
		if (m.ParentId == parentId)
		{
			//实例化子节点集合
			if (sonNodes == null)
				sonNodes = new List<RSCC.Model.TreeNode>();

			//将子权限转成子节点
			RSCC.Model.TreeNode sonNode = m.ToNode();
			//将子节点加入子节点集合
			sonNodes.Add(sonNode);
			//递归为子节点查找子节点集合
			sonNode.children = FillSonNodes(list, sonNode.id);
		}
	}

	return sonNodes;
}

三、显示效果:

时间: 2024-11-02 02:44:02

easyui combotree的使用示例的相关文章

表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等.当提交表单时,调用 'validate' 方法来检查表单是否有效. 用法 创建一个简单的 HTML 表单.构建表单并给 id.action.method 赋值. <form id="ff" method="post"> <div> <lab

EasyUI ComboTree数据绑定树形分类显示

承接上篇博文[LINQ获取树形分类的层数].在上文中,笔者只分享了层数,在这里我把完整的实现贴出来,欢迎批评指正. 先附上效果图: 首先是Tree公共类 public class Tree { public int ModuleID { get; set; } public int ParentID { get; set; } public int ModulePath { get; set; } public string ModuleName { get; set; } } 接下来就是Tre

easyui combotree不让父级选中

easyui combotree不让父级选中? <ul id="combotree"></ul> $(function () { $("#combotree").combotree({ width: 300, data: [{ "id": 1, "text": "My Documents", "children": [{ "id": 11, &

EasyUI Combotree只选择叶子节点

EasyUI Combotree的方法拓展自Combo和Tree.而Tree有一个onBeforSelect事件来帮助我们实现只选择叶子节点的功能. Tree事件需要 'node' 参数,它包括下列属性: id:绑定到节点的标识值. text:要显示的文本. iconCls:用来显示图标的 css class. checked:节点是否被选中. state:节点状态,'open' 或 'closed'. attributes:绑定到节点的自定义属性. target:目标的 DOM 对象. onB

解决Easyui Combotree的SetValue方法无效

今天在写代码的时候,遇到个很奇怪的问题: $('#department_parent').combotree('setValue', row.id); AjaxForProvince(); $('#province').combobox('setValue', row.province_id); AjaxForCity(row.province_id); $('#city').combobox('setValue', row.city_id); AjaxForZone(row.city_id);

Jquery EasyUI Combotree根据选中的值展开所有父节点

Jquery EasyUI Combotree根据选中的值展开所有父节点  Jquery EasyUI Combotree 展开父节点, Jquery EasyUI Combotree根据子节点选中的值,展开前面所有父节点, Jquery EasyUI Combotree获取选中的值 ================================ ?Copyright 蕃薯耀 2018年5月7日 http://www.cnblogs.com/fanshuyao/ 一.Combotree获取父节

jQuery EasyUI之DataGrid使用示例

jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页:http://www.jeasyui.com/demo/main/index.php.可以下载完整开发包,里面有示例代码可以参考. 由于我使用的是ASP.NET webform技术,下面我就贴出主要的代码以供参考. 在页面中首先要引用相关的css以及js文件,这样才能使用该组件. css部分:  <

easyui combotree combobox 使用例子

一:引入easyui 二:使用例子 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Resurces/themes/easyui.css" rel="stylesheet" /> <link href="Resur

easyui.combotree.search.js

(function ($) { //combotree可编辑,自定义模糊查询 $.fn.combotree.defaults.editable = true; $.extend($.fn.combotree.defaults.keyHandler, { query: function (q) { var t = $(this).combotree('tree'); t.tree("search", q); } }); $.extend($.fn.tree.methods, {