二、节点异步加载:1、点击展开时加载数据;2、选中节点时加载数据。
前台代码如下:
js:
<script type="text/javascript"> //ztree设置 var setting = { view: { fontcss: getFontCss }, check: { enable: true }, data: { simpleData: { enable: true, idKey: "id", pIdKey:TjMxo "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 (!treeNohttp://www.cppcns.comde.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").valhttp://www.cppcns.com(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 close编程客栈All() { 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>
html:
<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", "0");
dic.Add("name", item.Gra.Name + item.Calss.Name);
dic.Add("isParent", "true");
dicList.Add(dic);
}
#endregion
}
else
{
if (level == "0")
{
//加载学生
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("pIdwww.cppcns.com", id);
dic.Add("name", item.Name);
dic.Add("isParent", "false");
dicList.Add(dic);
}
}
}
echoJson(dicList);
}
更多关于ztree控件的内容,请参考专题《jQuery插件ztree使用汇总》 。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
本文标题: jQuery树控件zTree使用方法详解(一)
本文地址: http://www.cppcns.com/wangluo/javascript/180611.html
© 著作权归作者所有
举报
发表评论
0/200