全球彩票平台_全球彩票注册平台|官网下载地址

热门关键词: 全球彩票平台,全球彩票注册平台,全球彩官网下载地址

【全球彩官网下载地址】zTree异步加载,jQuery树控

zTree插件下拉树使用入门教程,ztree入门教程

近些年,因为做事急需一个树形下拉框的组件,经过查资料一般有三种的落真实意况势。其一,正是接纳zTree达成;其二,就是运用easyUI完毕。因为商家的前端不是行使easyUI设计的,故这里本人采取了zTree来落到实处下拉树。

此地运用简易的多少格式(即轻松的Json格式)类似如下Json:

var zNodes =[
      {id:1, pId:0, name:"北京"},
      {id:2, pId:0, name:"天津"},
      {id:3, pId:0, name:"上海"},
      {id:6, pId:0, name:"重庆"},
      {id:4, pId:0, name:"河北省", open:true, nocheck:true},
      {id:41, pId:4, name:"石家庄"},
      {id:42, pId:4, name:"保定"},
      {id:43, pId:4, name:"邯郸"},
      {id:44, pId:4, name:"承德"},
      {id:5, pId:0, name:"广东省", open:true, nocheck:true},
      {id:51, pId:5, name:"广州"},
      {id:52, pId:5, name:"深圳"},
      {id:53, pId:5, name:"东莞"},
      {id:54, pId:5, name:"佛山"},
      {id:6, pId:0, name:"福建省", open:true, nocheck:true},
      {id:61, pId:6, name:"福州"},
      {id:62, pId:6, name:"厦门"},
      {id:63, pId:6, name:"泉州"},
      {id:64, pId:6, name:"三明"}
     ];

那边首先须要一个实体bean,用来封装对应查出来的数码,如下:

public class ZtreeNode {

  // id
  private String id;
  // 父id
  private String pId;
  // 显示名称
  private String name;
  // 是否打开 (这里默认是不打开的,如果需要打开,设为true)
  // private boolean open ;
  // 能否选择 (设置节点是否能够选择,默认都能选择,设为true对应的节点不能选择)
  // private boolean nocheck ;

  /**getter and setter*/
}

 这里需求注意的是 pId 中的第二的字母是大写的,如若写成小写的就无法构形成树形结构,全部的都以根节点。

接下来,将从数据库中查出来的多寡,调换为对应的ztree供给的bean,再转移为相应的Json,代码如下:

// 获取商品分类树 返回json
  public String getGoodsCategoryTreeJson() {
    List<GoodsCategory> allGoodsCategoryList = goodsCategoryService.getGoodsCategoryTreeJson() ;
    List<ZtreeNode> ztreelist = new ArrayList<ZtreeNode>();
    for(GoodsCategory gcty : allGoodsCategoryList){
      ZtreeNode treenade = new ZtreeNode();
      treenade.setId(gcty.getId());
      treenade.setpId(gcty.getParent()==null?"":gcty.getParent().getId());
      treenade.setName(gcty.getName());
      ztreelist.add(treenade);
    }
    return ajax(ztreelist);
  }

 将list调换为对应的Json方法,如下:

用到的Json工具包:

import org.springframework.base.util.JsonUtil;

private static final String HEADER_ENCODING = "UTF-8";
private static final boolean HEADER_NO_CACHE = true;
private static final String HEADER_TEXT_CONTENT_TYPE = "text/plain";
private static final String HEADER_JSON_CONTENT_TYPE = "text/plain";

// AJAX输出
  protected String ajax(String content, String contentType) {
    try {
      HttpServletResponse response = initResponse(contentType);
      response.getWriter().write(content);
      response.getWriter().flush();
    } catch (IOException e) {
      e.printStackTrace();
    }
    return NONE;
  }

  // 根据文本内容输出AJAX
  protected String ajax(String text) {
    return ajax(text, HEADER_TEXT_CONTENT_TYPE);
  }

  // 根据操作状态输出AJAX
  protected String ajax(Status status) {
    HttpServletResponse response = initResponse(HEADER_JSON_CONTENT_TYPE);
    Map<String, String> jsonMap = new HashMap<String, String>();
    jsonMap.put(STATUS_PARAMETER_NAME, status.toString());
    JsonUtil.toJson(response, jsonMap);
    return NONE;
  }

  // 根据操作状态、消息内容输出AJAX
  protected String ajax(Status status, String message) {
    HttpServletResponse response = initResponse(HEADER_JSON_CONTENT_TYPE);
    Map<String, String> jsonMap = new HashMap<String, String>();
    jsonMap.put(STATUS_PARAMETER_NAME, status.toString());
    jsonMap.put(MESSAGE_PARAMETER_NAME, message);
    JsonUtil.toJson(response, jsonMap);
    return NONE;
  }

  // 根据Object输出AJAX
  protected String ajax(Object object) {
    HttpServletResponse response = initResponse(HEADER_JSON_CONTENT_TYPE);
    JsonUtil.toJson(response, object);
    return NONE;
  }

  // 根据boolean状态输出AJAX
  protected String ajax(boolean booleanStatus) {
    HttpServletResponse response = initResponse(HEADER_JSON_CONTENT_TYPE);
    Map<String, Object> jsonMap = new HashMap<String, Object>();
    jsonMap.put(STATUS_PARAMETER_NAME, booleanStatus);
    JsonUtil.toJson(response, jsonMap);
    return NONE;
  }

  private HttpServletResponse initResponse(String contentType) {
    HttpServletResponse response = ServletActionContext.getResponse();
    response.setContentType(contentType   ";charset="   HEADER_ENCODING);
    if (HEADER_NO_CACHE) {
      response.setDateHeader("Expires", 1L);
      response.addHeader("Pragma", "no-cache");
      response.setHeader("Cache-Control", "no-cache, no-store, max-age=0");
    }
    return response;
  }

那样前台所要求的数据,就从Curry抽取,并打包成了对应的Json。

接下去正是前台的贯彻了,前台供给导入的js和css如下:

<link rel="stylesheet" href="${base}/template/ztree/css/demo.css" type="text/css">
<link rel="stylesheet" href="${base}/template/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${base}/template/ztree/js/jquery.ztree.core.js"></script>

 这里独有demo.css是团结加上的,其余都以法定制定的,demo.css是将法定的demo用到的css修改的,如下(这里有冗余样式未有去除掉);

div.content_wrap {width: 400px;}
div.content_wrap div.left{float: left;}
div.content_wrap div.right{float: right;width: 340px;}
div.zTreeDemoBackground {text-align:left;}

ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #fefefe;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
ul.log {border: 1px solid #617775;background: #f0f6e4;width:300px;height:170px;overflow: hidden;}
ul.log.small {height:45px;}
ul.log li {color: #666666;list-style: none;padding-left: 10px;}
ul.log li.dark {background-color: #E3E3E3;}

/* ruler */
div.ruler {height:20px; width:220px; background-color:#f0f6e4;border: 1px solid #333; margin-bottom: 5px; cursor: pointer}
div.ruler div.cursor {height:20px; width:30px; background-color:#3C6E31; color:white; text-align: right; padding-right: 5px; cursor: pointer}

然后,便是呼应的下拉框:

<div class="content_wrap">
  <div class="zTreeDemoBackground left">
     <input id="citySel" class="formText" type="text" onclick="showMenu(); return false;" readonly value="" style="width:150px;"/>
     <input id="treeids" type="hidden" name="goods.goodsCategory.id" >
     <input type="button" onclick="showMenu();" value="∨">
  </div>
</div>
 8<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
  <ul id="treeDemo" class="ztree" style="margin-top:0;"></ul>
</div>

此间有二个隐形的公文框用来寄存在下拉框选拔内容对应的id。

相应的脚本如下:

<SCRIPT type="text/javascript">

    var setting = {
      view: {
        dblClickExpand: false
      },
      data: {
        simpleData: {
          enable: true
        }
      },
      callback: {
        onClick: onClick
      },
      view: {
          // 不显示对应的图标
        showIcon: false 
      }
    };

    function onClick(e, treeId, treeNode) {
      var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
      nodes = zTree.getSelectedNodes(),
      v = "";
      ids = "";
      nodes.sort(function compare(a,b){return a.id-b.id;});
      for (var i=0, l=nodes.length; i<l; i  ) {
        v  = nodes[i].name   ",";
        ids  = nodes[i].id   ",";
      }
      if (v.length > 0 ) v = v.substring(0, v.length-1);
      var cityObj = $("#citySel");
      cityObj.attr("value", v);
      // 将选中的id放到隐藏的文本域中
      if (ids.length > 0 ) ids = ids.substring(0, ids.length-1);
      var treeids = $("#treeids");
      treeids.attr("value", ids);
    }

    function showMenu() {
      var cityObj = $("#citySel");
      var cityOffset = $("#citySel").offset();
      $("#menuContent").css({left:cityOffset.left   "px", top:cityOffset.top   cityObj.outerHeight()   "px"}).slideDown("fast");

      $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
      $("#menuContent").fadeOut("fast");
      $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
      if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
        hideMenu();
      }
    }

    var zNodes ;
    $(document).ready(function(){
       // 加载数据
      $.ajax({  
        async : false,  
        cache:false,  
        type: 'POST',  
        dataType : 'json',  
        url: '${base}/admin/goods!getGoodsCategoryTreeJson.action', 
        error: function () {
          alert('请求失败');  
        },  
        success:function(data){ 
          zNodes = data; 
        }  
      }); 

      $.fn.zTree.init($("#treeDemo"), setting, zNodes);

    });

</SCRIPT>

与上述同类,二个下拉框就做完了。

如下图所示:

全球彩官网下载地址 1

譬如,要求在退换页面中回写相应的下拉列表数据,增添如下的脚本:

<script type="text/javascript">
$(document).ready(function(){
  if ("${goods.goodsCategory.id}"!="") {
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    var node = treeObj.getNodeByParam("id", "${goods.goodsCategory.id}" , null);
    treeObj.selectNode(node,false , false);
    onClick(event,"${goods.goodsCategory.id}",node,true);

  }
});
</script>

如上便是本文的全体内容,希望对大家学习zTree插件有所协助。

 将list调换为对应的Json方法,如下:

您只怕感兴趣的稿子:

  • jquery zTree异步加载简单实例分享
  • 把jquery 的dialog和ztree结合贯彻步骤
  • jquery ztree完成下拉树形框使用到了json数据
  • 最为树Jquery插件zTree的常用作用特色总计
  • Jquery树插件zTree用法入门教程
  • jquery ztree完成模糊寻觅效果
  • Jquery zTree 树控件异步加载操作
  • jQuery zTree加载树形菜单功用
  • jQuery使用zTree插件完成树形菜单和异步加载

zTree异步加载、模糊搜索简单实例分享,jqueryztree 本文实例为大家讲授了jquery zTree树插件的为主使用方式,具体内容如下 一、节点模糊...

您也许感兴趣的作品:

  • 多字段模糊搜索的函数
  • mysql 模糊搜索的主意介绍
  • jquery zTree异步加载轻松实例分享
  • zTree插件之单选下拉菜单实例代码
  • c#反射表明式树模糊搜索示例
  • 模仿贰个近乎百度google的模糊寻找下拉列表
  • jquery ztree实现下拉树形框使用到了json数据
  • js树插件zTree获取具有入选节点数据的艺术
  • ztree得到当前当选节点子节点id集合的方式
  • Jquery树插件zTree用法入门教程

ztree完结模糊寻觅效果,jqueryztree 本文分享了jquery ztree完成模糊寻找效果多少个实例,供大家参照他事他说加以考察,具体内容如下 ztree官方demo代码里的...

您大概感兴趣的篇章:

  • jquery zTree异步加载、模糊搜索轻松实例分享
  • jQuery使用zTree插件落成树形菜单和异步加载
  • jQuery zTree加载树形菜单成效
  • Jquery zTree 树控件异步加载操作
  • jquery zTree异步加载轻松实例讲解
  • JQuery ztree带筛选、异步加载实例疏解
  • jquery ztree达成模糊寻觅效果
  • jquery zTree异步加载轻松实例分享
  • Jquery树插件zTree用法入门教程
  • 依靠cookie完结zTree树刷新后打开状态不改变

您也许感兴趣的稿子:

  • jquery zTree异步加载轻巧实例分享
  • node在多个div之间活动,用ztree完成
  • zTree插件之多选下拉菜单实例代码
  • zTree插件之单选下拉菜单实例代码
  • jquery ztree达成下拉树形框使用到了json数据
  • 最佳树Jquery插件zTree的常用成效特色计算
  • js树插件zTree获取具备入选节点数据的措施
  • ztree得到当前相中节点子节点id集合的不二秘籍
  • 在父页面获得zTree已入选的节点的法子
  • 后台获取ZTREE选中节点的点子
  • Jquery树插件zTree用法入门教程

前段时间,因为做事索要叁个树形下拉框的组件,经过查资料一般有三种的落真实情状势。其一,便是...

 这里必要专一的是 pId 中的第二的字母是大写的,若是写成小写的就不能够构变成树形结构,全部的都以根节点。

jquery zTree异步加载、模糊搜索轻便实例分享,jqueryztree

正文实例为大家解说了jquery zTree树插件的中坚使用办法,具体内容如下

一、节点模糊寻找效能:搜索成功后,自动高亮显示并稳固、张开探求到的节点。

二、节点异步加载:1、点击张开时加载数据;2、选中节点时加载数据。
前台代码如下:

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

<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);
 }

三、基于cookie完毕zTree树刷新后,打开状态不变

1、除了援引jQuery和zTree的JS外,引用cookie的JS:
复制代码 代码如下:<script type="text/javascript" src="~/Scripts/jquery-treeview/lib/jquery.cookie.js"></script>

2、JS代码:

$(function () {
 //ztree设置
 var setting = {
  data: {
   simpleData: {
    enable: true,
    idKey: "id",
    pIdKey: "pId",
    rootPId: null
   }
  },
  callback: {
   onExpand: onExpand,
   onCollapse: onCollapse
  }
 };

 $.ajax({
  type: "POST",
  url: "/Tech/TemplateTypeManage/GetData",
  success: function (data) {
   if (data && data.length != 0) {
    $.fn.zTree.init($("#tree"), setting, data);
    var treeObj = $.fn.zTree.getZTreeObj("tree");
    var cookie = $.cookie("z_tree"   window.location);
    if (cookie) {
     z_tree = JSON2.parse(cookie);
     for (var i = 0; i < z_tree.length; i  ) {
      var node = treeObj.getNodeByParam('id', z_tree[i])
      treeObj.expandNode(node, true, false)
     }
    }
   }
  }
 });
});//end $

function onExpand(event, treeId, treeNode) {
 var cookie = $.cookie("z_tree"   window.location);
 var z_tree = new Array();
 if (cookie) {
  z_tree = JSON2.parse(cookie);
 }
 if ($.inArray(treeNode.id, z_tree) < 0) {
  z_tree.push(treeNode.id);
 }
 $.cookie("z_tree"   window.location, JSON2.stringify(z_tree))
}

function onCollapse(event, treeId, treeNode) {
 var cookie = $.cookie("z_tree"   window.location);
 var z_tree = new Array();
 if (cookie) {
  z_tree = JSON2.parse(cookie);
 }
 var index = $.inArray(treeNode.id, z_tree);
 z_tree.splice(index, 1);
 for (var i = 0; i < treeNode.children.length; i  ) {
  index = $.inArray(treeNode.children[i].id, z_tree);
  if (index > -1) z_tree.splice(index, 1);
 }
 $.cookie("z_tree"   window.location, JSON2.stringify(z_tree))
}

上述正是关于树插件zTree异步加载、模糊寻找轻松实例批注,希望对大家的求学抱有扶助。

jquery ztree完结模糊寻觅作用,jqueryztree

正文共享了jquery ztree完毕模糊找出效果八个实例,供大家参谋,具体内容如下

ztree官方demo代码里的:
基于参数查找节点
上述文件修改成如下代码

<!DOCTYPE html>
<HTML>
<HEAD>
  <TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
  <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
  <script type="text/javascript" src="../../../js/jquery.ztree.exhide-3.5.js"></script>
<!--<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
  <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
  <SCRIPT type="text/javascript">

    var setting = {
      data: {
        key: {
          title: "t"
        },
        simpleData: {
          enable: true
        }        
      }
    };

    var zNodes =[
      { id:1, pId:0, name:"节点属性搜索演示 1", t:"id=1"},
      { id:11, pId:1, name:"关键字可以是名字", t:"id=11"},
      { id:12, pId:1, name:"关键字可以是level", t:"id=12"},
      { id:13, pId:1, name:"关键字可以是id", t:"id=13"},
      { id:14, pId:1, name:"关键字可以是各种属性", t:"id=14"},
      { id:2, pId:0, name:"节点搜索演示 2", t:"id=2"},
      { id:21, pId:2, name:"可以只搜索一个节点", t:"id=21"},
      { id:22, pId:2, name:"可以搜索节点集合", t:"id=22"},
      { id:23, pId:2, name:"搜我吧", t:"id=23"},
      { id:3, pId:0, name:"节点搜索演示 3", t:"id=3"},
      { id:31, pId:3, name:"我的 id 是: 31", t:"id=31"},
      { id:32, pId:31, name:"我的 id 是: 32", t:"id=32"},
      { id:33, pId:32, name:"我的 id 是: 33", t:"id=33"}
    ];

    function focusKey(e) {
      if (key.hasClass("empty")) {
        key.removeClass("empty");
      }
    }
    function blurKey(e) {
      if (key.get(0).value === "") {
        key.addClass("empty");
      }
    }
    var lastValue = "", nodeList = [], fontCss = {};
    function clickRadio(e) {
      lastValue = "";
      searchNode(e);
    }
    function searchNode(e) {
      var zTree = $.fn.zTree.getZTreeObj("treeDemo");
      if (!$("#getNodesByFilter").attr("checked")) {
        var value = $.trim(key.get(0).value);
        var keyType = "";
        if ($("#name").attr("checked")) {
          keyType = "name";
        } else if ($("#level").attr("checked")) {
          keyType = "level";
          value = parseInt(value);
        } else if ($("#id").attr("checked")) {
          keyType = "id";
          value = parseInt(value);
        }
        if (key.hasClass("empty")) {
          value = "";
        }
        if (lastValue === value) return;
        lastValue = value;
        if (value === "") {
          zTree.showNodes(zTree.transformToArray(zTree.getNodes())) ;
          return;
        }

        if ($("#getNodeByParam").attr("checked")) {
          var node = zTree.getNodeByParam(keyType, value);
          if (node === null) {
            nodeList = [];
          } else {
            nodeList = [node];
          }
        } else if ($("#getNodesByParam").attr("checked")) {
          nodeList = zTree.getNodesByParam(keyType, value);
        } else if ($("#getNodesByParamFuzzy").attr("checked")) {
          nodeList = zTree.getNodesByParamFuzzy(keyType, value);
        }
      } else {
        updateNodes(false);
        nodeList = zTree.getNodesByFilter(filter);
      }
      /**不查询父级
      for(var x = 0 ; x<nodeList.length ; x  ){
        if(nodeList[x].isParent){
          nodeList.splice(x--,1);
        }
      }
      */
      nodeList = zTree.transformToArray(nodeList);
      updateNodes(true);

    }
    function updateNodes(highlight) {
      var zTree = $.fn.zTree.getZTreeObj("treeDemo");
      var allNode = zTree.transformToArray(zTree.getNodes());
      zTree.hideNodes(allNode);
      for(var n in nodeList){
        findParent(zTree,nodeList[n]);
      }

      zTree.showNodes(nodeList);
    }

    function findParent(zTree,node){
      zTree.expandNode(node,true,false,false);
      var pNode = node.getParentNode();
      if(pNode != null){
        nodeList.push(pNode);
        findParent(zTree,pNode);
      }

    }


    function getFontCss(treeId, treeNode) {
      return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
    }
    function filter(node) {
      return !node.isParent && node.isFirstNode;
    }

    var key;
    $(document).ready(function(){
      $.fn.zTree.init($("#treeDemo"), setting, zNodes);
      key = $("#key");
      key.bind("focus", focusKey)
      .bind("blur", blurKey)
      .bind("propertychange", searchNode)
      .bind("input", searchNode);

      $("#name").bind("change", clickRadio);
      $("#level").bind("change", clickRadio);
      $("#id").bind("change", clickRadio);
      $("#getNodeByParam").bind("change", clickRadio);
      $("#getNodesByParam").bind("change", clickRadio);
      $("#getNodesByParamFuzzy").bind("change", clickRadio);
      $("#getNodesByFilter").bind("change", clickRadio);


    });

  </SCRIPT>
</HEAD>

<BODY>
<h1>根据参数查找节点</h1>
<h6>[ 文件路径: core/searchNodes.html ]</h6>
<div class="content_wrap">
  <div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
  </div>
  <div class="right">
    <ul class="info">
      <li class="title"><h2>1、getNodeByParam / getNodesByParam / getNodesByParamFuzzy 方法操作说明</h2>
        <ul class="list">
        <li class="highlight_red">使用 zTreeObj.getNodeByParam / getNodesByParam / getNodesByParamFuzzy / getNodeByTId 方法,详细请参见 API 文档中的相关内容</li>
        <li><p>搜索试试看:<br/>
            属性值( value ):<input type="text" id="key" value="" class="empty" /><br/>
            属性( key ):<input type="radio" id="name" name="keyType" class="radio first" checked />name (string)<br/>
            <input type="radio" id="level" name="keyType" class="radio" style="margin-left:68px;" />level (number) ... 根节点 level = 0<br/>
            <input type="radio" id="id" name="keyType" class="radio" style="margin-left:68px;" />id (number)<br/>
            方法:<input type="radio" id="getNodeByParam" name="funType" class="radio first" />getNodeByParam<br/>
            <input type="radio" id="getNodesByParam" name="funType" class="radio" style="margin-left:36px;" />getNodesByParam<br/>
            <input type="radio" id="getNodesByParamFuzzy" name="funType" class="radio" style="margin-left:36px;" checked />getNodesByParamFuzzy (only string)<br/>
            <input type="radio" id="getNodesByFilter" name="funType" class="radio" style="margin-left:36px;" />getNodesByFilter (参考本页源码中 function filter)<br/>
          </p>
        </li>
        </ul>
      </li>
      <li class="title"><h2>2、setting 配置信息说明</h2>
        <ul class="list">
        <li>不需要对 setting 进行特殊设置</li>
        </ul>
      </li>
      <li class="title"><h2>3、treeNode 节点数据说明</h2>
        <ul class="list">
        <li class="highlight_red">请注意各个方法使用时保证传入查找的参数类型与设定要查找的属性的类型一致</li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</BODY>
</HTML>

诸如此比就大致的落到实处了歪曲搜索呈现的效用了。

其次个Ztree树结构模糊寻觅达成形式,具体内容如下

全球彩官网下载地址 2

function expand_ztree(treeId){
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    treeObj.expandAll(true);
  }


  function close_ztree(treeId){
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    var nodes = treeObj.transformToArray(treeObj.getNodes());
    var nodeLength = nodes.length;
    for (var i = 0; i < nodeLength; i  ) {
      if (nodes[i].id == '0') {
        //根节点:展开         treeObj.expandNode(nodes[i], true, true, false);
      } else {
        //非根节点:收起         treeObj.expandNode(nodes[i], false, true, false);
      }
    }
  }


  function search_ztree(treeId, searchConditionId){
    searchByFlag_ztree(treeId, searchConditionId, "");
  }


  function searchByFlag_ztree(treeId, searchConditionId, flag){
    //<1>.搜索条件     var searchCondition = $('#'   searchConditionId).val();
    //<2>.得到模糊匹配搜索条件的节点数组集合     var highlightNodes = new Array();
    if (searchCondition != "") {
      var treeObj = $.fn.zTree.getZTreeObj(treeId);
      highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
    }
    //<3>.高亮显示并展示【指定节点s】     highlightAndExpand_ztree(treeId, highlightNodes, flag);
  }


  function highlightAndExpand_ztree(treeId, highlightNodes, flag){
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    //<1>. 先把全部节点更新为普通样式     var treeNodes = treeObj.transformToArray(treeObj.getNodes());
    for (var i = 0; i < treeNodes.length; i  ) {
      treeNodes[i].highlight = false;
      treeObj.updateNode(treeNodes[i]);
    }
    //<2>.收起树, 只展开根节点下的一级节点     close_ztree(treeId);
    //<3>.把指定节点的样式更新为高亮显示,并展开     if (highlightNodes != null) {
      for (var i = 0; i < highlightNodes.length; i  ) {
        if (flag != null && flag != "") {
          if (highlightNodes[i].flag == flag) {
            //高亮显示节点,并展开             highlightNodes[i].highlight = true;
            treeObj.updateNode(highlightNodes[i]);
            //高亮显示节点的父节点的父节点....直到根节点,并展示             var parentNode = highlightNodes[i].getParentNode();
            var parentNodes = getParentNodes_ztree(treeId, parentNode);
            treeObj.expandNode(parentNodes, true, false, true);
            treeObj.expandNode(parentNode, true, false, true);
          }
        } else {
          //高亮显示节点,并展开           highlightNodes[i].highlight = true;
          treeObj.updateNode(highlightNodes[i]);
          //高亮显示节点的父节点的父节点....直到根节点,并展示           var parentNode = highlightNodes[i].getParentNode();
          var parentNodes = getParentNodes_ztree(treeId, parentNode);
          treeObj.expandNode(parentNodes, true, false, true);
          treeObj.expandNode(parentNode, true, false, true);
        }
      }
    }
  }


  function getParentNodes_ztree(treeId, node){
    if (node != null) {
      var treeObj = $.fn.zTree.getZTreeObj(treeId);
      var parentNode = node.getParentNode();
      return getParentNodes_ztree(treeId, parentNode);
    } else {
      return node;
    }
  }


  function setFontCss_ztree(treeId, treeNode) {
    if (treeNode.id == 0) {
      //根节点       return {color:"#333", "font-weight":"bold"};
    } else if (treeNode.isParent == false){
      //叶子节点       return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"};
    } else {
      //父节点       return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
    }
  }

  //==============HTML==============  

class="padd" style="padding-bottom: 0px;">

class="input-append row-fluid" style="margin-bottom: 0px;">
      "search_condition" type="text" placeholder="请输入搜索条件" class="span8" style="font-size:12px"/>
      "button" class="btn btn-info" onclick="search_ztree('dep_tree', 'search_condition')">搜索

"dep_tree" class="ztree">

上述正是jquery ztree达成模糊寻找效果的代码,希望对大家的上学抱有协助。

以上正是本文的全体内容,希望对我们的读书抱有支持,也愿意我们多多援救脚本之家。

全球彩官网下载地址 3

前台代码如下:

var zNodes =[
      {id:1, pId:0, name:"北京"},
      {id:2, pId:0, name:"天津"},
      {id:3, pId:0, name:"上海"},
      {id:6, pId:0, name:"重庆"},
      {id:4, pId:0, name:"河北省", open:true, nocheck:true},
      {id:41, pId:4, name:"石家庄"},
      {id:42, pId:4, name:"保定"},
      {id:43, pId:4, name:"邯郸"},
      {id:44, pId:4, name:"承德"},
      {id:5, pId:0, name:"广东省", open:true, nocheck:true},
      {id:51, pId:5, name:"广州"},
      {id:52, pId:5, name:"深圳"},
      {id:53, pId:5, name:"东莞"},
      {id:54, pId:5, name:"佛山"},
      {id:6, pId:0, name:"福建省", open:true, nocheck:true},
      {id:61, pId:6, name:"福州"},
      {id:62, pId:6, name:"厦门"},
      {id:63, pId:6, name:"泉州"},
      {id:64, pId:6, name:"三明"}
     ];
<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>

像这种类型前台所急需的数码,就从Curry抽取,并打包成了相应的Json。

越来越多关于ztree控件的源委,请参谋专项论题《jQuery插件ztree使用汇总》 。

那边运用简易的数额格式(即轻松的Json格式)类似如下Json:

html:

本文由全球彩票平台发布于全球彩官网下载地址Web前端,转载请注明出处:【全球彩官网下载地址】zTree异步加载,jQuery树控

TAG标签: 全球彩票平台
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。