树状下拉选择框tree:comboTree 单选

 

------------------------------------------------------------------------HTML---------------------------------------------------------------------

<tree:comboTree displayValue="--无上级行政区--" value="-1"
								treedata="${dataLst}" comboTreeId="name" style="width:153"></tree:comboTree>

treedata="${dataLst}":对应获得后台的数据

displayValue:对应数据的NAME

value: 对应数据ID

comboTreeId="name" 代表的是生成树状后INPUT的NAME属性的值  ,ID的值  以便提交后台获取

树状的原理是根据id  name   parent_id 来分段的

-------------------------------------------------------------后台-------------------------------------------------------------------------

首先新建bean树类TreeBean。java

package com.company.util.tree;

import java.util.Set;
/**
*
* 类名称:TreeBean
* 类描述:树形类(用于定义树形的基本结构,以供其它类进行转换)
* 创建人:vigo
*/
public class TreeBean {
	private String id;
	private String name;
	private String parentid;
	private String url;
	private String param1;//备用字段
	public String getParam1() {
		return param1;
	}
	public void setParam1(String param1) {
		this.param1 = param1;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getParentid() {
		return parentid;
	}
	public void setParentid(String parentid) {
		this.parentid = parentid;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
}

------------------------------------------------------action中查询SQL表数据--------------

List<TreeBean> dataLst =useAmAppFormulaService.findBdExpertItem(false);
			TreeBean def=new TreeBean();
			def.setId("-1");
			def.setName("请选择商品品目");
			def.setParentid("");
			dataLst.add(def);
			request.setAttribute("dataLst",dataLst);

---------------------------------service实现类------------------------此处,我的项目用的是S2SH框架,在后台取得数据时对应自己的取数据的写法

/**
	 * 查询商品品目树
	 * @throws 如果Dao层操作失败会抛出异常
	 * @return 查询的所有结果集
	 */
	public List<TreeBean> findBdExpertItem(boolean setXzqhTreeHead)  throws Exception{
		StringBuilder hql = new StringBuilder("select t.id,t.name,t.parent_id from BdExpertItem as t where 1=1 ");
		List<Object> list=useAmAppFormulaDao.findBdExpertItem(hql.toString(), null);
		List<TreeBean> xzqhTree = new ArrayList<TreeBean>();
		for(Object obj:list){
			Object[] arr=(Object[]) obj;
			TreeBean t = new TreeBean();
			t.setId(arr[0].toString());
			t.setName((String) arr[1]);
			if(arr[2]!=null){
				t.setParentid(arr[2].toString());
			}else{
				t.setParentid("");
			}
			xzqhTree.add(t);
		}
		if(setXzqhTreeHead){
			TreeBean xzqhhead = new TreeBean();
			xzqhhead.setId("-1");
			xzqhhead.setName("请选择商品品目");
			xzqhhead.setParentid("");
			xzqhTree.add(xzqhhead);
		}
		return  xzqhTree;
	}

----------------------------------------------dao实现---------------------

/**

* 通过HQL进行完全条件查询

* @param hql HQL条件查询语句

* @param values 条件查询??

* @throws Dao层操作失败会抛出异常

* @return 条件查询的所有结果集

*/

public List<T> findBdExpertItem(String hql, Object[] values)

throws Exception {

return (List<T>) this.findByQuery(hql, values);

}

----------------------------------此处结束-------------

注意在编辑页面要取得已保存的ID NAME,可以使用,要保存NAME就要在页面取得getText,然后赋值给INPUT

1,直接获取:

单选:$("#id").combotree("getValue")

多选:$("#id").combotree("getValues")

注意:如果value中的值和所显示的文本不同,如需获取文本内容,则可以使用getText(),多选同样加s。

2,在选择事件中获取:

onSelect:function(node){

node.text;或者 node.id;

}

3,使用api中方式

var t = $("#id").combotree(‘tree‘); // 得到树对象

var n = t.tree(‘getSelected‘); // 得到选择的节点

alert(n.text);

4,也可以使用循环的方式获取

时间: 2024-10-07 13:25:19

树状下拉选择框tree:comboTree 单选的相关文章

Bootstrap系列 -- 15. 下拉选择框select

Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role="form"> <div class="form-group"> <select class="form-control"> <option>1</option> <option>2</

下拉选择框改变表单action的简单例子

做了个简单的小例子 用js弄的. form  的代码 1 <form  action=""  method="post" id="formRole"> type的 下拉单 1 2 3 4 5 6 <select name="type" id="type"  onchange="changeAction()">       <option value=&quo

一款javascript实现的超炫的下拉选择框

今天为给大家带来一款javascript实现的超炫的下拉选择框.下拉的列表由半用透明的幽灵按钮组成.显示下拉的时候,列表项由左右两侧飞入.消息时飞向左右两侧.一起看下效果图 在线预览   源码下载 实现的代码. html代码: <div class="scifiUI"> <h1> Scifi Dropdown</h1> <ul> <li>Interactive</li> <li>Animated<

第三章:Select 下拉选择框的练习

1. 练习 Select 下拉选择框的练习. 2. 针对于这样的情况,如何来定位元素: 3. 总结: 看到下拉选择框,标准的 Select 下拉框时,可以选择合适的页面元素来定位.

基于jQuery美化联动下拉选择框

今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="container"> <div class="inner"> <section id="main_content"

[jQueryUI] - Chosen:select下拉选择框美化插件及问题【转】

hosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组,同时也可禁用某些选择项. 先来看下插件的效果:   跟这个比起来,原来的select样式是不是弱爆了! 马上来武装我们的select吧: 1.先把js和css文件引用到网页里面去: ? 1 2 3 <link href="js/jqueryUI/chosen/chosen.css" t

bootstrap-表单控件——下拉选择框select元素

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>表单控件--下拉选择框select元</title>     <!-

jQuery插件——下拉选择框

其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $.fn.extend({ dropdown:function (options) { return this.each(function (i, val) { $(val).css("position", "relative"); // 设置默认参数 var opts =

jquery.chosen.js下拉选择框美化插件项目实例

由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生变化.为了界面的美观,不得已查资料寻找另外的插件. 使用jquery.chosen.js下拉选择框美化插件同样也能达到类似效果 完成效果如下 实现步骤如下 1.导入相关文件 <link rel="stylesheet" href="${ctxStatic}/css/chos