------------------------------------------------------------------------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,也可以使用循环的方式获取