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