一、节点模糊搜索功能:搜索成功后,自动高亮显示并定位、展开搜索到的节点。

二、节点异步加载:1、点击展开时加载数据;2、选中节点时加载数据。

前台代码如下:

<script type="text/javascript">
//ztree设置
var setting = {
view: {
fontCss: getFontCss
},
check: {
enable: true
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
},
async: {
enable: true,
url: "#{getStudentsJsonUrl}",
autoParam: ["id", "level"]
},
callback: {
beforeCheck: zTreeBeforeCheck,
onNodeCreated: zTreeOnNodeCreated,
beforeExpand: zTreeBeforeExpand
}
}; var reloadFlag = false; //是否重新异步请求
var checkFlag = true; //是否选中 //节点展开前
function zTreeBeforeExpand(treeId, treeNode) {
reloadFlag = false;
return true;
}; //节点创建后
function zTreeOnNodeCreated(event, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(treeId);
if (reloadFlag) {
if (checkFlag) {
zTree.checkNode(treeNode, true, true);
}
if (!treeNode.children) {
zTree.reAsyncChildNodes(treeNode, "refresh");
}
}
}; //选中节点前
function zTreeBeforeCheck(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(treeId);
if (!treeNode.children) {
reloadFlag = true;
checkFlag = true;
zTree.reAsyncChildNodes(treeNode, "refresh");
}
return true;
} //页面加载完成
_run(function () {
require(['zTree/js/jquery.ztree.all-3.5'], function () {
$.ajax({
type: "POST",
url: "#{getStudentsJsonUrl}",
success: function (data) {
if (data && data.length != 0) { //如果结果不为空
$.fn.zTree.init($("#tree"), setting, data);
}
else { //搜索不到结果 }
}
});
}); //提交
$("#inputSubmit").click(function () {
var zTree = $.fn.zTree.getZTreeObj("tree");
var nodes = zTree.getCheckedNodes(true);
var ids = "";
var names = "";
for (var i = 0; i < nodes.length; i++) { //遍历选择的节点集合
if (!nodes[i].isParent) {
ids += nodes[i].id.replace("level" + nodes[i].level, "") + ",";
names += nodes[i].name + ",";
}
}
Simpo.ui.box.hideBox();
parent.$(".boxFrm").contents().find("#inputRange").val(names.substr(0, names.length - 1));
parent.$(".boxFrm").contents().find("#hidRange").val(ids.substr(0, ids.length - 1));
})
}); //查找节点
var lastNodeList = [];
var lastKey;
function searchNode() {
var zTree = $.fn.zTree.getZTreeObj("tree"); var key = $.trim($("#inputSearchNode").val());
if (key != "" && key != lastKey) {
nodeList = zTree.getNodesByParamFuzzy("name", key);
for (var i = 0, l = lastNodeList.length; i < l; i++) { //上次查询的节点集合取消高亮
lastNodeList[i].highlight = false;
zTree.updateNode(lastNodeList[i]);
}
zTree.expandAll(false); //全部收缩
if (nodeList.length > 0) {
for (var i = 0, l = nodeList.length; i < l; i++) { //遍历找到的节点集合
if (nodeList[i].getParentNode()) {
zTree.expandNode(nodeList[i].getParentNode(), true, false, false); //展开其父节点
}
nodeList[i].highlight = true;
zTree.updateNode(nodeList[i]);
}
}
zTree.refresh(); // 很重要,否则节点状态更新混乱。
lastNodeList = nodeList;
lastKey = key;
}
} //加载数据
function loadData() {
var zTree = $.fn.zTree.getZTreeObj("tree");
var rootNodes = zTree.getNodes();
reloadFlag = true;
checkFlag = false;
for (var i = 0; i < rootNodes.length; i++) {
if (!rootNodes[i].children) {
zTree.reAsyncChildNodes(rootNodes[i], "refresh"); //异步加载
}
}
} //全部收缩
function closeAll() {
var zTree = $.fn.zTree.getZTreeObj("tree");
if ($("#inputCloseAll").val() == "全部收缩") {
zTree.expandAll(false);
$("#inputCloseAll").val("全部展开")
}
else {
zTree.expandAll(true);
$("#inputCloseAll").val("全部收缩")
}
} //高亮样式
function getFontCss(treeId, treeNode) {
return (treeNode.highlight) ? { color: "#A60000", "font-weight": "bold"} : { color: "#333", "font-weight": "normal" };
}
</script>
    <div style="width: 200px; height: 260px; overflow: auto; border: solid 1px #666;">
<ul id="tree" class="ztree">
</ul>
</div>

后台代码(后台返回Json数据):

        public void SelStudent()
{
set("getStudentsJsonUrl", to(GetStudentsJson));
} public void GetStudentsJson()
{
List<Dictionary<string, string>> dicList = new List<Dictionary<string, string>>(); string level = ctx.Post("level");
string id = ctx.Post("id");
if (strUtil.IsNullOrEmpty(id))
{
#region 加载班级
//获取当前登录用户
Sys_User user = AdminSecurityUtils.GetLoginUser(ctx);
//获取当前用户关联的老师
Edu_Teacher teacher = edu_TeacService.FindByUserId(user.Id);
//获取班级集合
List<Edu_ClaNameFlow> list = edu_ClaNameFlowService.GetListByTeacherId(teacher.Id);
foreach (Edu_ClaNameFlow item in list)
{
Dictionary<string, string> dic = new Dictionary<string, string>();
dic.Add("id", "level0" + item.Calss.Id.ToString());
dic.Add("pId", "");
dic.Add("name", item.Gra.Name + item.Calss.Name);
dic.Add("isParent", "true");
dicList.Add(dic);
}
#endregion
}
else
{
if (level == "")
{
//加载学生
List<Edu_Student> list = edu_StudService.GetListByClassId(id.Replace("level0", ""));
foreach (Edu_Student item in list)
{
Dictionary<string, string> dic = new Dictionary<string, string>();
dic.Add("id", "level1" + item.Id.ToString());
dic.Add("pId", id);
dic.Add("name", item.Name);
dic.Add("isParent", "false");
dicList.Add(dic);
}
}
} echoJson(dicList);
}

zTree的使用的更多相关文章

  1. ztreeDeptSelect 基于jquery和ztree的部门选择插件

    插件介绍 首先我们来看插件的功能演示(效果): 插件准备好后.前台只需编写html: <input type="text" class="deptName" ...

  2. C#使用Jquery zTree实现树状结构显示_异步数据加载

    JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面:  http://www.treejs.cn/v3/dem ...

  3. 【笔记】ztree的使用

    引用的js和css: <!-- zTreeJS --><script type="text/javascript" src="jquery/jquery ...

  4. zTree和SweetAlert插件初探

    1.zTree插件简介 zTree是一个依靠 jQuery实现的多功能“树插件”.优异的性能.灵活的配置.多种功能的组合是zTree最大优点.专门适合项目开发,尤其是树状菜单.树状数据的Web显示.权 ...

  5. jQuery.zTree的跳坑记录

    最近项目用到树型结构的交互,一开始并不打算选择zTree,为了项目进度我妥协了,这一妥协后果就是我进坑了,在2天的挣扎中,我终于跳出坑了,活了下来,有一些感慨纪录下来. 有一个业务场景需要2个树型结构 ...

  6. ztree + ashx +DataTable +Oracle

    问题描述 好久没有使用ztree了,刚才在使用ztree做导航时遇到了几个小问题: 1.返回数据源是undefined . 2.数据出现后树结构没有出现(pIdKey单词拼写错误). 3.在使用Ora ...

  7. js树形控件—zTree使用总结

    0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 ...

  8. zTree简单实现

    用zTree简单实现从后台传数据生成树 1.在jsp上引入js,jsp的head完整的部分 <%@ page language="java" contentType=&quo ...

  9. ztree.js的使用整理

    /** 配置:知识点管理 */ var setting = { view: { showIcon: false, addDiyDom: addPrevDom, addHoverDom: addHove ...

  10. zTree 循环树

    /// <summary> /// 初始化第一次节点加载 /// </summary> /// protected string _menu = string.Empty; p ...

随机推荐

  1. 前沿技术解密——VirtualDOM

    作为React的核心技术之一Virtual DOM,一直披着神秘的面纱. 实际上,Virtual DOM包含: Javascript DOM模型树(VTree),类似文档节点树(DOM) DOM模型树 ...

  2. LINQ TO ENTITY 根据Birthday获取Age

    from emp in EmployeeInfo let years = EntityFunctions.DiffYears(emp.Birthday.Value,DateTime.Now) let ...

  3. josephus Problem 中级(使用数组模拟链表,提升效率)

    问题描写叙述: 在<josephus Problem 0基础(使用数组)>中.我们提出了一种最简单直接的解决方式. 可是,细致审视代码之后.发现此种方案的效率并不高,详细体如今.当有人出局 ...

  4. [AX2012]发送广播邮件

    AX 2012可以使用MAPI或者SMTP发送邮件,MAPI是客户端方法,需要outlook的协作,而SMTP则是服务器端方法,要求SMTP允许AOS服务器通过它中继.这里要讲的就是如何通过SMTP发 ...

  5. idea启动tomcat失败,1099端口被占用

    今天遇到一个问题,当使用idea启动一个tomat服务的时候,报错:不能连接本地1099端口. /Users/liqiu/soft/develop/apache-tomcat-/bin/catalin ...

  6. JIT

    http://www.cppblog.com/vczh/category/9583.html

  7. 说说lambda表达式与表达式树(未完)

    Lambda表达式可以转换成为代码(委托)或者数据(表达式树).若将其赋值给委托,则Lambda表达式将转换为IL代码:如果赋值给 Expression<TDelegate>,则构造出一颗 ...

  8. 关于STM8的用户数据空间读写问题

    情况是这样的,我的程序里有一个参数,数值不超过1000,我要保存到EEPROM中,那就要分两个字节存放.我用下面的方式保存是正常的: BASE = 0x4000; param = 999; eepro ...

  9. php报错: PHP Warning: PHP Startup: memcache: Unable to initialize module

    在mac上通过brew 安装php的memcache扩展(brew install php56-memcache)后运行 ~  php -mPHP Warning:  PHP Startup: mem ...

  10. CLR via C#深解笔记五 - 事件

    事件处理实际上是一种具有特殊签名的delegate, 像这个样子:public delegate void EventHandler(object sender, EventArgs e);   类型 ...