JQuery/JS插件 jsTree加载树，普通加载，点一级加载一级
前端：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="plugins1"></div> <link href="../jstree/themes/default/style.min.css" rel="stylesheet" />
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="../jstree/jstree.min.js"></script> <script type="text/javascript"> //Checkbox plugin
$(function () {
$("#plugins1").jstree({
"checkbox": {
//"keep_selected_style": true//显示选中的样式
//"keep_selected_style": false,// 保持选中样式 true为保持，false为不保存，样式不影响功能
'three_state': true,//父子节点关联，true为关联，false为不关联
'tie_selection': false, //
'whole_node': false,//复选框与节点关联 true 为关联 false为不关联
},
"plugins": ["checkbox"],//加载插件 checkbox
'core': {
'expand_selected_onload': true,//加载完成后默认展开所有选中节点true为选中 false为不展开
'themes': {
dots: true //取消连接线
},
'data': {
'url': function (node) {
return './Handler3.ashx';
},
'data': function (node) {
return { 'id': node.id };
}
}
}
}); }); </script>
</body>
</html>
后端：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;
using System.Data;
using System.Data.SqlClient;
using System.Reflection; namespace WebApplication1.jstree测试
{
/// <summary>
/// Handler3 的摘要说明
/// </summary>
public class Handler3 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json; charset=utf-8"; object obj = null; var id = context.Request["id"].ToString();
if (id == "#")
{
obj = GetRoot();
}
else
{
obj = GetChildren(int.Parse(id));
} //var list = GetProjectTrees();
string strContent = JsonConvert.SerializeObject(obj);
context.Response.Write(strContent);
} public bool IsReusable
{
get
{
return false;
}
} public List<ProjectOutPut> GetRoot()
{
var dt = ExecuteDataTable($"select * from Projects7 where [ParentId]=0 order by Id asc", null);
var allProject = DataTableToEntities<Projects>(dt);
var first = allProject.Where(p => p.ParentId == ).First();
return new List<ProjectOutPut> { new ProjectOutPut {
id = first.Id,
text = first.ProjectName,
ParentId = first.ParentId,
children = true
} };
} public List<ProjectOutPut> GetChildren(int Pid)
{
var dt = ExecuteDataTable($"select * from Projects7 where [ParentId]={Pid} order by Id asc", null);
if (dt.Rows.Count <= )
{
return new List<ProjectOutPut>();
} var allProject = DataTableToEntities<Projects>(dt);
var list = new List<ProjectOutPut>();
allProject.ForEach(c =>
{
list.Add(new ProjectOutPut
{
id = c.Id,
text = c.ProjectName,
ParentId = c.ParentId,
children = true
});
});
return list;
} /// <summary>
/// 返回值以所以为object类型，是因为jstree的“+”号
/// object实际只有两种类型 bool 和 list
/// </summary>
/// <param name="project"></param>
/// <param name="all"></param>
/// <param name="showAddSign">jstree是否显示“+”号</param>
/// <returns></returns>
public object GetChildrenProject(Projects project, IReadOnlyList<Projects> all, bool showAddSign = true)
{
var outputModel = new List<ProjectOutPut>(); if (all.Count(p => p.ParentId == project.Id) > )
{
var children = all.Where(p => p.ParentId == project.Id).ToList(); foreach (var childProject in children)
{
outputModel.Add(new ProjectOutPut()
{
id = childProject.Id,
text = childProject.ProjectName,
ParentId = childProject.ParentId,
children = GetChildrenProject(childProject, all, showAddSign)
});
}
}
if (showAddSign && (outputModel.Count == ))
{
return true;
}
return outputModel;
} //dto
public class ProjectOutPut
{
public int id { get; set; }
public string text { get; set; }
public int? ParentId { get; set; } public object children { get; set; }
} //实体类
public class Projects
{
public int Id { get; set; }
public string ProjectName { get; set; }
public int? ParentId { get; set; }
public int IsEnabled { get; set; }
public int TaskStatus { get; set; } public string ProjectCode { get; set; }
public int? ProjectOrder { get; set; }
} // 返回DataTable
public static DataTable ExecuteDataTable(string sql, params SqlParameter[] param)
{
string conStr = "data source=.\\sqlexpress;initial catalog=TEST1;user id=sa;password=sa;"; DataTable dt = new DataTable(); using (SqlConnection con = new SqlConnection(conStr))
{
using (SqlDataAdapter adapter = new SqlDataAdapter(sql, con))
{
//添加参数
if (param != null)
{
adapter.SelectCommand.Parameters.AddRange(param);
}
//1.打开链接，如果连接没有打开，则它给你打开；如果打开，就算了
//2.去执行sql语句，读取数据库
//3.sqlDataReader,把读取到的数据填充到内存表中
adapter.Fill(dt);
}
}
return dt;
} // DataTable转换为Entitys
public static List<T> DataTableToEntities<T>(DataTable dt) where T : class, new()
{
if (null == dt || dt.Rows.Count == ) { return null; }
List<T> entities = new List<T>();
List<string> columnNames = new List<string>(); for (int i = ; i < dt.Columns.Count; i++)
{
columnNames.Add(dt.Columns[i].ColumnName);
} foreach (DataRow row in dt.Rows)
{
PropertyInfo[] pArray = typeof(T).GetProperties();
T entity = new T(); Array.ForEach<PropertyInfo>(pArray, p =>
{
if (!columnNames.Contains(p.Name))
{
return;
} object cellvalue = row[p.Name]; //空值不处理
if (cellvalue == DBNull.Value)
{
return;
}
if ((cellvalue == null) || string.IsNullOrWhiteSpace(cellvalue.ToString().Trim()))
{
return;
} if (cellvalue != DBNull.Value)
{
//经过了几个版本的迭代，最后一个为最新的，摘自网上，已附原文地址 //4、原地址：https://blog.csdn.net/Simon1003/article/details/80839744
if (!p.PropertyType.IsGenericType)
{
p.SetValue(entity, Convert.ChangeType(cellvalue, p.PropertyType), null);
}
else
{
Type genericTypeDefinition = p.PropertyType.GetGenericTypeDefinition();
if (genericTypeDefinition == typeof(Nullable<>))
{
p.SetValue(entity, Convert.ChangeType(cellvalue, Nullable.GetUnderlyingType(p.PropertyType)), null);
}
else
{
throw new Exception("genericTypeDefinition != typeof(Nullable<>)");
}
}
}
});
entities.Add(entity);
}
return entities;
} }
}
数据：
数据和上一篇的一样的
JQuery/JS插件 jsTree加载树，普通加载，点一级加载一级的更多相关文章
- JQuery/JS插件 jsTree加载树，预先加载，初始化时加载前三级节点，当展开第三级节点时 就加载该节点下的所有子节点
jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head&g ...
- JQuery/JS插件 zTree树，点击当前节点展开，其他节点关闭
好像没找到现成的,就自己写了一个demo. 效果如下: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv= ...
- JQuery/JS插件 日期插件
用于日期的计算,功能比较全,我常用的主要是日期的计算(多一天少一天,或者添加几个月等),日期格式化 网址:http://momentjs.cn/ 测试代码: <!DOCTYPE html> ...
- JQuery/JS插件 数组转换为Table
//数组 转换为 table var arr = [{ "D_AlarmValue": 7.00, "D_Code": "002", &qu ...
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
- 图片懒加载之lazyload.js插件使用
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 使用 lazyload依赖与jquery.所以先引入jquery和lazyl ...
- js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...
- js插件---图片懒加载lazyload
js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...
- Jquery Ztree异步加载树
1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...
随机推荐
- 【Android休眠】之Android休眠机制
一.休眠概述 休眠,简而言之就是设备在不需要工作的时候把一些部件.外设关掉(掉电或让它进入低功耗模式). 为什么要休眠呢?一言以蔽之:省电. 休眠分主动休眠和被动休眠.主动休眠:比如我电脑不用了,就通 ...
- beego控制器介绍
控制器介绍 提示:在 v1.6 中,此文档所涉及的 API 有重大变更,this.ServeJson() 更改为 this.ServeJSON(),this.TplNames 更改为 this.Tpl ...
- 《操作系统真象还原》ELF文件
下面是第五章部分内容的收获. 用C语言编写内核 一直以来我们都是用汇编语言编写程序的,但接下来我们或许很少用汇编语言编写代码了,大多数都是使用C语言.为什么要这样呢?书上的解释我看的不是很懂,只能结合 ...
- C++-蓝桥杯-小计算器[进制转化][模拟]
#include <cstdio> #include <string> #include <cstring> #include <iostream> u ...
- EOFError: Compressed file ended before the end-of-stream marker was reached解决办法（在Windows下查看已下载的MNIST数据文件）
出现这个问题的原因是因为文件下载到一半就中断了,解决办法是删除datasets中下载到一半的数据包. 下面以我遇到的问题为例: 我下载数据下载到最后一个包就没有反应了,于是我强制终止了运行,可能是因为 ...
- Linux vim三种模式的快捷键
1.移动光标 数字 + h,j,k,l 上,下,左,右 ctrl-e 移动页面 ctrl-f 上翻一页 ctrl-b 下翻一页 ctrl-u 上翻半页 ctrl-d 下翻半页 w 跳到下一个字首,按标 ...
- cli4适配移动端
1.首先在项目中安装以下依赖 npm install px2rem-loader --savenpm install amfe-flexible --savenpm install postcss-p ...
- 创建基于ASP.NET core 3.1 的RazorPagesMovie项目（三）-已搭建基架的Razor页面解释和更新
本节主要介绍在上一节中通过搭建基架而创建的Razor页面,并做一些UI改变. 一.创建.删除.详细信息和编辑页面 1.双击Pages/Movies/Index.cshtml.cs文件,这是一个Razo ...
- STL中_Rb_tree的探索
我们知道STL中我们常用的set与multiset和map与multimap都是基于红黑树.本文介绍了它们的在STL中的底层数据结构_Rb_tree的直接用法与部分函数.难点主要是_Rb_tree的各 ...
- webpack打包后不能调用,改用uglifyjs打包压缩
背景: 项目基于原生js,没用到任何脚手架和框架,但也需要打包压缩. 项目的js中声明了一些全局变量 供其他js调用. 这时候如果用webpack打包,基于webpack特性,会嵌套一层大函数,会将j ...