jstree实例对弹出框的叙述

最新推荐文章于 2023-10-08 15:26:05 发布

原创最新推荐文章于 2023-10-08 15:26:05 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用jstree插件与artDialog库相结合，实现弹出框中的树形结构选择功能，并将选择结果展示到另一容器内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jstree结合artbox设计的一个弹出框树，

首先引入jquery的库和artbox的库文件

<script type="text/javascript" src="_lib/jquery.js"></script>

<script type="text/javascript" src="jquery.artDialog.source.js?skin=default"></script>

<script type="text/javascript" src="jquery.artDialog.source.js"></script>

编写artbox代码：

$(document).ready(function(){
  $('#prev').click(function(){
		 var oBox = $('#box');	 
    art.dialog({
        title:"欢迎",
      content: document.getElementById('artbox'),
      lock:true,
      button:[{name: '确定', callback: function () {
             });

});
});

在本地创建一个带有序号的li列表树集data.html

然后引入jstree的库文件

<script type="text/javascript" src="jquery.jstree.js"></script>

编写jstree代码利用jstree里面ajax远程载入data.html

$("#jstreebox").jstree({
    "html_data": {
      "ajax": {
        "url":  "js/data.html",
        "data": function (n) {
          return {
            id: n.attr ? n.attr("id") : 0
          };
        }
      }
    },
    "themes": {
      "theme": "default",
      "dots": true,
      "icons": false
    },  
    "plugins": ["themes", "html_data", "ui", "checkbox", ],
    "ui": {
      "initially_select": initSelect
    },
    "core": {
      "initially_open": []
    }
  })

这样弹出框的jstree就已经成功载入到弹出框页面中，接着就是编写怎么把树上面的节点放到另一个容器里面

$(function () {
  //init();
var checkP = $('#checkplace > p');
if(checkP.size() != 0){                             //取第一个checkplace下的p元素的class值并把值赋给数组
  var initSelect = [];
  checkP.each(function(){
    var attrClass = $(this).attr('class');
    var fClass = attrClass.split(' ', 1);
    initSelect.push(fClass);
  });
}
  $("#jstreebox").jstree({
    "html_data": {
      "ajax": {
        "url":  "js/data.html",
        "data": function (n) {
          return {
            id: n.attr ? n.attr("id") : 0
          };
        }
      }
    },
    "themes": {
      "theme": "default",
      "dots": true,
      "icons": false
    },  
    "plugins": ["themes", "html_data", "ui", "checkbox", ],
    "ui": {
      "initially_select": initSelect
    },
    "core": {
      "initially_open": []
    }
  }).bind("loaded.jstree", function(e, data){
  	    var check_p = $("#box > p");
  	    check_p.each(function(){
  	       var cid = $(this).attr('cid');
  	       var node = $("#jstreebox").find('li[id="'+ cid +'"]'); 	  
		   var checked = $('#jstreebox li').children('a');
  	       if(node.size())
  	       {
  	       	   node.children('a').trigger('click');
			   if(node.children('a').is_checked = true )
		      {
			      node.removeClass('jstree-closed').addClass('jstree-open');
			 // $('#jstreebox').jstree('open_node.jstree', node);
		      }
 
  	       } 		   
  	    })
  }).delegate("a", "select_event.jstree", function (e) {
    treeInstance = jQuery.jstree._reference("#jstreebox");
    var n = $.jstree._focused()._get_node(e.currentTarget);
    var p = $.jstree._focused().get_path(e.currentTarget, true);
    var c = $.jstree._focused()._get_children(e.currentTarget);
    var s = $.jstree._focused()._get_childrens(e.currentTarget);
    var isChecked = $.jstree._focused().is_checked(e.currentTarget);
    var flag = treeInstance.get_container().jstree("is_checked", n);
    var id = n[0].id;
    
    var checkplace = $("#checkplace");
	var oBox = $('#box');
	
    /*添加选中*/
    var addP = function (id) {
      var _cid = $('#' + id + '').attr('id');
      checkplace.append('<p class="' + id + '" cid="' + _cid + '" >' + $('#' + id + '').children('a').text() + '<input type="hidden" cid="' + _cid + '" name="location[]" value="' + _cid + '" /><img src=' +  'img/delect.gif class="tomoveimg" classname="tomoveimg"></p>');
    }
    var mousestatus = function () {
      var element_p = $("#checkplace > p"); //选中项的容器element
      var closeimg = $("#checkplace > p > img"); //选中项的删除小图标
      //为选中东西添加鼠标事件
      element_p.bind({
        mouseover: function () {
			//alert('a');
          $(this).addClass('pbg');
        },
        mouseout: function () {
          $(this).removeClass('pbg');
        }
      });

      //去除选中项
      closeimg.bind('click', function (e) {
        var currentclass = $(this).parent().remove().attr('class'); //移除当前节点并获取class
        var firstClass = currentclass.split(' ', 1); //取得第一个class值
        var currentid = $('#jstreebox').find('#' + firstClass + ''); //在tree中找到当前class值对应的节点
        var currentLi = $('#jstreebox').find('#' + firstClass + '').find('li'); //在tree中找到当前class值对应的节点下所有的li
        if (currentLi.length == 0 && p.length == 1) {			
          currentid.removeClass('jstree-checked').addClass('jstree-unchecked');
        } else {
          currentid.removeClass('jstree-checked').addClass('jstree-unchecked');
          currentLi.each(function () {
            $(this).removeClass('jstree-checked').addClass('jstree-unchecked');
          });
          //var cs = currentid.siblings();cs.attr('class').indexOf('jstree-checked') == -1
          var cs = currentid.parent();
          if (cs.find('.jstree-checked').size() == 0) {
            for (i = 0; i < p.length; i++) {
              if ($('#jstreebox #' + p[i] + '').find('.jstree-checked').size() == 0) {
                $('#jstreebox #' + p[i] + '').removeClass('jstree-undetermined').addClass('jstree-unchecked');
              } else {
                $('#jstreebox #' + p[i] + '').removeClass('jstree-checked').addClass('jstree-undetermined');
                var rc = $('#jstreebox #' + p[i] + '').children('.jstree-checked');
                rc.each(function () {
                  var rcid = $(this).attr('id');
                  if ($("#checkplace").find('.' + rcid + '').size() == 0) {
                    addP(rcid);
                  }
                });
              }
            };
          }
        }
      });
    }
    /**
     *判断选中状态
    */
    var l_current_id = $('#' + n[0].id + ''); //获取到当前点击节点
    var parent_id = l_current_id.parent(); //获取当前点击节点的父节点
    var parent_li = l_current_id.parent().parent();
	//alert(parent_li)
    /*var _cid = l_current_id.attr('cid');//获取当前选择的cid属性值
				var _s_v = $("#s_v").attr("value")//申明变量存储选中的cid*/
    if (flag == true) {
      //若没选中就不在右边的容器添加的内容&&  parent_li.attr('tagName') == 'LI'
      addP(id);
      l_current_id.find('.jstree-checked').each(function () {
        checkplace.find("p." + $(this).attr('id') + "").remove();
      });
      mousestatus();
      var self = this;
      if (l_current_id.siblings().size() != 0 && parent_li.attr('tagName') == 'LI') {
        if (parent_id.find('.jstree-unchecked').size() != 0) {
          return false;
        } else {
          parent_id.find('.jstree-checked').each(function () {
            checkplace.find("p." + $(this).attr('id') + "").remove();
          });
          parent_id_val = parent_id.parent().attr('id');
          addP(parent_id_val);
          mousestatus();
        }
      }
    } else {
      checkplace.find("p." + id + "").remove(); //-对-的移除选中
      /**
       *当前节点存在兄弟节点
       */
      if (l_current_id.siblings().size() != 0) {
        /**
         *当前节点的兄弟节点中全部不选中	
         */
        if (parent_id.find('.jstree-checked').size() == 0) {
          checkplace.find("p." + parent_id.parent().attr('id') + "").remove(); //移除右边容器中与当前上级节点对应的项
          parent_id.find('.jstree-unchecked').each(function (index) {
            checkplace.find("p." + parent_id.attr('id') + "").remove();
          }); //循环遍历移除右边中所有与当前节点、兄弟及子节点
          l_current_id.find('.jstree-checked').each(function () {
            checkplace.find("p." + $(this).attr('id') + "").remove();
          });
        } else {
          checkplace.find("p." + parent_li.attr('id') + "").remove();
          for (i = 0; i < p.length; i++) {
            var siblings_parent = $('#jstreebox #' + p[i] + '').parent();
            checkplace.find("p." + p[i] + "").remove();
            siblings_parent.children('.jstree-checked').each(function () {
              if (checkplace.find('.' + $(this).attr('id') + '').size() == 0) {
                addP($(this).attr('id'));
                mousestatus();
              }
            });
            var parent_li2 = siblings_parent.parent();
            parent_li2.parent().children('.jstree-checked').each(function () {
              if (checkplace.find('.' + $(this).attr('id') + '').size() == 0) {
                addP($(this).attr('id'));
                mousestatus();
              }
            });
          };
        }
      }
    }
  });
});

然后点击确定按钮把另一个容器中的节点复制到搜索页面中

$(document).ready(function(){
  $('#prev').click(function(){
		 var oBox = $('#box');	 
    art.dialog({
        title:"欢迎",
      content: document.getElementById('artbox'),
      lock:true,
      button:[{name: '确定', callback: function () {

               var checkplace = $('#checkplace');
			  //alert(checkplace.html());
			  oBox.empty();
			  oBox.append(checkplace.clone(true).children());//把checkplace下所有子节点复制到box容器中
			  //oBox.append(checkplace.html());
		      var check_p = $('#box > p');
			  var closeImg = $("#box > p > img");
			  var element_p = $("#checkplace > p"); 
			  var closeimg = $("#checkplace > p > img"); //选中项的删除小图标
			  closeImg.unbind('click');
			   check_p.bind({
					mouseover: function () {
						//alert('a');
					  $(this).addClass('pbg');
					},
					mouseout: function () {
					  $(this).removeClass('pbg');
					}
				  });
			   closeImg.bind('click', function () {
			   	  cid = $(this).parent().attr('cid');
			   	  $('#artbox #checkplace').find('p[cid="' + cid + '"]').find('img.tomoveimg').trigger('click');//找到artbox里面checkplace与页面上box里面想匹配的cid并找到删除小图标给删除按钮响应click事件
			   	  $(this).parent().remove();
			   })
		 }}, {name: '取消'}],
	  close : function(){
		     var closeimg = $("#checkplace > p > img");
			 var element_p = $("#checkplace > p");	
			 closeimg.bind('click', function () {
				cid = $(this).parent().attr('cid');
			     $('#box').find('p[cid="' + cid + '"]').find('img.tomoveimg').trigger('click');	//找到box下匹配的cid 并响应artbox的click事件		
				 $(this).parent().remove();
				 });   
		 }
	  
	    });

}); });});