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学习笔记
用途 做各种二维三维四维偏序等等. 代替空间巨大的树套树. 数据较弱的时候水分. 思想 我们发现平衡树这种东西功能强大,然而只能做一维上的询问修改,显得美中不足. 于是我们尝试用平衡树的这种二叉树结构 ...
随机推荐
- java执行post请求,并获取json结果组成想要的内容存放本地txt中
大概就是这样一个post 然后用户的需求是: 1.分析这个接口,实现1.1 获取到sentence, score字段值1.2 这个score值如果是<0.5,打印分值 情感倾向:0 ...
- Houdini技术体系 过程化地形系统(一):Far Cry5的植被系统分析
背景 在大世界游戏里,植被(biome)是自然环境非常重要的组成部分,虽然UE4里的也有比较不错的地形+植被系统,但相比国外AAA级游戏的效果,还是有不少的差距,简介如下: UE4的植被分为( ...
- 万能分布式消费框架,添加基于redis中间件的方式。
框架目的是分布式调度起一切任何函数(当然也包括调度起一切任何方法). 之前写的是基于rabbitmq的,作为专用的消息队列好处比redis的list结构好很多.但有的人还是强烈喜欢用redis,以及r ...
- TeamViewer 版本v13.2.26558 修改ID
TeamViewer 使用频繁后会被判定为商业用途,不可用.此软件的账号和设备mac地址绑定. 修改TeamViewer ID后可以重新开始使用.下述方法可以成功修改TeamViewer ID. Wi ...
- poj 2074
哎怎么说,感觉现在处理平面上点线的题已经比较熟练了. 这题就离散化然后搞个前缀和就没了. 准备开始进一步的自闭了. 下面是disguss的一些样例... 其实是我自己写错了个地方,本来能1A的. #i ...
- java学习之路--面试之多线程基础
Java多线程面试问题1. 进程和线程之间有什么不同?一个进程是一个独立(self contained)的运行环境,它可以被看作一个程序或者一个应用.而线程是在进程中执行的一个任务.Java运行环境是 ...
- 小tip: transition与visibility
一.transition与visibility 这里的transition指的就是CSS3中的那个过渡动画属性transition. 如果我们仔细查看其支持的CSS属性值,会发现竟然有一个visibi ...
- HTML、CSS知识点,面试开发都会需要--No.3 盒子模型
No.3 盒子模型 1.盒子模型属性 (1)包含的CSS属性:width.height.padding.border.margin. 1.盒子模型属性 (1)包含的CSS属性: width.heigh ...
- AIX 网络设置
AIX使用命令修改网卡IP地址,永久生效 比如修改en0的ip地址.chdev -l en0 -a netaddr=192.168.1.100 -a netmask=255.255.255.0 -a ...
- mysql使用存储过程和event定期删除
-- 创建存储过程DELIMITER //CREATE PROCEDURE del_data()BEGIN DELETE FROM t_route_status WHERE route_date &l ...