jquery easy ui tree 的用法
阿新 • • 發佈：2018-12-18
首先引入相應的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 方法中增加判斷如果子節點中還有節點繼續增加迴圈.