界面滑动+ztree

 链接：http://pan.baidu.com/s/1dE2DfH3 密码：iy2i

参考：http://blog.csdn.net/cuiran/article/details/7659094

jsp：放在body内

<div id = "floatWin" class="floatWin">
	       <div id = "floatName" class="floatName">
		   		<span class="floatTitle">设备选择</span>
		   </div>
	       <div id = "floatNodes" class="floatNodes">
		       			<ul id="nodes" class="ztree"></ul>
		   </div>			
</div>

css：

/**节点树*/
.floatWin {
	 22px;
	height: 250px;
	z-index: 999;
	position: absolute;
	right: 0;
	top: 30px;
	display: block;
}

.floatName {
	padding-top: 14px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	background-color: #2C63B3;
	margin-top: 35px;
	cursor: pointer;
	 22px;
	height: 75px;
	display: block;
	overflow: hidden;
	float: left;
	text-align: center;
	font-size: 14px;
	color: #FFF;
}

.floatTitle {
	font-size: 14px;
	font-weight: bold;
}

.floatNodes {
	 0px;
	height: 250px;
	float: left;
	background-color: #C9E7FC;
}

ul.ztree {
	border: 1px solid #3378c2;
	border-right-color: #b5cfea;
	background: #DBECFC;
	 228px;
	height: 237px;
	overflow-y: auto;
	overflow-x: auto;
}

js：

$(document).ready(function() {
	$("#floatName").click(function(){
		var winWidth = jQuery("#floatWin").width();
		if(winWidth==262){
			var floatNodes = jQuery("#floatNodes").width();
			jQuery("#floatWin").animate({winWidth-240},1000,function(){});
			jQuery("#floatNodes").animate({floatNodes-240},1000,function(){});
		}
		if(winWidth==22){
			var floatNodes = jQuery("#floatNodes").width();
			jQuery("#floatWin").animate({winWidth+240},1000,function(){});
			jQuery("#floatNodes").animate({floatNodes+240},1000,function(){});
		}
	});
	var setting = {
			check: {
				enable: true,
				chkStyle: "checkbox",
				chkboxType: { "Y" : "ps", "N" : "ps" },
				chkDisabledInherit: true
			},
			data: {
				simpleData: {
					enable: true
				},
				key: {
	                title: "title"
	            },
			}
	};
	/* var zNodes =[
		{ id:1, pId:0, name:"随意勾选 1", open:true},
		{ id:11, pId:1, name:"随意勾选 1-1", open:true},
	]; */
	vwf.ajax({
        url:"/nodemanage/showNodeTree.action",
        data:"",
        success:function(msg){
        	var nodes = msg.nodes;
        	$.fn.zTree.init($("#nodes"), setting, nodes);
        }
    });
	
});
function getSelectNodes(){
	var treeObj = $.fn.zTree.getZTreeObj("nodes");
	var nodes = treeObj.getCheckedNodes(true);
	console.log("nodeLength:"+nodes.length);
	var ids = "";
    for(var i=0;i<nodes.length;i++){
    console.log(nodes[i].id+":"+nodes[i].name+":"+nodes[i].pId); //获取选中节点的值
    if(nodes[i].id!="root"){
    	ids+=nodes[i].id+",";
    }
    }
    ids = ids.trim().substring(0, ids.length-1); 
    console.log("ids:"+ids);
}

treeNode.java

public class TreeNode {
	private String id;  
    private String pId; 
    private String title;
    private String name;  
    private Boolean checked;
    private Boolean chkDisabled;
    private Boolean open;
    public TreeNode() {
	}
}

设置圆角div：

border-top-left-radius: 10px;
border-bottom-left-radius: 10px;