jstree实例对弹出框的叙述

来源：互联网发布：mac上chrome flash 编辑：程序博客网时间：2024/05/28 09:31

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

}); });});
	
					
					   jstree实例对弹出框的叙述
	  	   关于DELPHI 弹出提示框信息的叙述
	  	   关于DELPHI 弹出提示框信息的叙述
	  	   jstree实例
	  	   一个网络工程师对"高薪"的叙述
	  	   jstree 实例一
	  	   jstree  实例二
	  	   jstree 完整实例
	  	   jstree 创建实例注意事项
	  	   BIEE叙述图导航实例
	  	   BIEE叙述图导航实例
	  	   DUMP文件的叙述
	  	   叙述最近的学习心得
	  	   Web开发使用jsTree实例
	  	   叙述
	  	   叙述
	  	   Android弹出多选框下拉框的实例
	  	   Android弹出多选框下拉框的实例
	     		  
	  	   unity3d格式的导出与加载
	  	   oracle主键自增长
	  	   UIDatePicker 日期/时间选取器(滚轮)—IOS开发
	  	   Git乱码配置
	  	   MySQL索引的查看创建和删除
	  	   jstree实例对弹出框的叙述
	  	   session
	  	   linux下递归删除某个文件夹或文件
	  	   应用程序挂起、复原与终止— IOS开发
	  	   字符编码详解及由来(UNICODE,UTF-8,GBK)
	  	   MrleeProtect游戏保护
	  	   MySQL索引分析和优化
	  	   UIActivityIndicatorView、UIProgressView 活动与进度指示器 （实例）
	  	   测试linux网络和磁盘IO脚本