• 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);
    
    %>
    



  • 相关阅读:
    数据类型转换:高级向低级转换可能出现的问题和取得不同精度的方法
    Xen Server虚拟机数据恢复的方法和数据恢复过程
    VMware虚拟机误删除vmdk文件后如何恢复?
    MSSQL 2000 错误823恢复
    服务器存储误操作导致数据丢失的恢复过程
    我从业11年来遇到的最奇葩的raid0+1数据恢复经历
    Raid 5数据恢复原理以及raid 5数据恢复实际操作案例
    服务器数据恢复_Linux网站服务器故障数据恢复案例
    Raid5两块硬盘掉线可以恢复数据吗_raid数据恢复案例分享
    V7000存储数据恢复_底层结构原理拆解及Mdisk磁盘掉线数据恢复方法
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3233805.html
Copyright © 2020-2023  润新知