z-tree学习笔记
做项目时,需要用到带复选框的tree。经比较后优选了ztree,功能强大,文档清晰。
http://www.treejs.cn/v3/api.php
直接上代码吧。
1、下载ztree后。将里面需要用到的css,js文件,复制到项目中,引用到需要的页面
<link rel="stylesheet" href="/Content/ztree/demo.css" type="text/css">
<link rel="stylesheet" href="/Content/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="/Scripts/ztree/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="/Scripts/ztree/jquery.ztree.excheck.js"></script>
<style>
table th {
text-align: center !important;
} ul.ztree {
height: 200px; }
.ztree li {
//原有项间距太小
margin: 5px;
}
.ztree * {
//原有字体太小
font-size: 15px !important;
}
</style>
2、form中或者其他地方 添加个ul 的tree
<div class="col-sm-6">
@Html.TextBoxFor(m => m.AreasString, new { id = "userArea", @class = "form-control popupwindowinput hidden" })
@Html.ValidationMessageFor(m => m.AreasString)
<ul id="areaTree" class="ztree"></ul>
</div>
3、js中设置ztree的配置参数
var editUserId = "";
var rawGetAreaUrl= "@Url.Action("GetAreasTree", "CommonAjax",new {userId="_userId_",roleName="_roleName_"})";
//我用的asp.net 中的mvc, 注意传参时的&被转码了
var decodeGetAreaUrl = rawGetAreaUrl.replace(/amp;/g, "");
var selectIds = new Array();
var treeSettings = {
async: {
enable: true,
type: "post",
contentType: "text/html;charset=UTF-8",
dataType: 'json',
url: decodeGetAreaUrl
},
view : {
showIcon : false,
selectedMulti : true, //可以多选
showLine : false,
expandSpeed : 'fast',
dblClickExpand : false
},
check : {
enable : true,
chkStyle : "checkbox", //复选框
//父子不关联,各选各的。
chkboxType : {
"Y": "",
"N" : ""
}
},
data : {
simpleData : {
enable: true,
idKey: "id"
},
//key是ztree字段与后台接口字段的映射。一开始想用kendo ui的tree,所以后台一些字段名称和ztree不太对应
key: {
checked:"IsChecked",
children: "Items",
name: "Name",
isParent:"IsParent" //叶子节点前面没有加号
}
},
callback : {
onCheck : checkAreaTree
}
};
4、初始化树
$.fn.zTree.init($("#areaTree"), treeSettings);
5、获取tree选中的值。
function getSelectedTreeAreaIds() {
var selectAreaIds = new Array();
var tree = $.fn.zTree.getZTreeObj('areaTree');
var treeData = tree.getCheckedNodes(true);
if (treeData.length != 0) {
for (var i = 0; i < treeData.length; i++) {
selectAreaIds.push(treeData[i].Id);
if (treeData[i].level == 0) {
//前提,地区树的顶级是market大区
selectedMarketAreaCount++;
}
}
}
return selectAreaIds;
};
6、将tree多选中的值传递给MVC model的string字段,此时,js将数组默认转变成用逗号连接的string,便于form提交,传递给后台。
var selectedTreeAreas = getSelectedTreeAreaIds();
$("#userArea").val(selectedTreeAreas);
7、后台接口数据
#region 地区 tree
public JsonResult GetAreasTree(string userId,string roleName)
{
List<Area> allAreas = _commonService.GetAreas().ToList();
if (_commonService.GetRoleNamesCannotSelectDistrict().Contains(roleName))
{
allAreas = allAreas.Where(m => m.Category != (int)AreaCategoryEnum.District).ToList();
}
List<int> allCheckedItemIds = _commonService.GetUserAreaIdNew(userId);
var areaTreeData = GetChildren(allAreas, allCheckedItemIds, 0);
return Json(areaTreeData, JsonRequestBehavior.AllowGet);
} private List<KendoTreeModel> GetChildren(List<Area> allItems,List<int> allCheckedItemIds, int parentId)
{
List<KendoTreeModel> models = new List<KendoTreeModel>();
var sonItems = allItems.FindAll(c => c.ParentId == parentId).OrderBy(c => c.SortNumber);
foreach (var son in sonItems)
{
var kendoTreeModel = new KendoTreeModel()
{
Id = son.Id,
Name = son.Text,
Expanded = son.ParentId.GetValueOrDefault() != 1,
IsChecked = allCheckedItemIds.Contains(son.Id),
Items = GetChildren(allItems, allCheckedItemIds, son.Id),
};
kendoTreeModel.IsParent = kendoTreeModel.Items.Any();
models.Add(kendoTreeModel);
}
return models;
}
#endregion
8、节点Model
public class KendoTreeModel
{
public int Id { set; get; }
public int ParentId { set; get; } public string Name { set; get; }
public bool IsChecked { set; get; }
public bool IsParent { get; set; }
public bool Expanded { set; get; }
public List<KendoTreeModel> Items { set; get; }
}
z-tree学习笔记的更多相关文章
- 珂朵莉树(Chtholly Tree)学习笔记
珂朵莉树(Chtholly Tree)学习笔记 珂朵莉树原理 其原理在于运用一颗树(set,treap,splay......)其中要求所有元素有序,并且支持基本的操作(删除,添加,查找......) ...
- dsu on tree学习笔记
前言 一次模拟赛的\(T3\):传送门 只会\(O(n^2)\)的我就\(gg\)了,并且对于题解提供的\(\text{dsu on tree}\)的做法一脸懵逼. 看网上的其他大佬写的笔记,我自己画 ...
- Link Cut Tree学习笔记
从这里开始 动态树问题和Link Cut Tree 一些定义 access操作 换根操作 link和cut操作 时间复杂度证明 Link Cut Tree维护链上信息 Link Cut Tree维护子 ...
- 矩阵树定理(Matrix Tree)学习笔记
如果不谈证明,稍微有点线代基础的人都可以在两分钟内学完所有相关内容.. 行列式随便找本线代书看一下基本性质就好了. 学习资源: https://www.cnblogs.com/candy99/p/64 ...
- k-d tree 学习笔记
以下是一些奇怪的链接有兴趣的可以看看: https://blog.sengxian.com/algorithms/k-dimensional-tree http://zgjkt.blog.uoj.ac ...
- splay tree 学习笔记
首先感谢litble的精彩讲解,原文博客: litble的小天地 在学完二叉平衡树后,发现这是只是一个不稳定的垃圾玩意,真正实用的应有Treap.AVL.Splay这样的查找树.于是最近刚学了学了点S ...
- LSM Tree 学习笔记——本质是将随机的写放在内存里形成有序的小memtable,然后定期合并成大的table flush到磁盘
The Sorted String Table (SSTable) is one of the most popular outputs for storing, processing, and ex ...
- LSM Tree 学习笔记——MemTable通常用 SkipList 来实现
最近发现很多数据库都使用了 LSM Tree 的存储模型,包括 LevelDB,HBase,Google BigTable,Cassandra,InfluxDB 等.之前还没有留意这么设计的原因,最近 ...
- Expression Tree 学习笔记(一)
大家可能都知道Expression Tree是.NET 3.5引入的新增功能.不少朋友们已经听说过这一特性,但还没来得及了解.看看博客园里的老赵等诸多牛人,将Expression Tree玩得眼花缭乱 ...
- K-D Tree学习笔记
用途 做各种二维三维四维偏序等等. 代替空间巨大的树套树. 数据较弱的时候水分. 思想 我们发现平衡树这种东西功能强大,然而只能做一维上的询问修改,显得美中不足. 于是我们尝试用平衡树的这种二叉树结构 ...
随机推荐
- 一对一voip,直播连麦,在线会议,兼容webrtc,IM音视频
功能 IM消息系统 一对一 高清音视频实时通信,可无缝切换P2P传输,节省服务器带宽 一对多互动直播 多对多在线会议 手机实时录屏传输 高度定制化 网络检测,动态码率与动态帧率,抗网络抖动,微信级效果 ...
- Sword libcurl回调函数相关知识
libcurl响应回调函数说明 libcurl在默认情况下,回调里面会将数据分段的返回,不会一下子将发送端的数据全部塞到回调函数里面, 经过源码分析回调函数和curl_easy_perform是在 ...
- webpack模块化原理
https://segmentfault.com/a/1190000010349749 webpack模块化原理-commonjs https://segmentfault.com/a/119 ...
- Servlet开发 中使用 log4jdbc 记录 hibernate 的 SQL信息
一.前言 使用log4jdbc在不改变原有代码的情况下,就可以收集执行的SQL文和JDBC执行情况. 平时开发使用的ibatis,hibernate,spring jdbc的sql日志信息,有一点个缺 ...
- THINKPHP5近期暴露的漏洞
这个THINKPHP5的漏洞涉及好几个版本,我测试中5.0.21和5.0.22都有,据说是5.0 ~ 5.0.23之间的版本都存在,这个漏洞可以执行写文件的操作. 当然了,赶紧升级框架到安全版本是比较 ...
- TortoiseGit功能介绍
TortoiseGit功能介绍 使用方便 强大的提交对话框 每个项目设置 最小日志消息长度,以避免意外提交空日志消息 用于拼写检查的语言 与问题跟踪系统集成 有用的工具 有多种语言版本 Tortois ...
- Windows Server2012R2 FTP服务器配置
转载博客:http://blog.csdn.net/smalllu161226/article/details/53887751 1.打开windows server2012R2 服务器管理器界面 添 ...
- [转]常见的JavaScript内存泄露
什么是内存泄露 内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存.内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前就失去了对该段内存的控制, ...
- asp.net session锁导致ajax请求阻塞
问:为了可以顺序访问Session的状态值,Session是否提供了锁定机制?答:Session实现了Reader/Writer的锁机制:当页面对Session具有可写功能(即页面有<%@Pag ...
- AttributeError: 'int' object has no attribute 'isdigit'(python下的isdigit函数)
python下的isdigit函数: isdigit() 方法检测字符串是否只由数字组成. 语法 isdigit()方法语法: str.isdigit() 示例代码如下: 结果: 我想说的重点在于 ...