最通俗易懂的組織機構樹教程(easyuiTree)，沒有之一
前言：網上關於編寫組織機構樹的教程並不少，我第一次寫樹的時候也是在網上借鑑別人的技術，走了一些彎路寫下了樹。是因為這些教程都不是很全面，對於程式設計新手來說跳躍性太強。所以趁著閒暇時期，我用心的寫個樹，供大家借鑑，儘量做到通俗易懂，若有不恰當的地方，還望高人指出。
工具以及語言： 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、節點等級、備註 等，下圖為資料表的詳細設計與例項資料
五、執行效果圖
後記：該功能知識簡單的從資料庫中取出有上下級關聯的一些資料，經過程式加工，將其簡單的展示在頁面上，具體細節功能，以後再加工，嘿嘿。