做项目时,需要用到带复选框的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学习笔记的更多相关文章

  1. 珂朵莉树(Chtholly Tree)学习笔记

    珂朵莉树(Chtholly Tree)学习笔记 珂朵莉树原理 其原理在于运用一颗树(set,treap,splay......)其中要求所有元素有序,并且支持基本的操作(删除,添加,查找......) ...

  2. dsu on tree学习笔记

    前言 一次模拟赛的\(T3\):传送门 只会\(O(n^2)\)的我就\(gg\)了,并且对于题解提供的\(\text{dsu on tree}\)的做法一脸懵逼. 看网上的其他大佬写的笔记,我自己画 ...

  3. Link Cut Tree学习笔记

    从这里开始 动态树问题和Link Cut Tree 一些定义 access操作 换根操作 link和cut操作 时间复杂度证明 Link Cut Tree维护链上信息 Link Cut Tree维护子 ...

  4. 矩阵树定理(Matrix Tree)学习笔记

    如果不谈证明,稍微有点线代基础的人都可以在两分钟内学完所有相关内容.. 行列式随便找本线代书看一下基本性质就好了. 学习资源: https://www.cnblogs.com/candy99/p/64 ...

  5. k-d tree 学习笔记

    以下是一些奇怪的链接有兴趣的可以看看: https://blog.sengxian.com/algorithms/k-dimensional-tree http://zgjkt.blog.uoj.ac ...

  6. splay tree 学习笔记

    首先感谢litble的精彩讲解,原文博客: litble的小天地 在学完二叉平衡树后,发现这是只是一个不稳定的垃圾玩意,真正实用的应有Treap.AVL.Splay这样的查找树.于是最近刚学了学了点S ...

  7. LSM Tree 学习笔记——本质是将随机的写放在内存里形成有序的小memtable,然后定期合并成大的table flush到磁盘

    The Sorted String Table (SSTable) is one of the most popular outputs for storing, processing, and ex ...

  8. LSM Tree 学习笔记——MemTable通常用 SkipList 来实现

    最近发现很多数据库都使用了 LSM Tree 的存储模型,包括 LevelDB,HBase,Google BigTable,Cassandra,InfluxDB 等.之前还没有留意这么设计的原因,最近 ...

  9. Expression Tree 学习笔记(一)

    大家可能都知道Expression Tree是.NET 3.5引入的新增功能.不少朋友们已经听说过这一特性,但还没来得及了解.看看博客园里的老赵等诸多牛人,将Expression Tree玩得眼花缭乱 ...

  10. K-D Tree学习笔记

    用途 做各种二维三维四维偏序等等. 代替空间巨大的树套树. 数据较弱的时候水分. 思想 我们发现平衡树这种东西功能强大,然而只能做一维上的询问修改,显得美中不足. 于是我们尝试用平衡树的这种二叉树结构 ...

随机推荐

  1. java执行post请求,并获取json结果组成想要的内容存放本地txt中

    大概就是这样一个post 然后用户的需求是: 1.分析这个接口,实现1.1 获取到sentence,  score字段值1.2 这个score值如果是<0.5,打印分值 情感倾向:0       ...

  2. Houdini技术体系 过程化地形系统(一):Far Cry5的植被系统分析

    背景     在大世界游戏里,植被(biome)是自然环境非常重要的组成部分,虽然UE4里的也有比较不错的地形+植被系统,但相比国外AAA级游戏的效果,还是有不少的差距,简介如下: UE4的植被分为( ...

  3. 万能分布式消费框架,添加基于redis中间件的方式。

    框架目的是分布式调度起一切任何函数(当然也包括调度起一切任何方法). 之前写的是基于rabbitmq的,作为专用的消息队列好处比redis的list结构好很多.但有的人还是强烈喜欢用redis,以及r ...

  4. TeamViewer 版本v13.2.26558 修改ID

    TeamViewer 使用频繁后会被判定为商业用途,不可用.此软件的账号和设备mac地址绑定. 修改TeamViewer ID后可以重新开始使用.下述方法可以成功修改TeamViewer ID. Wi ...

  5. poj 2074

    哎怎么说,感觉现在处理平面上点线的题已经比较熟练了. 这题就离散化然后搞个前缀和就没了. 准备开始进一步的自闭了. 下面是disguss的一些样例... 其实是我自己写错了个地方,本来能1A的. #i ...

  6. java学习之路--面试之多线程基础

    Java多线程面试问题1. 进程和线程之间有什么不同?一个进程是一个独立(self contained)的运行环境,它可以被看作一个程序或者一个应用.而线程是在进程中执行的一个任务.Java运行环境是 ...

  7. 小tip: transition与visibility

    一.transition与visibility 这里的transition指的就是CSS3中的那个过渡动画属性transition. 如果我们仔细查看其支持的CSS属性值,会发现竟然有一个visibi ...

  8. HTML、CSS知识点,面试开发都会需要--No.3 盒子模型

    No.3 盒子模型 1.盒子模型属性 (1)包含的CSS属性:width.height.padding.border.margin. 1.盒子模型属性 (1)包含的CSS属性: width.heigh ...

  9. AIX 网络设置

    AIX使用命令修改网卡IP地址,永久生效 比如修改en0的ip地址.chdev -l en0 -a netaddr=192.168.1.100 -a netmask=255.255.255.0 -a ...

  10. mysql使用存储过程和event定期删除

    -- 创建存储过程DELIMITER //CREATE PROCEDURE del_data()BEGIN DELETE FROM t_route_status WHERE route_date &l ...