C#无限分级实现，前端WEB页面接收，后台提供层级Json数据
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
using System.Data;
using System.Collections;
using System.Web.UI;
using System.Web.UI.WebControls;
using RBAC;
using Newtonsoft.Json; public partial class DepartmentConfig : BaseRolePage
{
protected DataTable dtTree = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
dtTree = Maticsoft.DBUtility.DbHelperSQL.Query("select * from SY_DEPARTMENT").Tables[0];
}
} #region 获取无限分级数据
/// <summary>
/// 获取无限分级数据
/// </summary>
/// <returns></returns>
protected string GetLevelJson()
{
//获取全部集合
List<DepartModel> allModel = new List<DepartModel>();
DataTable dt = dtTree.Copy();
for (int i = 0; i < dt.Rows.Count; i++)
{
DataRow dr = dt.Rows[i];
DepartModel model = new DepartModel();
model.id = (int)dr["departID"];
model.dname = dr["departName"].ToString();
model.fid = (int)dr["fatherDepartID"];
allModel.Add(model);
}
//筛选顶级分类
var topItems = allModel.Where(e => e.fid == 0).ToList(); //顶级分类
List<DepartModel> topModels = new List<DepartModel>();
foreach (var item in topItems)
{
DepartModel topModel = new DepartModel();
topModel.id = item.id;
topModel.dname = item.dname;
topModel.fid = item.fid;
LoopToAppendChildren(allModel, topModel);
topModels.Add(topModel);
} string json = JsonConvert.SerializeObject(topModels);
return json;
} /// <summary>
/// 继续追溯子类
/// </summary>
/// <param name="allList">全部数据</param>
/// <param name="curItem">当前节点</param>
protected void LoopToAppendChildren(List<DepartModel> allList, DepartModel curItem)
{
var subItems = allList.Where(ee => ee.fid == curItem.id).ToList();
curItem.childs = new List<DepartModel>();
curItem.childs.AddRange(subItems);
foreach (var subItem in subItems)
{
LoopToAppendChildren(allList, subItem);
}
}
#endregion #region 数据实体类
public class DepartModel
{
public int id;
public string dname;
public int fid;
public List<DepartModel> childs;
}
#endregion
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DepartmentConfig.aspx.cs" Inherits="DepartmentConfig" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>组织架构</title>
<link type="text/css" rel="stylesheet" href="../css/default.css" />
<link type="text/css" rel="stylesheet" href="../css/jquery_dialog.css" />
<link rel="stylesheet" type="text/css" href="../JS/jquery-easyui-1.5/themes/default/easyui.css" />
<script type="text/javascript" src="../JS/jquery-easyui-1.5/jquery.min.js"></script>
<script type="text/javascript" src="../JS/jquery_dialog.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript">
$(function(){
var json=<%=GetLevelJson()%>;
var tableHtml= "<table id='tableAction' class='tableCss'>";
tableHtml += "<th>部门ID</th><th>部门名称</th><th></th>";
tableHtml +="</table>";
$(".LoopSpan").empty().append(tableHtml);
$.each(json, function (index) {
//循环获取数据 顶级
var id = json[index].id;
var name = json[index].dname;
var fatherid = json[index].fid;
var childs = json[index].childs;
//组装
DoLoop("",childs,name,id,fatherid,0);
});
//注册删除事件
$(".alink_del").click(function(){
if (confirm("确定删除？")) {
var id = $(this).attr("data-id");
$.ajax({
url: 'RoleHandler.ashx',
data: { "method": "delete_depart", "id": id },
type: 'GET',
timeout: 1000,
cache: false,
error: erryFunction,
success: succFunction
})
function erryFunction() {
alert("error");
}
function succFunction(data) {
//0无参数 1有下级 2删除成功 3删除失败
switch (data) {
case "0":
alert("参数错误");
break;
case "1":
alert("此数据存在下级，为防止误操作\n确保数据安全，请从末级往上逐级删除。");
break;
case "2":
alert("删除成功！");
window.location.href = window.location.href;
break;
case "3":
alert("删除失败，请稍后再试！");
break;
default:
break;
}
}
}
}); //折叠展开
$(".tree-hit").click(function(){
var data=[];
var children = [];
$("#tableAction").find("tr").each(function(i){
var id=$(this).attr("data-id");
var fid=$(this).attr("data-fid");
if (typeof(id)!="undefined") {
data.push({"id":id, "fid":fid});
}
});
var id=$(this).parent().parent().attr("data-id");
if (typeof(id)!="undefined") {
//是否折叠
var closeFlag= $(this).hasClass("tree-expanded") ? true:false;
var arr=getChildren(data,children,id);
if (closeFlag) { //折叠
$(this).removeClass("tree-expanded").addClass("tree-collapsed");
//tree-folder tree-folder-open //tree-folder
$(this).next("span").removeClass("tree-folder-open")
}
else{ //展开
$(this).removeClass("tree-collapsed").addClass("tree-expanded");
$(this).next("span").addClass("tree-folder-open")
}
openClose(arr,closeFlag); };
});
}); //递归获取子类及下属类 无限下级
function getChildren(data,children,id)
{
for(var i=0;i<data.length;i++){
var iid=data[i]["id"];
var fid=data[i]["fid"];
if(id == fid){
children.push(iid);
getChildren(data,children,iid);
}
}
return children;
} //折叠展开
function openClose(arr,closeFlag)
{
$("#tableAction").find("tr").each(function(i){
var id=$(this).attr("data-id");
if($.inArray(id,arr)>-1){
if (closeFlag) { //折叠
$(this).find("span").eq(0).removeClass("tree-collapsed").addClass("tree-expanded");
$(this).find("span").eq(1).addClass("tree-folder-open")
$(this).hide();
}
else{ //展开
$(this).find("span").eq(0).removeClass("tree-collapsed").addClass("tree-expanded");
$(this).find("span").eq(1).next("span").addClass("tree-folder-open")
$(this).show();
}
}
});
} //递归
function DoLoop(loopHtml,child_models,dname,id,fatherid,level)
{
var loopHtml = "";
loopHtml += "<tr data-id='" + id + "' data-fid='" + fatherid + "'>";
loopHtml += "<td width='10%' style='text-align:center'>";
loopHtml += id;
loopHtml += "</td>";
loopHtml += "<td valign='bottom' width='40%' style='text-align:left'>"
loopHtml += PreText(level) ;
//<span class="tree-hit tree-collapsed"></span>
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
loopHtml += dname;
loopHtml += "</td>";
loopHtml +="<td width='50%'>";
loopHtml +="<a href='javascript:showMyModalDialog(\"DepartmentAdd.aspx?fid=" + id + "\",\"600\",\"300\");'>新增下级</a> ";
loopHtml +="<a href='javascript:showMyModalDialog(\"DepartmentEdit.aspx?id=" + id + "\",\"600\",\"300\");'>编辑</a> ";
loopHtml +="<a href='javascript:void(0);' data-id='" + id + "' class='alink_del'>删除</a>";
loopHtml +="</td>";
loopHtml +="</tr>";
$("#tableAction").append(loopHtml); if (child_models.length > 0) { //有子类
level++;
$.each(child_models, function (index) {
var id = child_models[index].id;
var name = child_models[index].dname;
var fatherid = child_models[index].fid;
var childs = child_models[index].childs;
//递归
DoLoop(loopHtml,childs,name,id,fatherid,level);
});
}
} function PreText(level)
{
var str="";
for (var i = 0; i < level; i++) {
str +=" ";
}
str += (level>0) ? " " :"";
return str;
}
</script>
<style type="text/css">
tree-open {
background: url('images/tree_icons.png') no-repeat -96px 0px;
} tree-close {
background: url('images/tree_icons.png') no-repeat -112px 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<span class="tableTip">组织架构</span>
<div class="LoopSpan"></div>
<br />
<table class="tableCss">
<tr>
<td></td>
</tr>
</table>
</form>
</body>
</html>
[
{
"id": 600,
"dname": "集团中国总部",
"fid": 0,
"childs": [
{
"id": 601,
"dname": "广东省公司",
"fid": 600,
"childs": [
{
"id": 602,
"dname": "深圳分公司",
"fid": 601,
"childs": [
{
"id": 603,
"dname": "福田办事处",
"fid": 602,
"childs": [
{
"id": 613,
"dname": "车公庙办事点",
"fid": 603,
"childs": []
}
]
}
]
}
]
},
{
"id": 606,
"dname": "湖南省公司",
"fid": 600,
"childs": [
{
"id": 607,
"dname": "长沙分公司",
"fid": 606,
"childs": []
}
]
},
{
"id": 612,
"dname": "上海市公司",
"fid": 600,
"childs": []
}
]
},
{
"id": 604,
"dname": "集团美国总部",
"fid": 0,
"childs": [
{
"id": 605,
"dname": "纽约分公司",
"fid": 604,
"childs": [
{
"id": 611,
"dname": "曼哈顿办事处",
"fid": 605,
"childs": []
}
]
}
]
}
]
C#无限分级实现，前端WEB页面接收，后台提供层级Json数据的更多相关文章
- Web 开发人员必备的随机 JSON 数据生成工具
在 Web 开发中,经常会需要一些测试数据来测试接口或者功能时候正确.JSON Generator 就是这样一款生成随机 JSON 数据的在线工具,Web 开发人员必备,记得收藏和分享啊. 您可能感兴 ...
- Highcharts接收后台传来的json对象值无法显示
在highcharts接收后台传来的json对象网上已经有很多的介绍,在此不多做说明,这里想记录一笔的是在接收的json解析后的value值是String类型的,而highcharts里的data数组 ...
- spring mvc接收ajax提交的JSON数据，并反序列化为对象
需求:spring mvc接收ajax提交的JSON数据,并反序列化为对象,代码如下: 前台JS代码: //属性要与带转化的对象属性对应 var param={name:'语文',price:16}; ...
- 无限分级和tree结构数据增删改【提供Demo下载】
无限分级 很多时候我们不确定等级关系的层级,这个时候就需要用到无限分级了. 说到无限分级,又要扯到递归调用了.(据说频繁递归是很耗性能的),在此我们需要先设计好表机构,用来存储无限分级的数据.当然,以 ...
- .netMVC:Web页面向后台提交数据的方式和选择
众所周知Web前端页面主要由HTML/CSS/Javascript组成,当要通过与用户的交互实现各种功能时,就需要向后台提交一些数据或者操作.在Web世界里各种实现眼花缭乱,但究其根本,不外乎三种方式 ...
- Web页面向后台提交数据的方式和选择
1.通过表单提交 这是HTML支持最传统的提交方法,需要创建表单,然后表单包含各种类型的表单元素,还要有一个提交按钮,通过提交按钮来提交到后台,这种方式提交后页面会刷新. 2.通过网页链接提交 可以在 ...
- Web页面实现后台数据处理进度与剩余时间的显示
1.页面后台代码添加如下属性: /// <summary> /// 总数 /// </summary> private double total { set { Session ...
- SpringMVC接收Post的实体/JSon数据
接口代码: @ResponseBody @RequestMapping(value = "/test",method = RequestMethod.POST)/*只允许POST方 ...
- 微信授权、获取用户openid-纯前端实现——jsonp跨域访问返回json数据会报错的纯前端解决办法
近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活. 首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url https ...
随机推荐
- ArrayBuffer和TypedArray，以及Blob的使用
前端使用TypedArray编辑二进制 ES6提供了, ArrayBuffer和TypedArray, 让前端也可以直接操作编辑二进制数据, 网页中的类型为file的input标签, 也可以通过Fil ...
- NHibernate学习教程(6)--事务Transactions
本节内容 事务概述 1.新建对象 [测试成功提交] [测试失败回滚] 2.删除对象 3.更新对象 4.保存更新对象 结语 上一篇我们介绍了NHibernate中的Insert, Update, De ...
- 【深入Java虚拟机】之八：Java垃圾收集机制
转载请注明出处:http://blog.csdn.net/ns_code/article/details/18076173 对象引用 Java中的垃圾回收一般是在Java堆中进行,因为堆中几乎存放了J ...
- 软件工程（GZSD2015）第三次作业
时间: 2015/4/17-2015/4/23 基本要求: 在之前编写的四则运算程序基础之上做如下改进: 请参照教材Page57:4.2-4.3节中内容,修改原程序,使之符合 "代码风格和设 ...
- Java 第五周总结
1. 本周学习总结 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 不能. ...
- 201521123065《Java程序设计》第1周学习总结
1. 本周学习总结 java是门语言较为简单,并且可以在多种平台运行编译的语言. JDK是java开发工具,可以将源程序编译成字节码. JRE:java运行环境. JVM:虚拟机,是java实现多平台 ...
- JavaSE（十）之Map总结
上一篇是总结了Collection接口的各种实现类,这一篇我将分享的是Map的总结,希望大家点评! 一.Map接口 1.1.为什么Collection不能满足集合的所有功能? Collection接口 ...
- 使用vue-router实现返回
在vue项目中使用vue-router做路由,做到返回页面的逻辑时,由于window.history.back满足不了返回的需要,故想通过 window.addEventListener('popst ...
- mongoDB rs和sh关键字的作用
rs是一个全局变量,其其中定义了很多分片操作的辅助函数, 可以sh.help()查看使用的辅助函数 这些是rs和sh所有函数 在mongoDB中有两种方法表示 例 sh.enableSharding( ...
- HTML 4.01+5基礎知識
HTML 4.01+5 1.Html結構:html>head+body 2.Html快捷鍵:!加Tab(在sublime中) 3.雙標籤: ①常用標籤 h1.h2.h3.h4.h5.h6 p.c ...