网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 jquery zTree异步加载、模糊搜索简单实例分享
内容
    本文实例为大家讲解了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>
     <ul id="tree">
     </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异步加载、模糊搜索简单实例讲解，希望对大家的学习有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/18 16:42:25