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学习笔记
用途 做各种二维三维四维偏序等等. 代替空间巨大的树套树. 数据较弱的时候水分. 思想 我们发现平衡树这种东西功能强大,然而只能做一维上的询问修改,显得美中不足. 于是我们尝试用平衡树的这种二叉树结构 ...
随机推荐
- Caffe 分类问题 Check failed: error == cudaSuccess (2 vs. 0) out of memory
如果图片过大,需要适当缩小batch_size的值,否则使用GPU时可能超出其缓存大小而报错
- linux下添加逻辑分区并挂载(手动和自动方式)
一.查看新磁盘[root@desktop61 Desktop]# fdisk -cul /dev/sdc Disk /dev/sdc: 21.5 GB, 21474836480 bytes255 he ...
- js实现十分钟内在页面无任何操作,页面跳转至登陆页
// 如果10分钟没有操作,退出到登录页 var timer; function startTimer(){ clearTimeout(timer); timer=setTimeout(functio ...
- js中 给json对象添加属性和json数组添加元素
js中 给json对象添加新的属性 比如现在有一个json对象为jsonObj,需要给这个对象添加新的属性newParam,同时给newParam赋值为pre.做法如下: var obj={ &quo ...
- 用memset设置无穷大无穷小
memeset是以字节为单位进行赋值的,对字符数组可以直接用. 但对于int数组就不行了. 但设置无穷大来说有个技巧: 如果我们将无穷大设为0x3f3f3f3f,那么奇迹就发生了,0x3f3f3f3f ...
- hibernate10--命名查询
<?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hiber ...
- js 判断当前操作系统是ios还是android还是电脑端
js判断客户端是否是IOS或者是Android //如果返回true 则说明是Android function is_weixin() { var ua = window.navigator.user ...
- DCL并非单例模式专用
我相信大家都很熟悉DCL,对于缺少实践经验的程序开发人员来说,DCL的学习基本限制在单例模式,但我发现在高并发场景中会经常遇到需要用到DCL的场景,但并非用做单例模式,其实DCL的核心思想和CopyO ...
- javascript与jquery的区别
- js运用3
1. js的本质就是处理数据.数据来自于后台的数据库. 所以变量就起到一个临时存储数据的作用. ecmascript制定了js的数据类型. 数据类型有哪些? 1. 字符串 string 2. 数字 n ...