jquery ztree异步搜索（搜叶子）实践
投稿：lijiao
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了jquery ztree异步搜索，即搜叶子实践，使用jquery ztree开发的树控件经常需要进行一些异步查找叶子节点的操作，感兴趣的小伙伴们可以参考一下
一、初始异步加载树
&初始化默认给出一个根结点，再结合异步加载的方式手动触发默认加载第一层，如图：
代码如下：
var treeSetting = {
enable: true, &a href="http://my.oschina.net/wealpan/admin/"xxx/demo.do?method=listByTree" rel="nofollow"&url:"xxx/demo.do?method=listByTree&/a&",
dataType:"json",
autoParam:["id=pid"]
dblClickExpand: true,
selectedMulti: false,
expandSpeed: ($.browser.msie && parseInt($.browser.version)&=6)?"":"fast"
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pid",
rootPId: "root"
callback: {
onNodeCreated: zTreeOnNodeCreated
//默认根结点
var rootNode = {"id":0, "pid":"root", "name":"商品分类", "open":true, "isParent":true};
$(document).ready(function(){
var zTreeObj = $.fn.zTree.init($("#tree"), treeSetting, rootNode);
var node = zTreeObj.getNodeByParam("id", 0, null);
zTreeObj.reAsyncChildNodes(node, "refresh");
二、异步搜索叶子结点
&&& 在使用JQuery ZTREE时可能要用到异步的方式模糊搜索叶子结点，如图：
&&& 而如果只使用ZTREE自带的展开方法zTreeObj.expandNode只是会展开改结点，无法触发异步加载；这时候就必须手动调用异步加载的方法进行处理，解决思路如下：&&&
&&& 通过在otherParam数组中设值的方式将搜索参数带到后台（无参数时必须将otherParam设为空数组否则一直会将前一次的参数带到后台）；在结点创建完成后的回调函数onNodeCreated中进行手动异步加载。
代码如下：
function searchM() {
var param = $.trim($("input[name='param']").val());
var treeObj = $.fn.zTree.getZTreeObj("tree");
var node = treeObj.getNodeByParam("id", 0, null);
if(param != ""){
param = encodeURI(encodeURI(param));
treeObj.setting.async.otherParam=["param", param];
//搜索参数为空时必须将参数数组设为空
treeObj.setting.async.otherParam=[];
treeObj.reAsyncChildNodes(node, "refresh");
function zTreeOnNodeCreated(event, treeId, treeNode) {
var param &span&&/span&&span&&/span&= $.tr&span&&/span&im($("input[name='param']").val());
var treeObj = $.fn.zTree.getZTreeObj("tree");
//只有搜索参数不为空且该节点为父节点时才进行异步加载
if(param != "" && treeNode.isParent){
treeObj.reAsyncChildNodes(treeNode, "refresh");
以上就是关于jquery ztree异步搜索的全部内容，希望对大家的学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具一个很好用的Jquery树形控件
官网：http://www.ztree.me/v3/main.php#_zTreeInfo
我主要引用的文件为：
//最新版的JS压缩包
&script src="../Script/jquery-1.11.1.min.js" type="text/javascript"&&/script&
//Ztree样式
&link href="../CSS/zTreeStyle.css" rel="stylesheet" type="text/css" /&
&script src="../Script/jquery.ztree.core-3.5.js" type="text/javascript"&&/script&
&script src="../Script/jquery.ztree.excheck-3.5.js" type="text/javascript"&&/script&
根据项目需要主setting设置如下：
var setting1 = {
enable: true,
chkboxType: { "Y": "ps", "N": "ps" }
simpleData: {
enable: true
var setting = {
enable: true,
chkboxType: { "Y": "ps", "N": "ps" }
enable: true, // 设置 zTree是否开启异步加载模式
加载全部信息
url: "", // Ajax 获取数据的 URL 地址
autoParam: ["id"]
// 异步加载时自动提交父节点属性的参数,假设父节点 node = {id:1, name:"test"}，异步加载时，提交参数 zId=1
data: { // 必须使用data
simpleData: {
enable: true,
idKey: "id", // id编号命名 默认
pIdKey: "pId", // 父id编号命名 默认
rootPId: 0 // 用于修正根节点父节点数据，即 pIdKey 指定的属性值
// 回调函数
callback: {
//捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数
onAsyncError: zTreeOnAsyncError,
onAsyncSuccess: function (event, treeId, treeNode, msg) {
var name = $("#&%=hdfValue.ClientID%&").val();
if (name != undefined && name != "") {
//默认选中
//设置同步
type: "POST",
async: false,
data: { type: '', name: name },
dataType: 'json',
success: function (data) {
//对于获取的数据执行相关的操作，如：绑定、显示等
var treeObj = $.fn.zTree.getZTreeObj('Tree1');
for (var i = 0; i & data. i++) {
var node = treeObj.getNodeByParam("id", data[i].id, null);
treeObj.checkNode(node);
//学校信息
type: "POST",
async: false,//同步
url: 'CategoryHandler.ashx',
data: { type: 'search', name: name },
dataType: 'json',
success: function (data) {
//对于获取的数据执行相关的操作，如：绑定、显示等
//专业信息;eval将字符串转换为JSON串/
//可以使用http:/// 检查是否自己的Json串正确与否
$.fn.zTree.init($("#Tree2"), setting1, eval(data[0].Specialty));
onRename: zTreeOnRename
// 加载错误提示
function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
alert("加载错误：" + XMLHttpRequest);
function beforeRemove(e, treeId, treeNode) {
return confirm("你确定要删除吗？");
function onRemove(e, treeId, treeNode) {
if (treeNode.isParent) {
var childNodes = zTree.removeChildNodes(treeNode);
var paramsArray = new Array();
for (var i = 0; i & childNodes. i++) {
paramsArray.push(childNodes[i].id);
alert("删除父节点的id为：" + treeNode.id + "\r\n他的孩子节点有：" + paramsArray.join(","));
alert("你点击要删除的节点的名称为：" + treeNode.name + "\r\n" + "节点id为：" + treeNode.id);
function zTreeOnRename(event, treeId, treeNode, isCancel) {
//可以自定义属性，然后根据这些属性来完成操作
alert(treeNode.id + ",重命名过后的回调函数 " + treeNode.name);
//1.ajax更新数据库
//必备的在ztree加载方法
$(document).ready(function () {
$.fn.zTree.init($("#Tree1"), setting);
$.fn.zTree.init($("#Tree2"), setting1);
//将在ztree1中选中的信息填到ztree2
function OnclickRight() {
var treeObj = $.fn.zTree.getZTreeObj('Tree1');
var nodes = treeObj.getCheckedNodes(true);
var checkedValues = '';
var a = [];
for (var i = 0; i & nodes. i++) {
var obj = {};
obj.id = nodes[i].
obj.pId = nodes[i].pId;
obj.name = nodes[i].
a.push(obj);
if (a.length & 0) {
$.fn.zTree.init($("#Tree2"), setting1, a);
//清除选中的tree2节点
function OnclickLeft() {
var treeObj = $.fn.zTree.getZTreeObj("Tree2");
var nodes = treeObj.getCheckedNodes(true);
for (var i = 0, l = nodes. i & i++) {
if (nodes[i].check_Child_State == 2) {
treeObj.removeNode(nodes[i]);
} else if (nodes[i].check_Child_State == -1 && !(nodes[i].isParent)) {
treeObj.removeNode(nodes[i]);
treeObj.checkNode(nodes[i], false, false);
附带这个页面的其他几个问题：
&asp:DropDownList ID="ddlB" runat="server"&&&/asp:DropDownList&
获取此下拉框数据：& &YJSEnglish = $("#ContentPlaceHolder1_ddlB").find("option:selected").val();
&&asp:CheckBoxList ID="cblCategory" runat="server" RepeatDirection="Horizontal"&&&/asp:CheckBoxList&
获取多选框数据：
&$("[id*=cblCategory] input:checked").each(function () {
& & & & & & & & Values += $(this).val() + ",";
& & & & & & });
因为我传递到后台的数据有中文信息，所以我的Ajax如下：
&var obj = {};
obj结构如下
obj.OrgId = OrgId;
url: "Ajaxahsx/CategoryHandler.ashx?action=Save",
data: obj,
type: 'POST',
dataType: "json",
contentType: "application/x-www-form- charset=UTF-8",
success: function (data) {
alert("成功");
window.location.href = 'SearchIndex.aspx';
error: function (data) {
alert("程序出错");
阅读(...) 评论()> Ztree树节点模糊搜索(兼容ie跟firefox)
Ztree树节点模糊搜索(兼容ie跟firefox)
lpg709394 & &
发布时间： & &
浏览：12 & &
回复：0 & &
悬赏：0.0希赛币
Ztree树节点模糊搜索(兼容ie和firefox)
通过获取输入框值，模糊查找树节点。var count=0;var lastNfunction searchTree(){
if(count==0){
lastName=document.getElementById("id").
if(lastName!=document.getElementById("id").value){
lastName=document.getElementById("id").
var treeObj = $.fn.zTree.getZTreeObj("tree");//通过名称模糊搜索，也可通过Id查找
var nodes =&& treeObj.transformToArray(treeObj.getNodesByParamFuzzy("name", lastName, null));&&&&&&&&&&&&&& for(i = i & nodes. i++) {
if(count&=nodes.length){
if(nodes[i].name.indexOf(lastName)!=-1){
treeObj.selectNode(nodes[i]);
if(nodes[i].icon=="xx.png"){
parent.mainFrame.location.href = "xx.
}else if(nodes[i].icon=="xx.png"){
parent.mainFrame.location.href = "xx.jsp";
}else if(nodes[i].icon=="xx.png"){
parent.mainFrame.location.href = "xx.jsp";
}//实现自动打开
//treeObj.expandNode(nodes[i], false,false , false);
本问题标题：
本问题地址：
温馨提示：本问题已经关闭，不能解答。
暂无合适的专家
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&