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

原创 2013年10月14日 20:13:45

前言

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

页面(index.jsp)

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
	<title>ComboTree Actions - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://blog.csdn.net/nupt123456789/article/details/js/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://blog.csdn.net/js/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://blog.csdn.net/js/demo/demo.css">
	<script type="text/javascript" src="http://blog.csdn.net/js/jquery.min.js"></script>
	<script type="text/javascript" src="http://blog.csdn.net/js/jquery.easyui.min.js"></script>
	<script type="text/javascript">
	   $(function(){
		   $("#cc").combotree({
			   url:'getTreeData',//Action,获取树的信息
			   multiple:true//设置是否多选
		   });
		});
	</script>
</head>
<body>
	<h2>ComboTree Actions</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>Click the buttons below to perform actions</div>
	</div>
	<div style="margin:10px 0">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">Disable</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">Enable</a>
	</div>
	<input id="cc" class="easyui-combotree"  style="width:200px;">
	<script type="text/javascript">
		function getValue(){
			var val = $('#cc').combotree('getValue');
			var text = $('#cc').combotree('getText');
			alert("val="+val+",text="+text);
		}
		function setValue(){
			$('#cc').combotree('setValue', '这是设定的值');
		}
		function disable(){
			$('#cc').combotree('disable');
		}
		function enable(){
			$('#cc').combotree('enable');
		}
	</script>

</body>
</html>

2.ComboTree的数据源类

/*
 * $filename: ComboTreeModel.java,v $
 * $Date: 2013-10-14  $
 * Copyright (C) ZhengHaibo, Inc. All rights reserved.
 * This software is Made by Zhenghaibo.
 */
package edu.njupt.zhb.model;

import java.util.List;

/*
 *@author: ZhengHaibo  
 *web:     /nuptboyzhb
 *mail:    zhb931706659@126.com
 *2013-10-14  Nanjing,njupt,China
 */
public class ComboTreeModel {
	private int id;
	private String text;
	private List<ComboTreeModel> children;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public List<ComboTreeModel> getChildren() {
		return children;
	}
	public void setChildren(List<ComboTreeModel> children) {
		this.children = children;
	}
}

3.Action类

/*
 * $filename: ZTreeDemoAction.java,v $
 * $Date: Sep 27, 2013  $
 * Copyright (C) ZhengHaibo, Inc. All rights reserved.
 * This software is Made by Zhenghaibo.
 */
package edu.njupt.zhb.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;

import edu.njupt.zhb.model.ComboTreeModel;
import net.sf.json.JSONArray;

/*
 *@author: ZhengHaibo  
 *web:     /nuptboyzhb
 *mail:    zhb931706659@126.com
 *Sep 27, 2013  Nanjing,njupt,China
 */
public class CombotreeDemoAction extends ActionSupport {
	/**
	 * 
	 */
	private static final long serialVersionUID = -3318989776253565435L;
	/**
	 * 模拟从数据库读取数据
	 * 
	 * @return
	 */
    public void getTreeData(){
    	List<ComboTreeModel> list = new ArrayList<ComboTreeModel>();
    	for(int i = 1;i<10;i++){
    		ComboTreeModel ctm = new ComboTreeModel();
    		ctm.setId(i);
    		ctm.setText("树节点"+i);
    		if(i == 2){
    			List<ComboTreeModel> children = new ArrayList<ComboTreeModel>();
    			for (int j = 1; j < 6; j++) {
    				ComboTreeModel comboTreeModel = new ComboTreeModel();
    				comboTreeModel.setId(j);
    				comboTreeModel.setText("子节点"+i+j);
    				children.add(comboTreeModel);
				}
    			ctm.setChildren(children);
    		}
    		list.add(ctm);
    	}
    	System.out.println("----json--");
    	String json = JSONArray.fromObject(list).toString();//转化为JSON
    	getPrintWriter().write(json);//返回前台
    }
	/**
	 * 获得HttpServletResponse对象
	 * 
	 * @return
	 */
	public static HttpServletResponse getResponse() {
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/html;charset=UTF-8");
		return response;
	}

	public PrintWriter getPrintWriter() {
		PrintWriter pw = null;
		try {
			pw = getResponse().getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return pw;
	}

}

4.struts2的配置

<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">


<struts>
    <constant name="struts.server.static.browserCache" value="false" />
	<constant name="struts.ui.theme" value="simple" />
	<constant name="struts.devMode" value="true" />
	<constant name="struts.i18n.encoding" value="UTF-8" />
	<constant name="struts.configuration.xml.reload" value="true" />
	<package name="zhenghaiboTest" extends="struts-default">
		<action name="getTreeData" class="edu.njupt.zhb.action.CombotreeDemoAction" method="getTreeData">
		</action>
	</package>
</struts>

5.效果

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


2.获取组件的值


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

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

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




版权声明:本文为博主原创文章,未经博主允许不得转载。

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

(转载)/nupt123456789/article/details/12715155 前言 ComboTree也是表单中一种常见组件,如:有些...
  • u010746364
  • u010746364
  • 2016年11月29日 11:45
  • 3026

使用EasyUI Tree异步加载JSON数据 生成树

这几天因为工作需要,要做一个支持无限级的菜单。 我也是菜鸟一只,能想到的东西不多,所以用了Easy UI的tree组件。 不得不说,easyui确实很强大。  因为是无限级菜单,数据...
  • superdog007
  • superdog007
  • 2013年02月25日 10:40
  • 27961

easyui的combotree控件绑定json数据的例子

  • 2017年07月07日 16:53
  • 1.22MB
  • 下载

关于combotree的使用(下拉展示本地Json文件数据源,模糊查询)

一、首先我们实现combotree的下拉展示。 1.Html代码。 2.JS代码。 $(function () {             $('#Name').combotr...
  • qq_34721145
  • qq_34721145
  • 2016年11月08日 16:07
  • 126

easyui的combotree控件绑定json数据demo

easyui的combotree控件绑定json数据demo。C#后台生成json串输出,让 easyui-combotree获取json并绑定,然后取得选中节点的值,的简单例子。...
  • djk8888
  • djk8888
  • 2017年07月07日 16:42
  • 172

EasyUI的DataGrid绑定Json数据源

EasyUI给表格绑定数据是最常用的方法,小编分享一下总结出来的两种绑定表格方法,知识在于积累。 第一种:数据存放在数据集中,每一行对应多个值,利用循环把数据绑定到表格 前台代码: [html]...
  • li123128
  • li123128
  • 2018年01月06日 13:12
  • 79

EasyUI的DataGrid绑定Json数据源

EasyUI给表格绑定数据是最常用的方法,小编分享一下总结出来的两种绑定表格方法,知识在于积累。 第一种:数据存放在数据集中,每一行对应多个值,利用循环把数据绑定到表格 前台代码: ...
  • h273979586
  • h273979586
  • 2017年12月06日 20:26
  • 3933

树控件绑定数据源.rar

  • 2010年07月01日 12:24
  • 40KB
  • 下载

jQuery 绑定 ComponentOne Wijmo Combobox 数据源

你可以很容易的使用ComponentOne Wijmo Charts 展示数据。这篇文章介绍怎样使用jQuery 实现Wijmo Charts 的缩放功能。 放大或者缩小 Wijmo Chart...
  • C1SupportTeam
  • C1SupportTeam
  • 2012年07月24日 12:18
  • 601

【控件操作】DataGridView绑定数据源

DataGridView绑定数据源的步骤。
  • Dongle_74
  • Dongle_74
  • 2016年03月13日 17:29
  • 1382
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery ComboTree树的绑定-数据源JSON格式-操作
举报原因:
原因补充:

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