首先引入相应的CSS 和 jq 文件
<link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="css/themes/icon.css" rel="stylesheet" type="text/css" /> <script src="jq/jquery.min.js" type="text/javascript"></script> <script src="jq/jquery.easyui.min.js" type="text/javascript"></script>实现tree树状菜单实际上就是 在页面上加载一个 ul标签 可使用js 代码 和css 的方式加载数据 js代码 加载数据
$('#tree1').tree({ animate: 'true',\\时候显示动画效果 lines: 'true',\\是否显示连接线 node.iconCls:'icon-save' \\显示的图标 checkbox:'true',\\是否显示复选框 url:''NewsType.ashx',\\向服务器端请求数据 data: \\为要载入的数据格式， formatter:function(node){ return node.id+"|"+node.text; },//数据的显示格式，node为所有节点 onClick:function(node){ alert(node.text); },//节点单击事件 onLoadSuccess:function(){ //加载完成事件 $("#tree1").tree("collapseAll"); //收起树节点 }， onContextMenu: function(e, node){ e.preventDefault(); // 查找节点 $('#tree1').tree('select', node.target); // 显示快捷菜单 $('#mm').menu('show', { left: e.pageX, top: e.pageY }),//右键弹出菜单事件 } //下面为tree的常用方法 //获取选中的节点方法 var nodes1=$('#tree1').tree('getChecked'); //nodes1 的类型是一个 arr //判断一个节点是否是叶子节点 $('#tree1').tree('isLeaf',node.target) //获取一个父节点 var pnode=$('#tree1').tree('getParent',node.target); //获取一个子节点 var cnode=$('#tree1').tree('getChildren',node.target); //追加一个节点 var node = $('#tree1').tree('getSelected'); if (node){ var nodes = [{ "id":13, "text":"Raspberry" },{ "id":14, "text":"Cantaloupe" }]; $('#tt').tree('append', { parent:node.target, data:nodes }); } //删除一个节点 $('#tree1').tree('remove', node.target); <body> <ul id="tree1"></ul> </body>tree 异步加载数据，以省市联动模式为例子 tree从服务器端加载的json的数据格式为：
[{"id":1,"text":新闻","state":"closed","children":[{"id":"15","text":"军事"},{"id":"16","text":"图片"},{"id":"17","text":"航空"},{"id":"18","text":"娱乐"},{"id":"19","text":"电影"},{"id":"20","text":"薄荷"},{"id":"21","text":"电视剧"}] }]其中 id ,text ,children 的键值为固定值 id为数据的id ,text 为 显示的文本 , children 如果有子节点的化 按照格式继续生成json数据还可以增加 checked,state,属性 服务器端返回数据的方法以c# 数据语言为例
using System; using System.Collections.Generic; using System.Linq; using System.Web; using web2Bll; using web2Model; using System.Data; using System.Web.Script.Serialization; using System.Text; namespace jqeasyui { /// <summary> /// NewsType 的摘要说明 /// </summary> public class NewsType : IHttpHandler { web2Bll.TypeInfoBLL tbll = new TypeInfoBLL(); public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; DataTable dt = new DataTable(); int id = 0; if (!string.IsNullOrEmpty(context.Request["id"])) { id = Convert.ToInt32(context.Request["id"]); } string sql = "select * from typeinfo where parentId="+id; dt = web2Common.SqlHelper.Fill(sql, CommandType.Text); string json = GetJson(dt); context.Response.Write(json); } private string GetJson(DataTable dt) { StringBuilder jsonSb = new StringBuilder(""); jsonSb.Append("["); foreach (DataRow dr in dt.Rows) { jsonSb.Append("{\"id\":" + Convert.ToInt32(dr["TypeId"])); jsonSb.Append(",\"text\":\"" + dr["titleName"].ToString()+"\""); jsonSb.Append(",\"state\":\"closed\""); DataTable dtChildren = new DataTable(); dtChildren = web2Common.SqlHelper.Fill("select TypeId,titleName from typeinfo where parentId=" + Convert.ToInt32(dr["TypeId"]), CommandType.Text); if (dt != null && dt.Rows.Count > 0) { if (dtChildren!=null && dt.Rows.Count>0) { //这里有问题程序无法加载3级节点 jsonSb.Append(",\"children\":["); jsonSb.Append(DataTable2Json(dtChildren, "TypeId", "titleName")); jsonSb.Append("]"); } } jsonSb.Append("},"); } if (dt.Rows.Count > 0) { jsonSb.Remove(jsonSb.Length - 1, 1); } jsonSb.Append("]"); return jsonSb.ToString(); } private string DataTable2Json(DataTable dt,string id,string name) { StringBuilder jsonBuilder = new StringBuilder(); for (int i = 0; i < dt.Rows.Count; i++) { jsonBuilder.Append("{"); for (int j = 0; j < dt.Columns.Count; j++) { if (dt.Columns[j].ColumnName == id) { dt.Columns[j].ColumnName = "id"; } if (dt.Columns[j].ColumnName == name) { dt.Columns[j].ColumnName = "text"; } jsonBuilder.Append("\""+dt.Columns[j].ColumnName); jsonBuilder.Append("\":\"" + dt.Rows[i][j].ToString() + "\","); } if (dt.Columns.Count>0) { jsonBuilder.Remove(jsonBuilder.Length - 1, 1); } jsonBuilder.Append("},"); } if (dt.Rows.Count>0) { jsonBuilder.Remove(jsonBuilder.Length - 1, 1); } return jsonBuilder.ToString(); } public bool IsReusable { get { return false; } } } }GetJson 和 DataTable2Json方法只能加载二级联动数据,如想加载多级 需在GetJson 方法中增加判断如果子节点中还有节点继续增加循环.
