欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery树控件zTree使用方法详解(一)

程序员文章站 2023-11-05 18:01:34
一、节点模糊搜索功能:搜索成功后,自动高亮显示并定位、展开搜索到的节点。 二、节点异步加载:1、点击展开时加载数据;2、选中节点时加载数据。 前台代码如下: js...

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

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

前台代码如下:

js:

<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>

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("pid", id);
  dic.add("name", item.name);
  dic.add("isparent", "false");
  diclist.add(dic);
  }
 }
 }

 echojson(diclist);
 }

更多关于ztree控件的内容,请参考专题《jquery插件ztree使用汇总》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。