EasyUI Tree 樹 ——實現多級別菜單的展示，以及與後臺數據的交互
阿新 • • 發佈：2017-10-16
container node 頁面加載 sco view 調用 .... csharp cat
一 要引入的js css庫
<link type="text/css" href="css/base.css" rel="stylesheet" />
<link type="text/css" href="jquery-easyui-1.4/themes/default/easyui.css" rel="stylesheet" />
<link type="text/css" href="jquery-easyui-1.4/themes/icon.css" rel="stylesheet" />
<link type="text/css" href="css/icon.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-easyui-1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="Scripts/json2.js"></script>
<%--<script type="text/javascript" src="jquery-easyui-1.4/extension/jquery-easyui-datagridview/datagrid-detailview.js"></script>--%>
<script type="text/javascript" src="Scripts/parseurl.js"></script>
二 寫DIV用來存放菜單樹，代碼如下
<div region="center" border="false" data-options="title:‘系統導航‘,collapsible:true"> tree的標題、位置，等屬性
<div id="menuTree"></div> 通過js獲取後臺json數據，展現出來
</div>
三 寫 js代碼，與後臺進行交互
$(function () { //在頁面加載完畢後，系統會進入該方法，個人感覺該方法的作用就好比java、c#中的main()方法，是程序的入口，必須將頁面加載後要調用的方法放入該方法中
LoadMenuTree();
});
function LoadMenuTree() {
$(‘#orgTree‘).tree({
url: ‘ashx/NewMenu.ashx?cmd=GetMENUTrees‘, //通過鏈接從後臺調用數據
onSelect: function (node) { //選中某一個節點會進入該事件方法
if (node.link != "")
getAspxFromMenuUrl(node.link)//通過該方法根據選中的節點跳入到各個頁面
},
onLoadSuccess: function () { //當從後臺加載數據成功後，會進入該事件方法
//載入進來的tree數據的默認節點為根節點
var rootNode = $("#orgTree").tree(‘getRoot‘);
$("#orgTree").tree("select", rootNode.target);
}
})
}
四 對後臺代碼的調用
1找到後臺方法
NewMenu.ashx 頁面內的內容
url: ‘ashx/NewMenu.ashx?cmd=GetMENUTrees‘, 通過該鏈接既可找到 NewMenu類中的 GetMENUTrees方法
2 後臺方法的實現
GetMENUTrees方法
#region 獲取菜單樹 public string GetMENUTrees(HttpContext context) { try { DataTable _menuOption = 從數據庫中獲取菜單的信息(下面將會介紹數據庫的設計，以及如何從數據庫中獲取菜單數據) if (_menuOption.Rows.Count > 0) { List<EasyUITreeNode> list = GetTreeNode(_menuOption); //將菜單數據轉換為帶有遞歸關系的集合(即上下級關系) return ObjToJson(list); //將集合轉換為json數據，最後返回前臺 } else { return " "; } } catch (Exception e) { throw e; } }
兩個bean類
public class EasyUITreeNode
{
public string pkid { set; get; }//主鍵
public string id { set; get; }//菜單ID
public string text { set; get; }//菜單名稱
public string level { set; get; }
public string iconCls { set; get; }
public string state { set; get; }//節點是否展開
public string link { set; get; }//鏈接
public string iscontainer { set; get; }//是否為容器
public string visible { set; get; }//是否可見
public string parentid { set; get; }//上級
public string image { set; get; }
public bool Checked { set; get; }
public string haspermission { set; get; }
public List<EasyUITreeNode> children { set; get; }
}
public partial class SYS_MENUANDMEMBER
{
public int id { set; get; }
public int orderid { set; get; }
public string iconCls { set; get; }
public int levels { set; get; }
public string name { set; get; }
public string link { set; get; }
public int parent{ set; get; }
public string iscontainer { set; get; }//是否為容器
public string visible { set; get; }//是否可見
public string image { set; get; }
public string imgchange { set; get;}
public string javascript { set; get; }
}
將 DataTable _menuOption 轉換為帶有遞歸關系的List<EasyUITreeNode> 集合
//獲取根節點
public List<EasyUITreeNode> GetTreeNode(DataTable _menuOtion)
{
DatatableToList<SYS_MENUANDMEMBER> list = new DatatableToList<SYS_MENUANDMEMBER>();
menuList = list.ConvertTolist(_menuOtion);//將 DataTable數據轉換為list
List<SYS_MENUANDMEMBER> menulistNode = menuList.Where(m => m.parent == 0).ToList() 獲取菜單的跟菜單，祖先菜單
List<EasyUITreeNode> treeList = new List<EasyUITreeNode>();
if (menulistNode.Count < 1)//為空，返回空值
{
return null;
}
else //不為空 則將 menulistNode 轉換為 EasyUITreeNode
{
for (int i = 0; i < menulistNode.Count; i++)
{
EasyUITreeNode tree = new EasyUITreeNode();
tree.id = menulistNode[i].id.ToString();
tree.text = menulistNode[i].name;
tree.level = menulistNode[i].levels.ToString();
tree.link = menulistNode[i].link;
tree.parentid = menulistNode[i].parent.ToString();
tree.iscontainer = menulistNode[i].iscontainer;
tree.visible = menulistNode[i].visible;
//tree.iconCls = "panel-tool-collapse";
tree.iconCls = menulistNode[i].imgchange;
tree.state = "closed";
tree.children = GetTreeChildren(menulistNode[i].id);將根菜單的id作為其下級菜單的parentid,獲取其下屬的菜單
treeList.Add(tree);
}
return treeList;
}
}
//獲取子節點
private List<EasyUITreeNode> GetTreeChildren(Int32 p) 方法原理同其上次菜單獲取的原理相同
{
List<SYS_MENUANDMEMBER> menulistChildred = menuList.Where(m => m.parent.Equals(p)).ToList();
List<EasyUITreeNode> treeList = new List<EasyUITreeNode>();
if (menulistChildred.Count < 1)
{
return null;
}
else
{
for (int i = 0; i < menulistChildred.Count; i++)
{
EasyUITreeNode tree = new EasyUITreeNode();
tree.id = menulistChildred[i].id.ToString();
tree.text = menulistChildred[i].name;
tree.level = menulistChildred[i].levels.ToString();
tree.link = menulistChildred[i].link;
tree.parentid = menulistChildred[i].parent.ToString();
tree.iscontainer = menulistChildred[i].iscontainer;
tree.visible = menulistChildred[i].visible;
//tree.iconCls = menulistChildred[i].image;
tree.iconCls = menulistChildred[i].imgchange;
//tree.state = "closed";
tree.children = GetTreeChildren(menulistChildred[i].id);//一步步遞歸，最後將會得到一個具有層層遞歸關系的集合
treeList.Add(tree);
}
return treeList;
}
}
#region Datatable轉List
public class DatatableToList<T> where T : new()
{
public List<T> ConvertTolist(DataTable dt)
{
List<T> ts = new List<T>();
Type type = typeof(T);
string tempName = "";
foreach (DataRow dr in dt.Rows)
{
T t = new T();
PropertyInfo[] propertys = t.GetType().GetProperties();
foreach (PropertyInfo pi in propertys)
{
tempName = pi.Name;
if (dt.Columns.Contains(tempName))
{
if (!pi.CanWrite) continue;
object value = dr[tempName];
if (value != DBNull.Value)
pi.SetValue(t, value, null);
}
}
ts.Add(t);
}
return ts;
}
}
#endregion
//將返回值轉換為json
public static string ObjToJson<T>(T data)
{
return JsonConvert.SerializeObject(data);
}
五 數據庫部分 後續更新....
EasyUI Tree 樹 ——實現多級別菜單的展示，以及與後臺數據的交互