jquery easy ui tree 的用法

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

jquery easy ui tree 的用法

猜你喜欢