Jquery ComboTree树的绑定-数据源JSON格式-操作

转载 2016年11月29日 11:45:05

(转载)http://blog.csdn.net/nupt123456789/article/details/12715155

前言

ComboTree也是表单中一种常见组件,如:有些输入框,限定只能选取一些特征的数据,而且这些数据时需要动态从数据库中读取的。我这里就演示一下这个过程(数据库就不涉及了,后台能产生Combotree所需的Json格式数据就行了)。以下是我写的一个Demo。前台的操作有:1.绑定树的url,设置是否多选 2.获取用户所选的值 3.设置特定的值 4.Disable和Enable

页面(index.jsp)

[html] view plain copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3.     String path = request.getContextPath();  
  4.     String basePath = request.getScheme() + "://"  
  5.             + request.getServerName() + ":" + request.getServerPort()  
  6.             + path + "/";  
  7. %>  
  8. <!DOCTYPE html>  
  9. <html>  
  10. <head>  
  11.     <title>ComboTree Actions - jQuery EasyUI Demo</title>  
  12.     <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">  
  13.     <link rel="stylesheet" type="text/css" href="js/themes/icon.css">  
  14.     <link rel="stylesheet" type="text/css" href="js/demo/demo.css">  
  15.     <script type="text/javascript" src="js/jquery.min.js"></script>  
  16.     <script type="text/javascript" src="js/jquery.easyui.min.js"></script>  
  17.     <script type="text/javascript">  
  18.        $(function(){  
  19.            $("#cc").combotree({  
  20.                url:'getTreeData',//Action,获取树的信息  
  21.                multiple:true//设置是否多选  
  22.            });  
  23.         });  
  24.     </script>  
  25. </head>  
  26. <body>  
  27.     <h2>ComboTree Actions</h2>  
  28.     <div class="demo-info">  
  29.         <div class="demo-tip icon-tip"></div>  
  30.         <div>Click the buttons below to perform actions</div>  
  31.     </div>  
  32.     <div style="margin:10px 0">  
  33.         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a>  
  34.         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">SetValue</a>  
  35.         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">Disable</a>  
  36.         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">Enable</a>  
  37.     </div>  
  38.     <input id="cc" class="easyui-combotree"  style="width:200px;">  
  39.     <script type="text/javascript">  
  40.         function getValue(){  
  41.             var val = $('#cc').combotree('getValue');  
  42.             var text = $('#cc').combotree('getText');  
  43.             alert("val="+val+",text="+text);  
  44.         }  
  45.         function setValue(){  
  46.             $('#cc').combotree('setValue', '这是设定的值');  
  47.         }  
  48.         function disable(){  
  49.             $('#cc').combotree('disable');  
  50.         }  
  51.         function enable(){  
  52.             $('#cc').combotree('enable');  
  53.         }  
  54.     </script>  
  55.   
  56. </body>  
  57. </html>  

2.ComboTree的数据源类

[java] view plain copy
  1. /* 
  2.  * $filename: ComboTreeModel.java,v $ 
  3.  * $Date: 2013-10-14  $ 
  4.  * Copyright (C) ZhengHaibo, Inc. All rights reserved. 
  5.  * This software is Made by Zhenghaibo. 
  6.  */  
  7. package edu.njupt.zhb.model;  
  8.   
  9. import java.util.List;  
  10.   
  11. /* 
  12.  *@author: ZhengHaibo   
  13.  *web:     http://blog.csdn.net/nuptboyzhb 
  14.  *mail:    zhb931706659@126.com 
  15.  *2013-10-14  Nanjing,njupt,China 
  16.  */  
  17. public class ComboTreeModel {  
  18.     private int id;  
  19.     private String text;  
  20.     private List<ComboTreeModel> children;  
  21.     public int getId() {  
  22.         return id;  
  23.     }  
  24.     public void setId(int id) {  
  25.         this.id = id;  
  26.     }  
  27.     public String getText() {  
  28.         return text;  
  29.     }  
  30.     public void setText(String text) {  
  31.         this.text = text;  
  32.     }  
  33.     public List<ComboTreeModel> getChildren() {  
  34.         return children;  
  35.     }  
  36.     public void setChildren(List<ComboTreeModel> children) {  
  37.         this.children = children;  
  38.     }  
  39. }  

3.Action类

[java] view plain copy
  1. /* 
  2.  * $filename: ZTreeDemoAction.java,v $ 
  3.  * $Date: Sep 27, 2013  $ 
  4.  * Copyright (C) ZhengHaibo, Inc. All rights reserved. 
  5.  * This software is Made by Zhenghaibo. 
  6.  */  
  7. package edu.njupt.zhb.action;  
  8.   
  9. import java.io.IOException;  
  10. import java.io.PrintWriter;  
  11. import java.util.ArrayList;  
  12. import java.util.List;  
  13.   
  14. import javax.servlet.http.HttpServletResponse;  
  15. import org.apache.struts2.ServletActionContext;  
  16. import com.opensymphony.xwork2.ActionSupport;  
  17.   
  18. import edu.njupt.zhb.model.ComboTreeModel;  
  19. import net.sf.json.JSONArray;  
  20.   
  21. /* 
  22.  *@author: ZhengHaibo   
  23.  *web:     http://blog.csdn.net/nuptboyzhb 
  24.  *mail:    zhb931706659@126.com 
  25.  *Sep 27, 2013  Nanjing,njupt,China 
  26.  */  
  27. public class CombotreeDemoAction extends ActionSupport {  
  28.     /** 
  29.      *  
  30.      */  
  31.     private static final long serialVersionUID = -3318989776253565435L;  
  32.     /** 
  33.      * 模拟从数据库读取数据 
  34.      *  
  35.      * @return 
  36.      */  
  37.     public void getTreeData(){  
  38.         List<ComboTreeModel> list = new ArrayList<ComboTreeModel>();  
  39.         for(int i = 1;i<10;i++){  
  40.             ComboTreeModel ctm = new ComboTreeModel();  
  41.             ctm.setId(i);  
  42.             ctm.setText("树节点"+i);  
  43.             if(i == 2){  
  44.                 List<ComboTreeModel> children = new ArrayList<ComboTreeModel>();  
  45.                 for (int j = 1; j < 6; j++) {  
  46.                     ComboTreeModel comboTreeModel = new ComboTreeModel();  
  47.                     comboTreeModel.setId(j);  
  48.                     comboTreeModel.setText("子节点"+i+j);  
  49.                     children.add(comboTreeModel);  
  50.                 }  
  51.                 ctm.setChildren(children);  
  52.             }  
  53.             list.add(ctm);  
  54.         }  
  55.         System.out.println("----json--");  
  56.         String json = JSONArray.fromObject(list).toString();//转化为JSON  
  57.         getPrintWriter().write(json);//返回前台  
  58.     }  
  59.     /** 
  60.      * 获得HttpServletResponse对象 
  61.      *  
  62.      * @return 
  63.      */  
  64.     public static HttpServletResponse getResponse() {  
  65.         HttpServletResponse response = ServletActionContext.getResponse();  
  66.         response.setContentType("text/html;charset=UTF-8");  
  67.         return response;  
  68.     }  
  69.   
  70.     public PrintWriter getPrintWriter() {  
  71.         PrintWriter pw = null;  
  72.         try {  
  73.             pw = getResponse().getWriter();  
  74.         } catch (IOException e) {  
  75.             e.printStackTrace();  
  76.         }  
  77.         return pw;  
  78.     }  
  79.   
  80. }  

4.struts2的配置

[html] view plain copy
  1. <!DOCTYPE struts PUBLIC  
  2. "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"  
  3. "http://struts.apache.org/dtds/struts-2.0.dtd">  
  4.   
  5.   
  6. <struts>  
  7.     <constant name="struts.server.static.browserCache" value="false" />  
  8.     <constant name="struts.ui.theme" value="simple" />  
  9.     <constant name="struts.devMode" value="true" />  
  10.     <constant name="struts.i18n.encoding" value="UTF-8" />  
  11.     <constant name="struts.configuration.xml.reload" value="true" />  
  12.     <package name="zhenghaiboTest" extends="struts-default">  
  13.         <action name="getTreeData" class="edu.njupt.zhb.action.CombotreeDemoAction" method="getTreeData">  
  14.         </action>  
  15.     </package>  
  16. </struts>  

5.效果

1.点击组件,树的加载效果


2.获取组件的值


3.设定值,Disable和Enable功能亦可

项目完整源代码:http://download.csdn.net/detail/nuptboyzhb/6398741

未经允许不得用户商业目的


easyui 下拉选择树(ComboTree) 的实现

很多时候都会用到下拉框, 有时候为了显示更好的效果, 会用到树型下拉框, 实际就是下拉框中带了一个树型的控件, 所以它自然继承自tree和combobox. 一: 前台: 1. 首先从前台来讲, ...
  • u011650291
  • u011650291
  • 2016-09-04 19:50:56
  • 14633

easyui combotree基本使用

easyui combo tree基本使用 首先是界面上的代码: 然后是js代码: $('#mytreecombo').combotree({ dat...
  • wild46cat
  • wild46cat
  • 2016-10-18 21:53:52
  • 2459

jquery easyui combotree取值

1,直接获取:      单选:$("#id").combotree("getValue")      多选:$("#id").combotree("getValues")      注意:如果val...
  • u014401141
  • u014401141
  • 2016-12-24 13:42:05
  • 2970

esayui的combotree属性值

今天试了半天 combotree的属性发现valueField 和textField 竟然是死的,必须是id和text,导致穿过来的json字符串 必须是id和text, 导致后台要重新遍历和修改,一...
  • zsw12013
  • zsw12013
  • 2016-05-27 11:15:13
  • 1253

combotree

这里的url返回的也是json数组 [javascript] view plaincopyprint? $('#inputcategoryId').combotree('getValues')//获取...
  • china165
  • china165
  • 2014-12-15 16:33:07
  • 414

EasyUi combotree 使用总结

EasyUi combotree 使用总结[TOC] - combotree加载方法 - combotree的复选方法 - 参考一、combotree加载方法1、直接加载 ...
  • happy_Pinocchio
  • happy_Pinocchio
  • 2016-01-15 14:09:49
  • 5059

【EasyUI】combotree和combobox模糊查询

转载 http://blog.csdn.net/zoyocean/article/details/43445921 说明:EasyUI版本1.3.4,jQuery版本1.8.3 这里说的模糊查询指在...
  • dyx_nt88
  • dyx_nt88
  • 2015-03-04 10:57:12
  • 7013

jquery easyUI ComboTree使用心得

继承至 $.fn.combo.defaults 和$.fn.tree.defaults.覆盖默认值$.fn.combotree.defaults. combotree结合选择控制和下拉树,类似于...
  • F7ANTY
  • F7ANTY
  • 2014-04-30 15:56:32
  • 1685

combotree的总结

1:最近有这个需求,就是ext下的combo下拉是树,网上的例子很多,封装的也很好,基本都可以满足下拉框下出现想要的树,但是我的使用情况是比如在用户编辑的时候,要把用户已经选择过的数值自动再赋值到下拉...
  • silence1214
  • silence1214
  • 2012-03-15 20:14:09
  • 16517

DotNetBar中ComboTree显示整条路径信息

背景:ComboTree是个可以显示树状下拉菜单的ComboBox控件,弹出菜单如下所示:Tree     — node     — node点击节点node,默认显示结果为node,即仅仅是节点信息...
  • istonelee
  • istonelee
  • 2011-07-22 09:57:48
  • 4666
收藏助手
不良信息举报
您举报文章:Jquery ComboTree树的绑定-数据源JSON格式-操作
举报原因:
原因补充:

(最多只允许输入30个字)