做项目时,需要用到带复选框的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. 消息中间件系列五:RabbitMQ的使用场景(异步处理、应用解耦)

    一.异步处理 场景: 用户注册,写入数据库成功以后,发送邮件和短信. 准备工作: 1)安装RabbitMQ,参考前面的文章 2)新建一个名为RabbitMQAsyncProc的maven web工程, ...

  2. Java Spring MVC 错误 及 常见问题 总结

    [参考]spring入门常见的问题及解决办法 错误: 从Git新获取项目 运行出现 1.org.springframework.beans.factory.BeanDefinitionStoreExc ...

  3. iOS 之 HTTPS集成实战应用

    临时想起来忘记把项目中用到的https集成整理收藏起来,以备后续不时之需.新手一般了解如下步骤即可: 1. HTTP 和 HTTPS 基本知识和学习 http://www.cnblogs.com/xi ...

  4. JS数组常用方法总结

    JavaScript中创建数组有两种方式 (一)使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(20); / ...

  5. Inside The C++ Object Model(四)

    ============================================================================4-1. Member 的各种调用方式静态成员函 ...

  6. kylin 使用RESTful API 请求

    目前根据Kylin的官方文档介绍,Kylin的认证是basic authentication,加密算法是Base64,在POST的header进行用户认证我使用的用户和密码是(格式:username: ...

  7. web.py框架之基本应用

    一.基本应用 1.1 Hello World! # coding:utf-8 import web urls = ( "/.*", "Tk_online" ) ...

  8. Ubuntu系统安装nginx

    1.首先查看linux系统 cat /proc/version Linux version 4.9.59-v7+ (dc4@dc4-XPS13-9333) (gcc version 4.9.3 (cr ...

  9. Druid连接池(二)

    DRUID是阿里巴巴开源平台上一个数据库连接池实现,它结合了C3P0.DBCP.PROXOOL等DB池的优点,同时加入了日志监控,可以很好的监控DB池连接和SQL的执行情况,可以说是针对监控而生的DB ...

  10. 【C++/函数】实验2

    1.实验内容 函数声明和函数定义: 形参和实参: 主调函数把实参的值传送给被调函数的形参从而实现主调函数向被调函数的数据传送. 形参:形式参数,表示主调函数与被调函数之间的联系.标识了在形参出现的位置 ...