首先引入相应的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 方法中增加判断如果子节点中还有节点继续增加循环.