jquery ztree ajax,jQuery树控件zTree使用方法详解（一）

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

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

前台代码如下：

js：

//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" };

}

html：

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

public void SelStudent()

{

set("getStudentsJsonUrl", to(GetStudentsJson));

}

public void GetStudentsJson()

{

List> dicList = new List>();

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 list = edu_ClaNameFlowService.GetListByTeacherId(teacher.Id);

foreach (Edu_ClaNameFlow item in list)

{

Dictionary dic = new Dictionary();

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 list = edu_StudService.GetListByClassId(id.Replace("level0", ""));

foreach (Edu_Student item in list)

{

Dictionary dic = new Dictionary();

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使用汇总》 。

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