日期:2014-05-16 浏览次数:20354 次
在学习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 实现树形结构”.