Bootstrap

C#无限分级实现，前端WEB页面接收，后台提供层级Json数据

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Text;  
  6. using System.Data;  
  7. using System.Collections;  
  8. using System.Web.UI;  
  9. using System.Web.UI.WebControls;  
  10. using RBAC;  
  11. using Newtonsoft.Json;  
  12.   
  13. public partial class DepartmentConfig : BaseRolePage  
  14. {  
  15.     protected DataTable dtTree = new DataTable();  
  16.     protected void Page_Load(object sender, EventArgs e)  
  17.     {  
  18.         if (!IsPostBack)  
  19.         {  
  20.             dtTree = Maticsoft.DBUtility.DbHelperSQL.Query("select * from SY_DEPARTMENT").Tables[0];  
  21.         }  
  22.     }  
  23.  
  24.     #region 获取无限分级数据  
  25.     /// <summary>  
  26.     /// 获取无限分级数据  
  27.     /// </summary>  
  28.     /// <returns></returns>  
  29.     protected string GetLevelJson()  
  30.     {  
  31.         //获取全部集合  
  32.         List<DepartModel> allModel = new List<DepartModel>();  
  33.         DataTable dt = dtTree.Copy();  
  34.         for (int i = 0; i < dt.Rows.Count; i++)  
  35.         {  
  36.             DataRow dr = dt.Rows[i];  
  37.             DepartModel model = new DepartModel();  
  38.             model.id = (int)dr["departID"];  
  39.             model.dname = dr["departName"].ToString();  
  40.             model.fid = (int)dr["fatherDepartID"];  
  41.             allModel.Add(model);  
  42.         }  
  43.         //筛选顶级分类  
  44.         var topItems = allModel.Where(e => e.fid == 0).ToList(); //顶级分类  
  45.         List<DepartModel> topModels = new List<DepartModel>();  
  46.         foreach (var item in topItems)  
  47.         {  
  48.             DepartModel topModel = new DepartModel();  
  49.             topModel.id = item.id;  
  50.             topModel.dname = item.dname;  
  51.             topModel.fid = item.fid;  
  52.             LoopToAppendChildren(allModel, topModel);  
  53.             topModels.Add(topModel);  
  54.         }  
  55.   
  56.         string json = JsonConvert.SerializeObject(topModels);  
  57.         return json;  
  58.     }  
  59.   
  60.     /// <summary>  
  61.     /// 继续追溯子类  
  62.     /// </summary>  
  63.     /// <param name="allList">全部数据</param>  
  64.     /// <param name="curItem">当前节点</param>  
  65.     protected void LoopToAppendChildren(List<DepartModel> allList, DepartModel curItem)  
  66.     {  
  67.         var subItems = allList.Where(ee => ee.fid == curItem.id).ToList();  
  68.         curItem.childs = new List<DepartModel>();  
  69.         curItem.childs.AddRange(subItems);  
  70.         foreach (var subItem in subItems)  
  71.         {  
  72.             LoopToAppendChildren(allList, subItem);  
  73.         }  
  74.     }  
  75.     #endregion  
  76.  
  77.     #region 数据实体类  
  78.     public class DepartModel  
  79.     {  
  80.         public int id;  
  81.         public string dname;  
  82.         public int fid;  
  83.         public List<DepartModel> childs;  
  84.     }  
  85.     #endregion  
  86. }  

[html]  view plain  copy
 print ?
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DepartmentConfig.aspx.cs" Inherits="DepartmentConfig" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title>组织架构</title>  
  7.     <link type="text/css" rel="stylesheet" href="../css/default.css" />  
  8.     <link type="text/css" rel="stylesheet" href="../css/jquery_dialog.css" />  
  9.     <link rel="stylesheet" type="text/css" href="../JS/jquery-easyui-1.5/themes/default/easyui.css" />  
  10.     <script type="text/javascript" src="../JS/jquery-easyui-1.5/jquery.min.js"></script>  
  11.     <script type="text/javascript" src="../JS/jquery_dialog.js"></script>  
  12.     <script type="text/javascript" src="../js/common.js"></script>  
  13.     <script type="text/javascript">  
  14.         $(function(){  
  15.             var json=<%=GetLevelJson()%>;  
  16.             var tableHtml= "<table id='tableAction' class='tableCss'>";  
  17.             tableHtml += "<th>部门ID</th><th>部门名称</th><th></th>";  
  18.             tableHtml +="</table>";  
  19.             $(".LoopSpan").empty().append(tableHtml);   
  20.             $.each(json, function (index) {    
  21.                 //循环获取数据 顶级     
  22.                 var id = json[index].id;    
  23.                 var name = json[index].dname;    
  24.                 var fatherid = json[index].fid;   
  25.                 var childs = json[index].childs;   
  26.                 //组装  
  27.                 DoLoop("",childs,name,id,fatherid,0);  
  28.             });  
  29.             //注册删除事件  
  30.             $(".alink_del").click(function(){  
  31.                 if (confirm("确定删除？")) {  
  32.                     var id = $(this).attr("data-id");  
  33.                     $.ajax({  
  34.                         url: 'RoleHandler.ashx',  
  35.                         data: { "method": "delete_depart", "id": id },  
  36.                         type: 'GET',  
  37.                         timeout: 1000,  
  38.                         cache: false,  
  39.                         error: erryFunction,     
  40.                         success: succFunction    
  41.                     })  
  42.                     function erryFunction() {  
  43.                         alert("error");  
  44.                     }  
  45.                     function succFunction(data) {  
  46.                         //0无参数 1有下级 2删除成功 3删除失败  
  47.                         switch (data) {  
  48.                             case "0":  
  49.                                 alert("参数错误");  
  50.                                 break;  
  51.                             case "1":  
  52.                                 alert("此数据存在下级，为防止误操作\n确保数据安全，请从末级往上逐级删除。");  
  53.                                 break;  
  54.                             case "2":  
  55.                                 alert("删除成功！");  
  56.                                 window.location.href = window.location.href;  
  57.                                 break;  
  58.                             case "3":  
  59.                                 alert("删除失败，请稍后再试！");  
  60.                                 break;  
  61.                             default:  
  62.                                 break;  
  63.                         }  
  64.                     }  
  65.                 }  
  66.             });  
  67.   
  68.             //折叠展开  
  69.             $(".tree-hit").click(function(){  
  70.                 var data=[];  
  71.                 var children = [];  
  72.                 $("#tableAction").find("tr").each(function(i){  
  73.                     var id=$(this).attr("data-id");  
  74.                     var fid=$(this).attr("data-fid");  
  75.                     if (typeof(id)!="undefined") {  
  76.                         data.push({"id":id, "fid":fid});  
  77.                     }                      
  78.                 });                 
  79.                 var id=$(this).parent().parent().attr("data-id");  
  80.                 if (typeof(id)!="undefined") {  
  81.                     //是否折叠  
  82.                     var closeFlag= $(this).hasClass("tree-expanded") ? true:false;   
  83.                     var arr=getChildren(data,children,id);  
  84.                     if (closeFlag) { //折叠  
  85.                         $(this).removeClass("tree-expanded").addClass("tree-collapsed");  
  86.                         //tree-folder tree-folder-open           //tree-folder   
  87.                         $(this).next("span").removeClass("tree-folder-open")  
  88.                     }  
  89.                     else{ //展开  
  90.                         $(this).removeClass("tree-collapsed").addClass("tree-expanded");  
  91.                         $(this).next("span").addClass("tree-folder-open")                    
  92.                     }  
  93.                     openClose(arr,closeFlag);  
  94.   
  95.                 };  
  96.             });  
  97.         });  
  98.   
  99.         //递归获取子类及下属类 无限下级  
  100.         function getChildren(data,children,id)  
  101.         {  
  102.             for(var i=0;i<data.length;i++){  
  103.                 var iid=data[i]["id"];  
  104.                 var fid=data[i]["fid"];  
  105.                 if(id == fid){  
  106.                     children.push(iid);  
  107.                     getChildren(data,children,iid);        
  108.                 }  
  109.             }  
  110.             return children;  
  111.         }  
  112.   
  113.         //折叠展开  
  114.         function openClose(arr,closeFlag)  
  115.         {  
  116.             $("#tableAction").find("tr").each(function(i){  
  117.                 var id=$(this).attr("data-id");     
  118.                 if($.inArray(id,arr)>-1){  
  119.                     if (closeFlag) { //折叠  
  120.                         $(this).find("span").eq(0).removeClass("tree-collapsed").addClass("tree-expanded");  
  121.                         $(this).find("span").eq(1).addClass("tree-folder-open")    
  122.                         $(this).hide();  
  123.                     }  
  124.                     else{ //展开  
  125.                         $(this).find("span").eq(0).removeClass("tree-collapsed").addClass("tree-expanded");  
  126.                         $(this).find("span").eq(1).next("span").addClass("tree-folder-open")       
  127.                         $(this).show();  
  128.                     }                      
  129.                 }                  
  130.             });  
  131.         }  
  132.           
  133.         //递归              
  134.         function DoLoop(loopHtml,child_models,dname,id,fatherid,level)  
  135.         {  
  136.             var loopHtml = "";  
  137.             loopHtml += "<tr data-id='" + id + "' data-fid='" + fatherid + "'>";  
  138.             loopHtml += "<td width='10%' style='text-align:center'>";  
  139.             loopHtml += id;  
  140.             loopHtml += "</td>";  
  141.             loopHtml += "<td valign='bottom' width='40%' style='text-align:left'>"  
  142.             loopHtml += PreText(level) ;  
  143.             //<span class="tree-hit tree-collapsed"></span>  
  144.             loopHtml += (child_models.length > 0) ? "<span id='" + id + "' class=\"tree-hit tree-expanded\"></span><span class=\"tree-icon tree-folder tree-folder-open\"></span>":"<span class=\"tree-icon tree-file\"></span>"; //tree-open  
  145.             loopHtml += dname;  
  146.             loopHtml += "</td>";  
  147.             loopHtml +="<td width='50%'>";        
  148.             loopHtml +="<a href='javascript:showMyModalDialog(\"DepartmentAdd.aspx?fid=" + id + "\",\"600\",\"300\");'>新增下级</a>    ";  
  149.             loopHtml +="<a href='javascript:showMyModalDialog(\"DepartmentEdit.aspx?id=" + id + "\",\"600\",\"300\");'>编辑</a>    ";  
  150.             loopHtml +="<a href='javascript:void(0);' data-id='" + id + "' class='alink_del'>删除</a>";  
  151.             loopHtml +="</td>";   
  152.             loopHtml +="</tr>";  
  153.             $("#tableAction").append(loopHtml);  
  154.               
  155.             if (child_models.length > 0) { //有子类  
  156.                 level++;  
  157.                 $.each(child_models, function (index) {  
  158.                     var id = child_models[index].id;    
  159.                     var name = child_models[index].dname;    
  160.                     var fatherid = child_models[index].fid;   
  161.                     var childs = child_models[index].childs;   
  162.                     //递归  
  163.                     DoLoop(loopHtml,childs,name,id,fatherid,level);  
  164.                 });  
  165.             }             
  166.         }  
  167.   
  168.         function PreText(level)  
  169.         {  
  170.             var str="";  
  171.             for (var i = 0; i < level; i++) {  
  172.                 str +="      ";  
  173.             }  
  174.             str += (level>0) ? " " :"";  
  175.             return str;  
  176.         }  
  177.     </script>  
  178.     <style type="text/css">  
  179.         tree-open {  
  180.             background: url('images/tree_icons.png') no-repeat -96px 0px;  
  181.         }  
  182.   
  183.         tree-close {  
  184.             background: url('images/tree_icons.png') no-repeat -112px 0px;  
  185.         }  
  186.     </style>  
  187. </head>  
  188. <body>  
  189.     <form id="form1" runat="server">  
  190.         <span class="tableTip">组织架构</span>  
  191.         <div class="LoopSpan"></div>  
  192.         <br />  
  193.         <table class="tableCss">  
  194.             <tr>  
  195.                 <td></td>  
  196.             </tr>  
  197.         </table>  
  198.     </form>  
  199. </body>  
  200. </html>  

[html]  view plain  copy
 print ?
  1. [  
  2.     {  
  3.         "id": 600,  
  4.         "dname": "集团中国总部",  
  5.         "fid": 0,  
  6.         "childs": [  
  7.             {  
  8.                 "id": 601,  
  9.                 "dname": "广东省公司",  
  10.                 "fid": 600,  
  11.                 "childs": [  
  12.                     {  
  13.                         "id": 602,  
  14.                         "dname": "深圳分公司",  
  15.                         "fid": 601,  
  16.                         "childs": [  
  17.                             {  
  18.                                 "id": 603,  
  19.                                 "dname": "福田办事处",  
  20.                                 "fid": 602,  
  21.                                 "childs": [  
  22.                                     {  
  23.                                         "id": 613,  
  24.                                         "dname": "车公庙办事点",  
  25.                                         "fid": 603,  
  26.                                         "childs": []  
  27.                                     }  
  28.                                 ]  
  29.                             }  
  30.                         ]  
  31.                     }  
  32.                 ]  
  33.             },  
  34.             {  
  35.                 "id": 606,  
  36.                 "dname": "湖南省公司",  
  37.                 "fid": 600,  
  38.                 "childs": [  
  39.                     {  
  40.                         "id": 607,  
  41.                         "dname": "长沙分公司",  
  42.                         "fid": 606,  
  43.                         "childs": []  
  44.                     }  
  45.                 ]  
  46.             },  
  47.             {  
  48.                 "id": 612,  
  49.                 "dname": "上海市公司",  
  50.                 "fid": 600,  
  51.                 "childs": []  
  52.             }  
  53.         ]  
  54.     },  
  55.     {  
  56.         "id": 604,  
  57.         "dname": "集团美国总部",  
  58.         "fid": 0,  
  59.         "childs": [  
  60.             {  
  61.                 "id": 605,  
  62.                 "dname": "纽约分公司",  
  63.                 "fid": 604,  
  64.                 "childs": [  
  65.                     {  
  66.                         "id": 611,  
  67.                         "dname": "曼哈顿办事处",  
  68.                         "fid": 605,  
  69.                         "childs": []  
  70.                     }  
  71.                 ]  
  72.             }  
  73.         ]  
  74.     }  
  75. ]  

转载：http://blog.csdn.net/smartsmile2012/article/details/53018972

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
利用Pinecone和OpenAI进行高效RAG：你的第一步指南
mybatis-plus和hibernate 忽略映射字段
Spring Security入门学习
docker 单节点arm架构服务器安装zookeeper、kafka并测试通信
张量压缩感知---相关概念理解
关于文件上传过大导致java虚拟机内存溢出问题
C#字符串操作：判断一个字符串是否存在于另一个字符串按特定字符分割后的子字符串中的几种方法
背景色渐变
buildroot构建项目（一）---buildroot介绍
zabbix基础2——监控告警流程
;