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 ...
随机推荐
- JS常用方法总结
1.javascript删除元素节点 IE中有这样一个方法:removeNode(),这个方法在IE下是好使的,但是在Firefox等标准浏览器中就会报错了 removeNode is not def ...
- hibernate 教程（3）—NHibernate查询语言HQL
NHibernate之旅(3):探索查询之NHibernate查询语言(HQL) 本节内容 NHibernate中的查询方法 NHibernate查询语言(HQL) 1.from子句 2.select ...
- 转：【Java并发编程】之九：死锁（含代码）
转载请注明出处:http://blog.csdn.net/ns_code/article/details/17200937 当线程需要同时持有多个锁时,有可能产生死锁.考虑如下情形: 线程A当前持有互 ...
- 控制结构(10) 指令序列(opcode)
// 上一篇:管道(pipeline) 发现问题 在一个正式项目的开发周期中,除了源代码版本控制外,还存在着项目的配置/编译/打包/发布等各种高频但非"核心"的脚本代码.职业程序员 ...
- 控制结构(9) 管道(pipeline)
// 上一篇:线性化(linearization) // 下一篇:指令序列(opcode) 最近阅读了酷壳上的一篇深度好文:LINUX PID 1 和 SYSTEMD.这篇文章介绍了systemd干掉 ...
- 201521123119《Java程序设计》第7周学习总结
1. 本周学习总结 2. 书面作业 Q1.ArrayList代码分析 Q1.1 解释ArrayList的contains源代码 这段代码的主要目的是判断在对ArrayList遍历时所用的方法,在输入参 ...
- 201521123055 《Java程序设计》第5周学习总结
1. 本章学习总结 2. 书面作业 Q1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 1. ...
- 201521123014 《Java程序设计》第4周学习总结
1. 本周学习总结 1.1 有关继承的知识点 1.2 使用常规方法总结其他上课内容 多态性 相同的形态,不同的行为 例子: public class Manager extends Employee{ ...
- 201521123081《Java程序设计》 第1周学习总结
#1. 本周学习总结 ###JAVA是1995年SUN推出的一种简单的,跨平台的,面向对象的,分布式的,解释的,健壮的,安全的,结构的,中立的,可移植的,性能很优异的,多线程的,动态的语言.是世界上广 ...
- 201521123106《java程序设计》第一周学习总结
1.本章学习总结 认识了java语言,了解了java的历史,学习了各种java相关文件的使用,能够进行基本的程序操作,学会了使用博客.码云. 2.书面作业 1.为什么java程序可以跨平台运行?执行j ...