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 ...
随机推荐
- 图像读取函数cv::imread()的几种使用方式
string imgpath = "C:\Users\Y\Pictures\miao.jpg"; OpenCV的imread()函数不支持单右斜线形式的路径,即不支持上述形式的路径 ...
- 基于TCP协议Socket通信
服务器线程处理类 package demo4; import java.io.*; import java.net.Socket; /** * 服务器线程处理类 * @ClassName Server ...
- Java(三)String类
一.String类初始化方法 1.初始化一个空字符串 String str=new String();//这里调用了String的无参构造方法 2.初始化一个有值的字符串 String str1=&q ...
- 安装DHCP到CentOS（YUM）
运行环境 系统版本:CentOS Linux release 7.3.1611 (Core) 软件版本:DHCP-x 硬件要求:无 安装过程 1.安装YUM源,由EPEL提供 [root@localh ...
- H5_0019：JS中定义json结构
"7HKm": function(e, a, d) { "use strict"; Object ...
- linux学习之编译-链接
在Windows下使用习惯了IDE,导致我们对程序的编译链接没有一个清晰的认识,甚至混淆了编辑器和编译器的概念.在学习Linux时,这些问题就暴露出来了. 实际上,我们应该严格区分一个程序从产生到执行 ...
- Dalsa 8K彩色相机Camera link C#采图
一个采图工具,所以界面做的很简单. private SapAcquisition m_Acquisition; private SapBuffer m_Buffers; private SapAcqT ...
- JavaScript 13 Ajax技术（未完)
<body> <!-- 添加文档主体内容 --> <header> <nav>JavaScript - Ajax - 读取XML文件</nav&g ...
- linux--python3安装以及虚拟环境配置
linux下python3的编译安装以及项目运行 普通版安装编译python3并运行项目 最好指定目录进行操作 1.解决系统的基础开发工具,防止python3编译过程出错 yum install gc ...
- linux--nginx学习
nginx 1.nginx安装编译 1.yum install nginx(自动解决依赖) 2.源代码编译安装(优秀,自由选择软件版本,自定义第三方功能比如开启https) 3.rpm手动安装(垃圾) ...