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>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); %>
Jquery UI 组合树 - ComboTree 集成Wabacus4.1 代码剖析的更多相关文章
- 表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树
EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...
- jQuery UI Datepicker&Datetimepicker添加 时-分-秒 并且,判断
jQuery UI Datepicker时间(年-月-日) 相关代码: <input type="text" value="" name="ad ...
- combotree(组合树)的使用
一.前言: 组合树(combotree)把选择控件和下拉树结合起来.它与组合框(combobox)相似,不同的是把列表替换成树组件.组合树(combotree)支持带有用于多选的树状态复选框的树. 二 ...
- EasyUI组合树插件
一.引用CSS和JS <link href="~js/easyui/easyui.css" rel="stylesheet" type="tex ...
- 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件(share)
官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...
- 第四十四课:jQuery UI和jQuery easy UI
jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.4.Tabs控件
之前,我们已经介绍了 jQuery UI 库,CSS 框架.下面,我们将学习这些有增强可视化效果,高度可配置的用户交互组件. Tab 的特性是,点击 tab 后,会高亮该 tab,并显示他的关联con ...
- jQuery UI框架
jQuery UI框架 1.oschina开源社区-jQuery教程 2.jQuery PrimeUI(推荐) 3.弹出框.警告框.提示框.拖动支持.位置固定.选项卡切换 4.Bootstrap框架( ...
随机推荐
- BZOJ 3992 [SDOI 2015] 序列统计 解题报告
这个题最暴力的搞法就是这样的: 设 $Dp[i][j]$ 为前 $i$ 个数乘积为 $j$ 的方案数. 转移的话就不多说了哈... 当前复杂度 $O(nm^2)$ 注意到,$M$ 是个质数,就说明 $ ...
- php截取小时和分钟,在进行和其它时间段的比较
用php截取时间的小时和分钟,然后判断这个时间是不是在 8:00到11:30之间,用php应该怎么写? date_default_timezone_set("Asia/Shanghai&qu ...
- simplemodal — jquery弹出窗体插件
方式一:使用jquery-1.7.1.min.js(1.9.1的版本我试过了,不行) + jquery_modal.js的方式 文件: testModel.css: /* Overlay ...
- 145. Binary Tree Postorder Traversal
题目: Given a binary tree, return the postorder traversal of its nodes' values. For example:Given bina ...
- 一个Redis实现的分布式锁
import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.data.redis.conne ...
- C#程序中访问配置文件
在C#编程中,有时候会用到配置文件,那么该如何在程序中获取或修改配置文件中的相关数据呢?下面采用一个简单的C#控制台程序来说明. 新建一个C#控制台程序,打开“解决方案资源管理器”,如下图: 可以看到 ...
- js模拟Map对象,实现key---value
js模拟Map对象,实现key---value 根据java中map的属性,实现key----value保存 function Map() { var struct = function (key, ...
- [NYOJ 43] 24 Point game
24 Point game 时间限制:3000 ms | 内存限制:65535 KB 难度:5 描述 There is a game which is called 24 Point game ...
- ThreadLocal实现方式&使用介绍---无锁化线程封闭
虽然现在可以说很多程序员会用ThreadLocal,但是我相信大多数程序员还不知道ThreadLocal,而使用ThreadLocal的程序员大多只是知道其然而不知其所以然,因此,使用ThreadLo ...
- Nginx、SSL双向认证、PHP、SOAP、Webservice、https
本文是1:1模式,N:1模式请参见新的一篇博客<SSL双向认证(高清版)> ----------------------------------------------------- 我是 ...