Jquery UI 组合树

Jquery UI 1.3 (组合树 - ComboTree ) 集成Wabacus4.1 集成Spring 代码剖析

使用时，请下载需要Jquery ui包进行配置

combotree.js 的代码，可以不用修改, 只是Wabacus中的编辑少量配置一下即可，此例子只进行了2级的菜单拼接，如需修改，只需将方法修改成递归拼接即可

如：

 首先combotree.js代码

 var dataurl,valuefield,textfield;

 /**
  * 加载树形下拉框
  */
function loadComboTree(){	
	 dataurl = $('input.easyui-combotree').attr("dataurl");
	 valuefield = $('input.easyui-combotree').attr("valuefield");
	 textfield = $('input.easyui-combotree').attr("textfield");
	 //alert(dataurl);
	 $('input.easyui-combotree').combotree({  
           url:dataurl,   //data : json,  
           valueField : valuefield, 
           textField : textfield,
           editable: false,		//定义用户是否可以直接输入文本到选择框默认false
           animate:true,	//展开/折叠节点的时候是否显示效果
           onClick : function(node) {
        	   //alert(node.id+"___"+node.text);
               $('input.easyui-combotree').val(node.id); // 赋值
           },
           onSelect : function(node) {
        	   //返回树对象
        	   var tree = $(this).tree;
        	   //选中的节点是否为叶子节点,如果不是叶子节点,清除选中
        	   var isLeaf = tree('isLeaf', node.target);
        	   if (!isLeaf) {
        		   //清除选中
        		   $('input.easyui-combotree').combotree('clear');
        	   }
        	},
        	onLoadSuccess: function(node, data) {
        		var id =  $('input.easyui-combotree').val();
        		var v_t = $('input.easyui-combotree').combotree('tree');
            	if(id == null || id == 'undefined' || id.trim() == '')  return;
            	//alert(id);
            	var t = v_t.tree('find',id);	// 查找，并选中当前
            	if(t != null && t!=""){
            		v_t.tree('select', t.target);	
            	}
        	},
            onLoadError: function(){
                $(this).append("<li>出错页面</li>");
            }
     });       
}

一 page和report

<page id="edit_plansolution" js="/myproject/jqueryui/js/jquery-1.10.1.min.js,/myproject/jqueryui/js/jquery.easyui.min.js,/myproject/jqueryui/js/combotree.js"
	  css="/myproject/jqueryui/css/easyui.css,/myproject/jqueryui/css/icon.css" >
     <report id="edit_detail"  title="测试" onload="loadComboTree">

二、编辑列

<col column="eventype" label="事故类型：">
	 <inputbox jsvalidate="isNotEmpty(#label#列不能为空)" styleproperty="class='easyui-combotree' dataurl='SelectTree.jsp' valuefield='id' textfield='text' style='250px'" />
</col>

三、Service

Web.xml配置

   <resource-ref>

     <description>DB Connection</description>

     <res-ref-name>jdbc/naframework</res-ref-name>

     <res-type>javax.sql.DataSource</res-type>

     <res-auth>Container</res-auth>

   </resource-ref>

 

Spring配置

<?xml version="1.0"encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans-2.5.xsd"
       default-lazy-init="true">
     
    <!-- 数据源配置,在生产环境使用应用服务器的数据库连接池 -->
    <bean id="springDSN"class="org.springframework.jndi.JndiObjectFactoryBean">      
        <property name="jndiName"value="java:comp/env/jdbc/naframework"/>      
    </bean>  
 
 
    <bean id="jdbcTemplate"class="org.springframework.jdbc.core.JdbcTemplate"abstract="false" lazy-init="false"autowire="default"dependency-check="default">
        <property name="dataSource">
            <ref bean="springDSN"/>
        </property>
    </bean>
     
 
    <!-- 事务管理器配置,单数据源事务 -->
    <bean id="transactionManager"class="org.springframework.orm.hibernate3.HibernateTransactionManager">
        <property name="sessionFactory"ref="sessionFactory"/>
    </bean>
</beans>

JAVA配置

privateJdbcTemplate jdbcT = (JdbcTemplate) SpringUtil.getBean("jdbcTemplate");
 
 
 /**
     * 拼接成json类型  事故类型  
     * @author 刘仁奎
     * @return
     */
    publicString getJSONData(){
        // 查询一级节点
        String sql="select * from category where categorytype='accidclass' and categorylevel='1' order by categorycode";
        List list=jdbcT.queryForList(sql);
        StringBuffer json=newStringBuffer("[");
        String data="",d_2="";
        if(list!=null&& list.size()>0){
            for(inti=0; i<list.size();i++){
                Map v_map = (Map)list.get(i);
                json.append("{"id":""+v_map.get("CATEGORYCODE").toString().trim()+"",");
                json.append(""text":""+v_map.get("CATEGORYNAME").toString().trim()+""");
                if(v_map.get("CATEGORYLEVEL") != null&& v_map.get("CATEGORYLEVEL").toString().trim().equals("1")){// 判断是否是父节点，赋图标
                    // 拼接2级子节点
                    String sql_2="select * from category where categorytype='accidclass' and categorylevel='2' and parentcode='"+v_map.get("CATEGORYCODE")+"' order by categorycode";
                    List v_l=jdbcT.queryForList(sql_2);
                    if(v_l.size()>0){
                        json.append(","children":");
                        //System.out.println("********************"+sql_2+"***********************");
                        StringBuffer child_json=newStringBuffer("[");
                        for(intj=0; j<v_l.size();j++){
                            Map v_m = (Map) v_l.get(j);
                            child_json.append("{"id":""+v_m.get("CATEGORYCODE").toString().trim()+"",");
                            child_json.append(""text":""+v_m.get("CATEGORYNAME").toString().trim()+""},");
                            //System.out.println("_____子节点：_"+v_m.get("CATEGORYCODE")+"__"+v_m.get("CATEGORYNAME")+"___________");
                        }
                        if(child_json.lastIndexOf(",") != -1){
                            d_2 = child_json.substring(0,child_json.lastIndexOf(","))+"]},";
                            json.append(d_2);
                        }
                    }else{ // 如果没有子节点
                        json.append("},");
                    }
                }
            }
        }
        data=json.substring(0, json.length()-1)+"]";
        System.out.println(data);
        returndata;
    }

我这里的Servlet使用了jsp代替

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page import="com.nasoft.jdbc.sysmanager.CategoryDao" %> 
<%
	/**
	 * 应急预案，事故类型下拉框树
	 */
	CategoryDao std = new CategoryDao();

	//String json = std.getJSONData();

	//  String json="[{"id":1,"text":"Folder1","iconCls":"icon-ok","children":[{"id":2,"text":"File1"},{"id":3,"text":"Folder2","state":"open","children":[{"id":4,"text":"File3","iconCls":"icon-reload"}]}]},{"text":"Languages","state":"closed","children":[{"id":"j1","text":"Java"},{"id":"j2","text":"C#"}]}]";
	//System.out.println(json);
	out.print(json);

%>