前言：網上關於編寫組織機構樹的教程並不少，我第一次寫樹的時候也是在網上借鑒別人的技術，走了一些彎路寫下了樹。是因為這些教程都不是很全面，對於編程新手來說跳躍性太強。所以趁着閑暇時期，我用心的寫個樹，供大家借鑒，盡量做到通俗易懂，若有不恰當的地方，還望高人指出。
工具以及語言： vs2015 sqlserver2008 c# js css html
整體思路：本次教程，你以為我只寫個樹。實際這不止是個樹，這將包括如何創建一個MVC，如何將項目與數據庫關聯，如何設計數據庫，如何從數據庫里取出數據，再如何運用邏輯將這些數據返回一個樹，還是一個樹。
開始：
一、創建項目：在vs2015中創建一個 web項目(.NET Framework)，如下
選擇MVC 框架(該框架自帶一些集成的類，用起來比較方便)
該項目的默認啟動控制器為HomeController
二、引入相應的文件[ SqlSugar.dll(用以連接數據庫) ，jquery-easyui(我用的是版本1.4) ] ，我已將這兩個文件放入我的文件庫中 點擊可下載
下載這兩個文件，並解壓
將jquery-easyUI 放入到Scripts 文件夾里，並包括到項目中去，刪除掉Scripts里另一個版本的jquery-1.10.2.min.js(因為jquery-easyui中也帶有另一個版本的jquery.min.js不刪除該文件會引起引用沖突)
將jquery-easyui文件夾放在Scripts文件夾里面，然后在vs2015工具打開項目后，在解決方案資源管理器中點擊顯示所有文件，右鍵點擊顯示出來的jquery-easyui文件夾，將其包括在項目中即可，如下圖
再引入SqlSugar.dll
三、編寫
1.在web.config中將數據庫配置好
2.前台界面 因為mvc項目默認的啟動控制器為HomeController.cs 所以我們在 HomeController控制器的Index視圖里編寫前端程序
直接上代碼
引用部分
<!--引用Jquery的js文件-->
<script type="text/javascript" src="~/Scripts/jquery-easyui-1.4/jquery.min.js"></script>
<!--引用Easy UI的js文件-->
<script type="text/javascript" src="~/Scripts/jquery-easyui-1.4/jquery.easyui.min.js"></script>
<!--<5>.引用Easy UI的國際化文件 以下為讓它顯示中文-->
<script type="text/javascript" src="~/Scripts/jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script>
<!--<5>.引用Easy UI的 css文件-->
<link rel="stylesheet" type="text/css" href="~/Scripts/jquery-easyui-1.4/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="~/Scripts/jquery-easyui-1.4/themes/icon.css" />
js部分
<script type="text/javascript"> $(function () { loadMenuTree(); }); function loadMenuTree() { $('#orgTree').tree({ url: '/Home/GetEasyTree',//鏈接到對應的控制器方法 lines: true, animate: true, checkbox: false, onBeforeSelect: function (node) { }, onCheck: function (node, checked) { }, onSelect: function (node) { }, onLoadSuccess: function () { var rootNode = $("#orgTree").tree('getRoot'); $("#orgTree").tree("select", rootNode.target); } }) } </script>
html部分
<body class="easyui-layout" data-options="fit:true,border:false"> <div region="west" border="false" data-options="title:'系統導航',collapsible:true"> <div id="orgTree"></div> </div> </body>
說明：在html部分里放一個 id為orgTree的div 在js里面編寫邏輯，異步加載樹對應的節點,詳細部分將在后台代碼中實現
3 后台代碼
前台啟動的方法，該方法屬於HomeController控制器
[HttpPost] public string GetEasyTree() { string sql = string.Empty; string json = string.Empty; using (var dbContext = DBContext.GetInstance()) { List<tree_menu> menulist = new List<tree_menu>(); sql = string.Format("select * from tree_menu"); menulist = dbContext.SqlQuery<tree_menu>(sql).ToList(); List<EasyUITree> listTreeNodes = new List<EasyUITree>(); string rootpid = "00";//加載樹最初，根節點的上級id為"00" tree_menu.LoadTreeNode(menulist, listTreeNodes, rootpid); json = ObjToJson(listTreeNodes); } return json; }
//將集合轉換為json數據
public static string ObjToJson<T>(T data)
{
return JsonConvert.SerializeObject(data);
}
關聯數據庫的類
//數據庫關聯 public class DBContext { //禁止實例化 private DBContext() { } public static string ConnectionString { get { return System.Configuration.ConfigurationManager.ConnectionStrings["SqlServer"].ToString();} } public static SqlSugarClient GetInstance() { SqlSugarClient db = new SqlSugarClient(ConnectionString); return db; } }
model類與tree類
[Serializable()] public partial class tree_menu { public string tree_code { get; set; } public string tree_name { get; set; } public string tree_parent_code { get; set; } public int tree_level { get; set; } public string note { get; set; } } public class EasyUITree { public string id { get; set; } public string text{ get; set; } public string parent_code { get; set; } public string state { get; set; }//節點狀態， open/closed public string iconCls { get; set; }//節點圖標 public List<EasyUITree> children { set; get; } }
生成樹的類
public partial class tree_menu { //將菜單轉為easyUItree樹 private EasyUITree TransformTreeNode() { EasyUITree easytree = new EasyUITree() { id = this.tree_code.Trim(), text = this.tree_name.Trim(), parent_code = this.tree_parent_code.Trim(), children = new List<EasyUITree>() }; return easytree; } public static void LoadTreeNode(List<tree_menu> listmenus, List<EasyUITree> listTreeNodes,string pid) { //循環全部的菜單 foreach (tree_menu menu in listmenus) { //如果某個菜單的上級節點是參數節點，將其歸為這個參數節點的下級節點里 if (menu.tree_parent_code.Trim() == pid) { EasyUITree node = menu.TransformTreeNode(); listTreeNodes.Add(node); LoadTreeNode(listmenus, node.children, node.id.Trim()); } } } }
四、數據庫的設計
數據表有 節點id 節點名稱、上級節點id、節點等級、備注 等，下圖為數據表的詳細設計與實例數據
五、運行效果圖
后記：該功能知識簡單的從數據庫中取出有上下級關聯的一些數據，經過程序加工，將其簡單的展示在頁面上，具體細節功能，以后再加工，嘿嘿。