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 ...
随机推荐
- 【14】Softmax回归
在下面的内容中,我们用C来表示需要分的类数. 最后一层的隐藏单元个数为4,为所分的类的数目,输出的值表示属于每个类的概率. Softmax函数的具体步骤如下图: 简单来说有三步: 计算z值(4×1矩阵 ...
- CodeForces - 1107E 区间DP
和紫书上的Blocks UVA - 10559几乎是同一道题,只不过是得分计算不同 不过看了半天紫书上的题才会的,当时理解不够深刻啊 不过这是一道很好区间DP题 细节看代码 #include<c ...
- kali linux中mariadb加上密码
kali自带mysql.2019.4 中带得是:MariaDB.据说跟Mysql差不多.简单用了一下发现root用户可以不要密码进入Mysql! 这极不习惯,不输入密码感觉好像少了点什么.这肯定是权限 ...
- 查看whl包名是否满足系统的条件的命令，以此解决whl包出现“is not a supported wheel on this platform”错误提示的问题
在Ubuntu系统中,使用pip安装whl包时,常常会报如下错误: tensorflow_gpu-1.11.0-cp35-cp35m-manylinux1_x86_64.whl is not a su ...
- 微信小程序调起支付API
官方文档: https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7 https://developers.weixin.q ...
- ArcMap 发布 ArcGIS Server OGC(WMSServer,MapServer)服务
完整的从ArcMap部署地图到ArcGIS Server 中作为地图服务的过程. 1. 添加图层数据-- 不能添加地图 baseMap 2. 安装ArcGIS Server ,记住登录Manager ...
- 0级搭建类011-Oracle Linux 7.x安装(OEL 7.7) 公开
项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...
- jQuery---淘宝精品案例
淘宝精品案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
- javascript download geoserver layer as kml file
var sqlfilter = " CITY='" + city + "' and SDATE>" + sdate + " and SDATE ...
- Selenium3+python自动化009- 多选框
多选框 # 随机选择多选框# sports=driver.find_elements_by_name("sport")# maxnum=len(sports)# num=rando ...