日期:2014-05-16  浏览次数:20354 次

jstree实现checkbox的多选和单选

在学习jstree1.0的时候,学习实现checkbox的默认选中情况,其实在“plugins”中添加“checkbox”组件,就可以自动实现checkbox,若要实现默认选中,则需要在loaded.jstree时传入需要选中的id值,然后使用“$("#modeltree").jstree("check_node",$(this));”就看实现。代码如下:

?

checkbox默认选中

<script type="text/javascript">
	 	var obj = window.dialogArguments;//获取传递的参数
	 	$(function(){
	 		 //$.ajaxSetup({cache:false});//ajax调用不使用缓存
			  $("#modeltree").bind("loaded.jstree",function(e,data){//树形加载前判断哪个节点被选中
				  $("#modeltree").jstree("open_all");
				  $("#modeltree").find("li").each(function(){
					  if($(this).attr("id") == obj.nodeid){
						  //$("#modeltree").jstree("check_node",$(this));//jstree默认方法,如果默认的是父节点,那么子节点也会被选中
						  //自定义check_node方法
						  $("#modeltree").jstree("check_node",function(){
							  alert($("#"+obj.nodeid).attr("class"));
							  $("#"+obj.nodeid).removeClass("jstree-unchecked jstree-undetermined").addClass("jstree-checked");
						  });
					  }
				  });
			  }).jstree({
				"json_data": {
					"ajax" : {
						"async" : false,//设置是否异步,此处设置为同步
						"url" : "tree_data.jsp",
						"data" : function(n){//传递参数
							return{
								"id" : n.attr ? n.attr("id") : 0
							}
			  			}
			  		}
			  	},
			  	"plugins" : ["themes","json_data","checkbox","ui"]
			  }).bind("click.jstree",function(event){
				  var eventNodeName = event.target.nodeName;
				  
			  })
			  ;
			  //var obj = document.getElementById("modeltree");
			  //alert(obj.innerHTML);
			  //将内容复制到剪贴板中
			  //window.clipboardData.setData("Text", obj.innerHTML);
		});

?上面代码就可以实现checkbox默认选中的情况。

存在一个问题就是:

若使用“$("#modeltree").jstree("check_node",$(this));”让jstree来默认选中的时候,如果传入的是父节点的值,那么此父节点下的所有子节点都会被选中;传入的子节点,那么父节点会被半选中。

值得一提的是,此处jstree并不是使用<input type="checkbox">来实现checkbox,而是使用图片,通过不同的class来控制此图片的绝对定位来实现checkbox是否选中的效果。

若使用自己定义的check_node方法,可以实现单选的效果,但是在ie中有点问题,在firefox和chrome中都可以看到效果。(期待高手帮忙解决)

具体代码,参照“jstree v1.0 实现树形结构”.