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 ...
随机推荐
- 剑指offer-面试题17-打印从1到最大的n位数-数字
/* 题目: 输入数字n,按顺序打印从1到最大的n位十进制数. 如输入3,打印从1,2,3到999. */ /* 思路: 大数问题转化为字符串或数组. */ #include<iostream& ...
- Educational Codeforces Round 80 (Rated for Div. 2)(A-E)
C D E 这三道题感觉挺好 决定程序是否能通过优化在要求的时间内完成,程序运行时间为t,你可以选择花X天来优化,优化后程序的运行时间为t/(x+1)取上整,花费的时间为程序运行时间加上优 ...
- Petya and Array CodeForces - 1042D
很不错的一道题 给你一个长度为n的数组,问共有多少个区间满足区间之和小于给定的数t 这种题一般做法肯定是枚举,固定左端点枚举右端点,枚举的过程需要优化,否则就是n方 这道题我先求一个前缀和,然后逆着枚 ...
- Cloud开发动态列的简单账表
业务场景:客户需要根据过滤条件的不同显示不同的列.如下方式可以实现动态的列名. using System;using System.Collections.Generic;using System.L ...
- 树莓派使用Python使用PiCamera录制视频
个人博客 地址:https://www.wenhaofan.com/article/20190430144020 代码 在树莓派环境下官方提供了乐酷 PiCamera 让我们可以很方便的操作树莓派连接 ...
- MySQL必会的50个常见面试练习题
下面的SQL题目都是比较基础,比较常见的数据库SQL面试题,在技术面试环节虽然碰到相同题目的机会比较少,但解题的基本思路都是差 不多的.下面是SQL面试题描述: Student(Sid,Sname,S ...
- centos7 配置mailx使用外部smtp发送外网邮件
1- 安装 1.1- 安装mailx yum install mailx -y 2- 配置 2.1- 配置外部发件邮箱 vim /etc/mail.rc 在最后加上: //如果不存在,则编辑/etc/ ...
- 函数节流-歪说js
歪谈js 起因: 夜深人静,月朗星稀.'window.onresize 事件' 与 '浏览器'在大战300回合,console.log('1') 1s 十次,然后就结束了,一个悲伤的故事. 事实证明太 ...
- 牛客CSP-S提高组赛前集训营3 赛后总结
货物收集 二分答案.复杂度\(O(n\log n)\). 货物分组 用费用提前计算的思想,考虑用一个新的箱子来装货物会发生什么. 显然费用会加上后面的所有货物的总重. \(60\)分的\(O(n^2) ...
- AtCoder Beginner Contest 154 题解
人生第一场 AtCoder,纪念一下 话说年后的 AtCoder 比赛怎么这么少啊(大雾 AtCoder Beginner Contest 154 题解 A - Remaining Balls We ...