jQuery zTree插件
jsp页面:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <script type="text/javascript" src="tree/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="tree/js/jquery.ztree.core.js"></script> <script type="text/javascript" src="tree/js/jquery.ztree.excheck.js"></script> <script type="text/javascript" src="tree/js/jquery.ztree.exedit.js"></script> <link rel="stylesheet" href="tree/css/zTreeStyle/zTreeStyle.css" type="text/css"> </head> <body> <div> <ul id="treeDemo" class="ztree"></ul> </div> </body> </html> <script type="text/javascript"> /** * 页面初始化 */ $(document).ready(function(){ onLoadZTree(); }); var zTree; var setting = { view: { dblClickExpand: false,//双击节点时，是否自动展开父节点的标识 showLine: true,//是否显示节点之间的连线 fontCss:{'color':'black','font-weight':'bold'},//字体样式函数 selectedMulti: false //设置是否允许同时选中多个节点 }, check:{ //chkboxType: { "Y": "ps", "N": "ps" }, chkStyle: "checkbox",//复选框类型 enable: false //每个节点上是否显示 CheckBox }, data: { simpleData: { enable:true, idKey: "organid", pIdKey: "parentid", rootPId: 0 }, key:{ name : "dzzmc", title : "dzzmc" } }, callback: { beforeClick: function(treeId, treeNode) { zTree = $.fn.zTree.getZTreeObj("treeDemo"); if (treeNode.isParent) { zTree.expandNode(treeNode);//如果是父节点，则展开该节点 }else{ zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选，再次单击取消勾选 } }, onClick : zTreeOnClick } }; /* var zNodes =[ { id:1, pId:0, name:"test 1", open:false}, { id:11, pId:1, name:"test 1-1", open:true}, { id:111, pId:11, name:"test 1-1-1"}, { id:112, pId:11, name:"test 1-1-2"}, { id:12, pId:1, name:"test 1-2", open:true}, ]; $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); */ function zTreeOnClick(t,treeId,treeNode){ //节点的id,name alert(treeNode.organid + "," + treeNode.dzzmc); } function onCheck(e,treeId,treeNode){ var treeObj=$.fn.zTree.getZTreeObj("treeDemo"), nodes=treeObj.getCheckedNodes(true), v=""; for(var i=0;i<nodes.length;i++){ v+=nodes[i].name + ","; alert(nodes[i].id); //获取选中节点的值 } } //动态获取 /** * 加载树形结构数据 */ function onLoadZTree(){ var treeNodes; $.ajax({ async:false,//是否异步 cache:false,//是否使用缓存 type:'post',//请求方式：post dataType:'json',//数据传输格式：json url:'getTreeDemo.action',//请求的action路径 error:function(){ //请求失败处理函数 alert('请求失败！'); }, success:function(data){ //请求成功后处理函数 treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes } }); var t = $("#treeDemo"); t = $.fn.zTree.init(t, setting, treeNodes); } </script>
后台action代码
package cn.csservice.cssdj.dy.action.dychange; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import org.springframework.beans.factory.annotation.Autowired; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArray; import com.opensymphony.xwork.Action; import cn.csservice.cssdj.common.utils.Ajax; import cn.csservice.cssdj.common.utils.Constants; import cn.csservice.cssdj.common.utils.Messages; import cn.csservice.cssdj.common.utils.StringHelper; import cn.csservice.cssdj.core.DictionaryConstant; import cn.csservice.cssdj.core.action.UserAction; import cn.csservice.cssdj.entity.DictItemDTO; import cn.csservice.cssdj.entity.TreeNode; import cn.csservice.cssdj.entity.dy.DZZInfo; import cn.csservice.cssdj.service.UtilServiceOrgan; import cn.csservice.cssdj.service.cache.DictCacheService; import cn.cssservice.cssdj.service.dychange.DyChangeInfoSimpleService; /** * @author * @date 下午4:49:19 */ public class DirDzzInfo extends UserAction { private static final long serialVersionUID = 1L; private Integer type; @Autowired private DyChangeInfoSimpleService dyChangeInfoSimpleService; public DirDzzInfo() { } @Override protected String userGo() { List<DZZInfo> list = dyChangeInfoSimpleService.dirDzz(); result = JSON.toJSONString(list); /*result = Ajax.JSONResult(0, Messages.getString("systemMsg.success"), dyChangeInfoSimpleService.toJsonArrayDzz(list));*/ return Action.SUCCESS; } }
详细文档链接和插件下载地址 : http://www.treejs.cn/v3/api.php
具体后台sql详解地址(oracle) : http://www.cnblogs.com/colder/p/4838574.html
