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 ...
随机推荐
- IT经典书籍——Head First系列…
Head First 系列书籍是由 O'Relly 出版社发行的一系列教育书籍,中文一般翻译为"深入浅出",它强调以特殊的方式排版,由大量的图片和有趣的内容组合构成,而达到非疲劳的 ...
- Spring mybatis源码篇章-NodeHandler实现类具体解析保存Dynamic sql节点信息
前言:通过阅读源码对实现机制进行了解有利于陶冶情操,承接前文Spring mybatis源码篇章-XMLLanguageDriver解析sql包装为SqlSource SqlNode接口类 publi ...
- 团队作业8——Beta 阶段冲刺4th day
团队作业8--Beta 阶段冲刺4rd day 一.当天站立式会议 二.每个人的工作 (1)昨天已完成的工作(具体在表格中) 添加了支付功能,并且对支付功能进行了测试 (2)今天计划完成的工作(具 ...
- 201521123104 《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 1.1 建立数据库,将自己的姓名.学号作为一条记录插入.(截图, ...
- 201521123031 《Java程序设计》第13周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...
- flex布局常用属性
最近喜欢flex布局,它可以完美的实现响应式布局,下边我总结了它的一些常用属性,喜欢的,也可以练习写一下,很好用~~~ 注意:使用了flex布局,对于子元素的float.clear和vertical- ...
- 深入浅出数据结构C语言版（20）——快速排序
正如上一篇博文所说,今天我们来讨论一下所谓的"高级排序"--快速排序.首先声明,快速排序是一个典型而又"简单"的分治的递归算法. 递归的威力我们在介绍插入排序时 ...
- MySQL的一点浅显知识
本人最近看了一本有关于MySQL的书籍<MySQL必知必会>,书中只写了一些基本知识,但是也基本涵盖了所有的MySQL的知识点.其余的比较高级的也只是在基础上进行扩展或者是优化,看完这本书 ...
- Redis学习笔记之一 ： 配置redis
Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久 ...
- GCD之线程挂起与恢复
我们可以使用dispatch_suspend函数暂停一个queue以阻止它执行block对象;使用dispatch_resume函数继续dispatch queue.调用dispatch_suspen ...