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 ...
随机推荐
- Microsoft Visual Studio 打开代码出现乱码解决方案
在用VS编写代码时,文本的字符集可能和编译器的字符集不同,在这种情况下代码会显示出乱码. 解决办法: 在VS的工具->选项里面找到"文本编辑器",勾选“自动检测不带签名的UT ...
- 【ACM小白成长撸】--计算单词个数
我判断单词个数的方法,根据空格‘ ’的个数 分情况 当没有单词的时候 判断第一个符号,即a[0] == ‘\0’时,赋值给存储个数的数组 当遇到空格时,只有前面一个字符不是空格字符,后面一个字符不是空 ...
- poj 2063完全背包
题意:给出总资金和投资年份 ,n个股票 给出股票价格和其一年的利润.问如何选择能获得最大利润. 思路:股票可以重复选择,完全背包问题,完全背包也是从01背包衍生而行的,其主要区别在于中间那层循环的次序 ...
- 自上而下，逐步揭开PHP解析大整数的面纱
遇到的问题 最近遇到一个PHP大整数的问题,问题代码是这样的 $shopId = 17978812896666957068; var_dump($shopId); 上面的代码输出,会把$shopId转 ...
- 移动端适配方案以及rem和px之间的转换
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- [自制操作系统] BMP格式文件读取&图形界面系统框架/应用接口设计
本文将介绍在本人JOS中实现的简单图形界面应用程序接口,应用程序启动器,以及一些利用了图形界面的示例应用程序. 本文主要涉及以下部分: 内核/用户RW/RW调色板framebuffer共享区域 8bi ...
- spring 注入使用注解（不用xml）
(一):导入spring4的jar包 (二):在xml中配置扫描的包 <context:component-scan base-package="entity">< ...
- 201521123097《Java程序设计》第八周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 1.本次作业题集集合 public static List return str; } pub ...
- 201521123073《Java程序设计》第3周学习总结
1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...
- 201521044091 《Java程序设计》第12周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. Answer: 2. 书面作业 将Student对象(属性:int id, String name,int a ...