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 ...
随机推荐
- 正确安装Windows server 2012 r2的方法
正确安装Windows server 2012 r2的方法,请看下面的步骤 方法/步骤 1 准备好镜像文件,安装 2 输入密钥,下一步 选择下面(带有GUI的服务器).不要选上面的(服务器核心安装), ...
- 2、Hdfs架构设计与原理分析
文章目录 1.Hadoop架构 2.HDFS体系架构 2.1NameNode 2.1.1元数据信息 2.1.2NameNode文件操作 2.1.3NameNode副本 2.1.4NameNode心跳机 ...
- drf 接口文档
coreapi 参考点击 swagger风格接口文档 参考 参考用例 swagger 使用参考
- 第31届IMO 第2题
题目 设n>=3,考虑一个圆上由2n-1个不同点构成的集合E.现给E中恰好k个点染上黑色,如果至少有一对黑点使得这两个黑点之间的弧上(两段弧中的某一个)包含恰好E中的n个点,就成这样的染色方法是 ...
- Codeforces Round #578 (Div. 2) 二维差分 可做模板
题意: 在n*n的矩阵中,你可以选择一个k*k的子矩阵,然后将这个子矩阵中的所有B全部变为W,问你怎么选择这个子矩阵使得最终的矩阵中某一行全是W或者某一列全是W的个数最多 题解:考虑每一行和每一列,对 ...
- CTF伪协议+preg_replace()函数的代码执行
一道学习中所遇到的ctf 步骤: 我们点击题目链接,然后在页面先点击”云平台后台管理中心“ 然后url后面跟了参数page,题目提示了一个文件包含,我们试试index.php 看到了输出了ok,应该是 ...
- PP: Meta-learning framework with applications to zero-shot time-series forecasting
From: Yoshua Bengio Problem: time series forecasting. Supplementary knowledge: 1. what is meta-learn ...
- JavaScript仿计算器案例源代码
效果图 index.html <!DOCTYPE html> <html> <head> <title></title> <link ...
- mybatis一级缓存和二级缓存(二)
注意事项与示例配置 一级缓存 Mybatis对缓存提供支持,但是在没有配置的默认情况下,它只开启一级缓存,一级缓存只是相对于同一个SqlSession而言.所以在参数和SQL完全一样的情况下,我们使用 ...
- windows 服务启动外部程序
服务使用Process启动外部程序没窗体 在WinXP和Win2003环境中,安装服务后,右键单击服务“属性”-“登录”选项卡-选择“本地系统帐户”并勾选“允许服务与桌面交互”即可. 在Win7及以后 ...