一、节点模糊搜索功能：搜索成功后，自动高亮显示并定位、展开搜索到的节点。
二、节点异步加载：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使用汇总》 。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
JS 浅拷贝——Shallow copy 在 Canvas 绘图中的应用
网友评论