jQuery树控件zTree使用方法详解（一）

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

二、节点异步加载：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使用汇总》 。

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