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

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='width:250px'" />  
</col>

三、Service

Web.xml配置

<resource-ref>
    <description>DBConnection</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);  
  
%>


赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏