树状下拉选择框comboxtree实例
下拉列表树形结构
下拉列表树形结构上级菜单<select id="cc" class="easyui-combotree" style="width:223px;" name='parentid'data-options="url:'<%=request.getContextPath()%>/sysMenu/combolist'">@RequestMapping("/combolist")public void combolist(HttpServletRequest request,HttpServletResponse response){List<SysMenu> list = null;Map<String,Object> params = new HashMap<String,Object>();HashMap<String,Object> dataMap = new HashMap<String,Object>();//查询列表list = this.sysMenuService.list(params);List menuList = new ArrayList<Map>();//根菜单HashMap<String,Object> menuRootMap = new HashMap<>();ArrayList<Map<String,Object>> modalArray = new ArrayList<Map<String,Object>>();for(SysMenu menuParent : list){if(menuParent.getParentid() == null || menuParent.getParentid() == 0){menuRootMap.put("id", menuParent.getId());menuRootMap.put("text", menuParent.getName());}//⼆级模块if(menuParent.getParentid() == 13){HashMap<String,Object> menuParentMap = new HashMap<String,Object>();ArrayList<Map<String,Object>> childrenList = new ArrayList<Map<String,Object>>() ;menuParentMap.put("id", menuParent.getId());menuParentMap.put("text", menuParent.getName());//菜单for(SysMenu menuChildren : list){if(menuChildren.getParentid().intValue() == menuParent.getId().intValue()){HashMap<String,Object> menuChildrenMap = new HashMap<>();menuChildrenMap.put("id", menuChildren.getId());menuChildrenMap.put("text", menuChildren.getName());childrenList.add(menuChildrenMap);}}menuParentMap.put("children", childrenList);modalArray.add(menuParentMap);}}menuRootMap.put("children", modalArray);menuList.add(menuRootMap);//HashMap<String,Object> messageMap = new HashMap<String,Object>();//messageMap.put("rows", list);//this.out(response, messageMap);this.webOut(response, menuList);return;}。
c#下拉列表框弹出树的实现
Visual studio net 中ComboBoxTreeView(下拉列表框弹出树) 与ToolStripComboBoxTreeView(下拉列表框工具条弹出树)相结合最进在使用VSnet开发时,发现有很多新东西,比如,我们常用的ToolBar ,MainMenu,StatusBar,变成了功能强大,样式新颖的,ToolStrip,MenuStrip,StatusStrip,等.不过还是有些不足,比如,ComboBox 变化不大,下拉框里面只能是文本的,很不方便,我的想法是在下拉ComboBox时会出现TreeView 控件,这也是我今天要做的控件ComboBoxTreeView开始写了一个,关键点是弹出TreeView 控件,但是把TreeView 做成一个窗体,弹出,还是有什么办法,一查VS2005有一个类窗体弹出类(很强大的对象)ToolStripDropDown, 在使用此类的时候需要传递一个ToolStripControlHost类型的对象,还有个问题就是,TreeView 弹出了,会在它的上方出现了一条小白条,这个问题很棘手,不过如果你懂Win32那就一切OK了,好,我们看看这个类吧．一：ComboBoxTreeViewusing System.Data;using System.Text;using System.Windows.Forms;namespace WindowsApplication14{public class ComboBoxTreeView : ComboBox{private const int WM_LBUTTONDOWN = 0x201, WM_LBUTTONDBLCLK = 0 x203;ToolStripControlHost treeViewHost;ToolStripDropDown dropDown;public ComboBoxTreeView(){TreeView treeView = new TreeView();treeView.AfterSelect+=new TreeViewEventHandler(treeView_AfterSelec t);treeView.BorderStyle = BorderStyle.None;treeViewHost = new ToolStripControlHost(treeView);dropDown = new ToolStripDropDown();dropDown.Width = this.Width;dropDown.Items.Add(treeViewHost);}public void treeView_AfterSelect(object sender, TreeViewEventArgs e){this.Text=TreeView.SelectedNode.Text;dropDown.Close();}public TreeView TreeView{get { return treeViewHost.Control as TreeView; }}private void ShowDropDown(){if (dropDown != null){treeViewHost.Size =new Size(DropDownWidth-2,DropDownHeigh t);dropDown.Show(this, 0, this.Height);}}protected override void WndProc(ref Message m){if (m.Msg == WM_LBUTTONDBLCLK || m.Msg == WM_LBUTTONDOWN){ShowDropDown();return;}base.WndProc(ref m);}protected override void Dispose(bool disposing){if (disposing){if (dropDown != null){dropDown.Dispose();dropDown = null;}}base.Dispose(disposing);}}}附图:二：ToolStrip工具条中可以插入文本，下拉框，等，如果要插入下拉树的列表框但不可以直接插入ComboBoxTreeView，必须继承上面提到的ToolStripControlHost类，using System;using System.Windows;using System.Windows.Forms;using ponentModel;using System.Drawing;using System.Drawing.Design;using System.Windows.Forms.Design;namespace WindowsApplication14{[DefaultProperty("Items")][ToolStripItemDesignerAvailability(ToolStripItemDesignerAvailability.ContextM enuStrip | (ToolStripItemDesignerAvailability.MenuStrip | ToolStripItemDesignerAv ailability.ToolStrip))]public class ToolStripComboBoxTreeView : ToolStripControlHost{ToolStripComboBoxTreeViewControlpublic ToolStripComboBoxTreeView(): base(ToolStripComboBoxTreeView.CreateControlInstance()){ToolStripComboBoxTreeView.ToolStripComboBoxTreeViewControl contro l =base.Control as ToolStripComboBoxTreeView.ToolStripComboBoxTree ViewControl;control.Owner = this;}{ComboBox comboBox = }}}。
easyui 中 ComboTree(树形下拉框)
}
}
二、 entity 类的创建（注意 id 和 text ）
package com.yan.entity;
public class Auth {
private Integer id; // 主键 id （不要用别的，不然easyui不认）
private String text; // 名称 text （不要用别的，不然easyui不认）
// 拼接为id字符串
var ids = "";
for(var i in n){
ids+= ","+n[i].id;
}
ids= ids.substring(1);
// 获取角色id
var rid = $("#rd").val();
if(out==1){
alert("操作模块修改成功");
location.href = "treeJsp.do";
}else{
alert("操作模块修改失败");
}
},"text")
}
</script>
-------------------------------------------------------------------------------------------------
}
public void setText(String text) {
this.text = text;
}
public boolean isChecked() {
C#ComboBox下拉显示层次（树）
C#ComboBox下拉显⽰层次（树）数据库中很多时候⽤到树形结构，在界⾯上显⽰时如果是下拉框⼀次性显⽰时需要树结构来体现，看个效果图先：主要是⽤算法补空格，补符号，源码如下：using System;using System.Collections;using System.Collections.Generic;using System.Linq;using System.Windows.Forms;namespace WindowsFormsApplication1 {public partial class Form1 : Form {public Form1() {InitializeComponent();}private List<profile> pList;protected override void OnLoad(EventArgs e) {base.OnLoad(e);pList = new List<profile>();pList.AddRange(new profile[] {new profile { Id = 1, parentId=0, value="A级"},new profile { Id = 2, parentId=0, value="A级"},new profile { Id = 3, parentId=0, value="A级"},new profile { Id = 4, parentId=0, value="A级"},new profile { Id = 5, parentId=0, value="A级"},new profile { Id = 6, parentId=1, value="B级"},new profile { Id = 7, parentId=2, value="B级"},new profile { Id = 8, parentId=2, value="B级"},new profile { Id = 9, parentId=4, value="B级"},new profile { Id = 10, parentId=3, value="B级"},new profile { Id = 11, parentId=7, value="C级"},new profile { Id = 12, parentId=7, value="C级"},new profile { Id = 13, parentId=9, value="C级"},new profile { Id = 14, parentId=9, value="C级"},new profile { Id = 15, parentId=10, value="C级"},new profile { Id = 16, parentId=10, value="C级"},new profile { Id = 17, parentId=13, value="D级"},new profile { Id = 18, parentId=13, value="D级"},new profile { Id = 19, parentId=12, value="D级"},new profile { Id = 20, parentId=17, value="E级"},new profile { Id = 21, parentId=18, value="E级"},new profile { Id = 22, parentId=18, value="E级"},new profile { Id = 23, parentId=21, value="F级"},new profile { Id = 24, parentId=23, value="G级"},new profile { Id = 25, parentId=24, value="H级"},new profile { Id = 26, parentId=12, value="D级"},new profile { Id = 27, parentId=26, value="E级"},new profile { Id = 28, parentId=27, value="F级"},});//实例化⼀个根节点profile rootRoot = new profile();rootRoot.Id = 0;rootRoot.parentId = 0; = "顶级";AppendChildren(pList, rootRoot, 0);List<string> _name = new List<string>();getName(rootRoot, _name);ArrayList list = new ArrayList();for (int i = 0; i < _name.Count; i++) {list.Add(new System.Collections.DictionaryEntry(i, _name[i]));}comboBox1.DataSource = list;comboBox1.DisplayMember = "Value";comboBox1.ValueMember = "Key";//⽤treeView控件显⽰var node = new TreeNode("顶级");this.AddTree(node, 0);this.treeView1.Nodes.Add(node);return;}public void AddTree(TreeNode parentNode, int parentId) {var selectedList = pList.FindAll(item => item.parentId == parentId);foreach (var group in selectedList) {var node = parentNode.Nodes.Add(group.Id.ToString(), group.value);AddTree(node, group.Id);}}private List<int> tag = new List<int>();private void getName(profile p, List<string> name) {//this.listBox1.Items.Add(string.Format("{0}-{1}", p.Id, p.parentId));if (p == null) return;var str = string.Empty;for (var i = 1; i < p.level; i++) {if (tag.Contains(i)) {str += " ";} else {str += "│ ";}}name.Add(string.Format("{0}{1}{2}", str, , p.value, p.parentId, p.Id, p.level)); for (int i = 0; i < tag.Count; i++) {if (tag[i] >= p.level) {tag.Remove(tag[i]);}}if (p.tag == 0) tag.Add(p.level);if (p.profileList != null && p.profileList.Count > 0) {foreach (profile x in p.profileList) {getName(x, name);}}}public void AppendChildren(List<profile> list, profile profile, int count) { try {count++;var id = profile.Id;var subItems = list.Where(ee => ee.parentId == id).ToList();if (subItems.Count > 0) {for (int i = 0; i < subItems.Count; i++) {if (i == subItems.Count - 1) {subItems[i].name = string.Format("{0}{1}", "└--", "");} else {subItems[i].name = string.Format("{0}{1}", "├--", "");}subItems[i].level = count;subItems[i].tag = i == subItems.Count - 1 ? 0 : 1;}profile.profileList = new List<profile>();profile.profileList.AddRange(subItems);}foreach (var subItem in subItems) {AppendChildren(list, subItem, count);}} catch (Exception e) {MessageBox.Show(e.Message);}}}public class profile {public string fill { get; set; }public int tag { get; set; }public string name { get; set; }public int Id { get; set; }public int parentId { get; set; }public string value { get; set; }public int level { get; set; }public List<profile> profileList { get; set; }}。
ExtJs4实现下拉树选择框ComboTree
}
},
createPicker:function(){
varself=this;
varaurl=self.treeUrl;
if(self.multiSelect){//这里增加了多选的功能，在后台返回的JSON数据中，应加上checked:true之类的属性
if(aurl.indexOf("?")==-1)
expanded:true,
text:self.rootText,
id:self.rootId,
leaf:false
},Байду номын сангаас
autoLoad:true
});
self.picker=newExt.tree.Panel({
height:300,
autoScroll:true,
floating:true,
focusOnToFront:false,
else{
record.expand();
}
}else{
setToValues(record);
}
functionsetToValues(record){
if(!self.multiSelect){
self.values=record.get('id');
self.texts=record.get('text');
multiSelect:this.multiSelect||false,
fieldName:'category',
useId:eId||true,//是否使用id域，如果不选择，则值直接使用Picker的value值
selectedIds:'',
Extjs中ComboBoxTree实现的下拉框树效果（自写）
Extjs中ComboBoxTree实现的下拉框树效果（⾃写）最近涉及到的⼀个项⽬中，需要实现ComboBoxTree的效果，⾸先，看看效果吧……在Extjs中是没有这种效果的，所以得⾃⼰写，在⽹络上看了看别⼈的资料，⾃⼰再总结了⼀下，修改了⼀下，代码如下：复制代码代码如下:Ext.ux.TreeCombo = Ext.extend(boBox, {constructor: function (cfg) {cfg = cfg || {};Ext.ux.TreeCombo.superclass.constructor.call(this, Ext.apply({maxHeight: 300,editable: false,mode: 'local',triggerAction: 'all',rootVisible: false,selectMode: 'all'}, cfg));},store: new Ext.data.SimpleStore({fields: [],data: [[]]}),// 重写onViewClick，使展开树结点是不关闭下拉框onViewClick: function (doFocus) {var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);if (r) {this.onSelect(r, index);}if (doFocus !== false) {this.el.focus();}},tree: null,// 隐藏值hiddenValue: null,getHiddenValue: function () {return this.hiddenValue;},getValue: function () { //增加适⽤性，与原来combo组件⼀样return this.hiddenValue;},setHiddenValue: function (code, dispText) {this.setValue(code);boBox.superclass.setValue.call(this, dispText);this.hiddenValue = code;},initComponent: function () {var _this = this;var tplRandomId = 'deptcombo_' + Math.floor(Math.random() * 1000) + this.tplIdthis.tpl = "<div style='height:" + _this.maxHeight + "px' id='" + tplRandomId + "'></div>"this.tree = new Ext.tree.TreePanel({border: false,enableDD: false,enableDrag: false,rootVisible: _this.rootVisible || false,autoScroll: true,trackMouseOver: true,height: _this.maxHeight,lines: true,singleExpand: true,root: new Ext.tree.AsyncTreeNode({id: _this.rootId,text: _this.rootText,iconCls: 'ico-root',expanded: true,leaf: false,border: false,draggable: false,singleClickExpand: false,hide: true}),loader: new Ext.tree.TreeLoader({nodeParameter: 'ID',requestMethod: 'GET',dataUrl: _this.url})});this.tree.on('click', function (node) {if ((_this.selectMode == 'leaf' && node.leaf == true) || _this.selectMode == 'all') { if (_this.fireEvent('beforeselect', _this, node)) {_this.fireEvent('select', _this, node);}}});this.on('select', function (obj, node) {var dispText = node.text;var code = node.id;obj.setHiddenValue(code, dispText);obj.collapse();});this.on('expand', function () {this.tree.render(tplRandomId);});Ext.ux.TreeCombo.superclass.initComponent.call(this);}})Ext.reg("treecombo", Ext.ux.TreeCombo);之后呢，在主页中添加Extjs类库复制代码代码如下:<link href="../ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="../ext/adapter/ext/ext-base.js" type="text/javascript"></script><script src="../ext/ext-all.js" type="text/javascript"></script><script src="../ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script> <script src="../ext/ComboBoxTree.js" type="text/javascript"></script><script src="login.js" type="text/javascript"></script>其中，login.js的代码如下：复制代码代码如下:/* File Created: 五⽉ 27, 2013 */Ext.onReady(function () {var _window = new Ext.Window({title: "查询条件",renderTo: Ext.getBody(),frame: true,plain: true,buttonAlign: "center",closeAction: "hide",maximizable: true,closable: true,bodyStyle: "padding:20px",width: 350,height: 300,layout: "form",lableWidth: 110,defaults: { xtype: "textfield", width: 180 },items: [{fieldLabel: "案件编号",anchor: "100%"},{xtype: "datefield",fieldLabel: "案发时间",anchor: "100%"},{fieldLabel: "举报⼈",anchor: "100%"},{fieldLabel: "被举报单位或个⼈",anchor: "100%"},{xtype: "treecombo",fieldLabel: "案件发⽣地",anchor: "100%",url: "http://localhost:1502/treeData.ashx"/// <reference path="../treeData.ashx" /> },{xtype: "treecombo",fieldLabel: "案件类型",anchor: "100%",url: "http://localhost:1502/window/ajwflx.ashx"},{xtype: "treecombo",fieldLabel: "案件性质",anchor: "100%",url: "http://localhost:1502/window/ajwfxz.ashx"}],buttons: [{ text: "确定" }, { text: "取消", handler: function () { _window.hide(); } }] })_window.show();})treedata.ashxd的内容为：复制代码代码如下:string strTreeNode = "[" +"{'id':150100,'leaf':false,expanded:false,'text':'呼和浩特市国⼟资源局','children':[" + "{'id':150101,'leaf':true,'children':null,'text':'市辖区国⼟资源局'}," +"{'id':150102,'leaf':true,'children':null,'text':'新城区国⼟资源局'}," +"{'id':150103,'leaf':true,'children':null,'text':'回民区国⼟资源局'}," +"{'id':150104,'leaf':true,'children':null,'text':'⽟泉区国⼟资源局'}," +"{'id':150105,'leaf':true,'children':null,'text':'赛罕区国⼟资源局'}," +"{'id':150121,'leaf':true,'children':null,'text':'⼟默特左旗国⼟资源局'}," +"{'id':150122,'leaf':true,'children':null,'text':'托克托县国⼟资源局'}," +"{'id':150123,'leaf':true,'children':null,'text':'和林格尔县国⼟资源局'}," +"{'id':150124,'leaf':true,'children':null,'text':'清⽔河县国⼟资源局'}," +"{'id':150125,'leaf':true,'children':null,'text':'武川县国⼟资源局'}" +"]}," +"{'id':150200,'leaf':false,expanded:false,'text':'包头市国⼟资源局','children':[" + "{'id':150201,'leaf':true,'children':null,'text':'市辖区国⼟资源局'}," +"{'id':150202,'leaf':true,'children':null,'text':'东河区国⼟资源局'}," +"{'id':150203,'leaf':true,'children':null,'text':'昆都仑区国⼟资源局'}," +"{'id':150204,'leaf':true,'children':null,'text':'青⼭区国⼟资源局'}," +"{'id':150205,'leaf':true,'children':null,'text':'⽯拐区国⼟资源局'}," +"{'id':150206,'leaf':true,'children':null,'text':'⽩云矿区国⼟资源局'}," +"{'id':150207,'leaf':true,'children':null,'text':'九原区国⼟资源局'}," +"{'id':150221,'leaf':true,'children':null,'text':'⼟默特右旗国⼟资源局'}," +"{'id':150222,'leaf':true,'children':null,'text':'固阳县国⼟资源局'}," +"{'id':150223,'leaf':true,'children':null,'text':'达尔罕茂明安联合旗国⼟资源局'}" + "]}," +"{'id':150300,'leaf':false,expanded:false,'text':'乌海市国⼟资源局','children':[" + "{'id':150301,'leaf':true,'children':null,'text':'市辖区国⼟资源局'}," +"{'id':150302,'leaf':true,'children':null,'text':'海勃湾区国⼟资源局'}," +"{'id':150303,'leaf':true,'children':null,'text':'海南区国⼟资源局'}," +"{'id':150304,'leaf':true,'children':null,'text':'乌达区国⼟资源局'}" +"]}," +"{'id':150400,'leaf':false,expanded:false,'text':'⾚峰市国⼟资源局','children':[" + "{'id':150401,'leaf':true,'children':null,'text':'市辖区国⼟资源局'}," +"{'id':150402,'leaf':true,'children':null,'text':'红⼭区国⼟资源局'}," +"{'id':150403,'leaf':true,'children':null,'text':'元宝⼭区国⼟资源局'}," +"{'id':150404,'leaf':true,'children':null,'text':'松⼭区国⼟资源局'}," +"{'id':150421,'leaf':true,'children':null,'text':'阿鲁科尔沁旗国⼟资源局'}," +"{'id':150422,'leaf':true,'children':null,'text':'巴林左旗国⼟资源局'}," +"{'id':150423,'leaf':true,'children':null,'text':'巴林右旗国⼟资源局'}," +"{'id':150424,'leaf':true,'children':null,'text':'林西县国⼟资源局'}," +"{'id':150425,'leaf':true,'children':null,'text':'克什克腾旗国⼟资源局'}," +"{'id':150426,'leaf':true,'children':null,'text':'翁⽜特旗国⼟资源局'}," +"{'id':150428,'leaf':true,'children':null,'text':'喀喇沁旗国⼟资源局'}," +"{'id':150429,'leaf':true,'children':null,'text':'宁城县国⼟资源局'}," +"{'id':150430,'leaf':true,'children':null,'text':'敖汉旗国⼟资源局'}" +"]}," +"{'id':150500,'leaf':false,expanded:false,'text':'通辽市国⼟资源局','children':[" + "{'id':150501,'leaf':true,'children':null,'text':'市辖区国⼟资源局'}," +"{'id':150502,'leaf':true,'children':null,'text':'科尔沁区国⼟资源局'}," +"{'id':150521,'leaf':true,'children':null,'text':'科尔沁左翼中旗国⼟资源局'}," +"{'id':150522,'leaf':true,'children':null,'text':'科尔沁左翼后旗国⼟资源局'}," +"{'id':150523,'leaf':true,'children':null,'text':'开鲁县国⼟资源局'}," +"{'id':150524,'leaf':true,'children':null,'text':'库伦旗国⼟资源局'}," +"{'id':150525,'leaf':true,'children':null,'text':'奈曼旗国⼟资源局'}," +"{'id':150526,'leaf':true,'children':null,'text':'扎鲁特旗国⼟资源局'}," +"{'id':150581,'leaf':true,'children':null,'text':'霍林郭勒市国⼟资源局'}" + "]}," +"{'id':150600,'leaf':false,expanded:false,'text':'鄂尔多斯市国⼟资源局','children':[" + "{'id':150602,'leaf':true,'children':null,'text':'东胜区国⼟资源局'}," +"{'id':150621,'leaf':true,'children':null,'text':'达拉特旗国⼟资源局'}," +"{'id':150622,'leaf':true,'children':null,'text':'准格尔旗国⼟资源局'}," +"{'id':150623,'leaf':true,'children':null,'text':'鄂托克前旗国⼟资源局'}," +"{'id':150624,'leaf':true,'children':null,'text':'鄂托克旗国⼟资源局'}," +"{'id':150625,'leaf':true,'children':null,'text':'杭锦旗国⼟资源局'}," +"{'id':150626,'leaf':true,'children':null,'text':'乌审旗国⼟资源局'}," +"{'id':150627,'leaf':true,'children':null,'text':'伊⾦霍洛旗国⼟资源局'}" + "]}," +"{'id':150700,'leaf':false,expanded:false,'text':'呼伦贝尔市国⼟资源局','children':[" + "{'id':150701,'leaf':true,'children':null,'text':'市辖区国⼟资源局'}," +"{'id':150702,'leaf':true,'children':null,'text':'海拉尔区国⼟资源局'}," +"{'id':150721,'leaf':true,'children':null,'text':'阿荣旗国⼟资源局'}," +"{'id':150722,'leaf':true,'children':null,'text':'莫⼒达⽡达斡尔族⾃治旗国⼟资源局'}," + "{'id':150723,'leaf':true,'children':null,'text':'鄂伦春⾃治旗国⼟资源局'}," +"{'id':150724,'leaf':true,'children':null,'text':'鄂温克族⾃治旗国⼟资源局'}," + "{'id':150725,'leaf':true,'children':null,'text':'陈巴尔虎旗国⼟资源局'}," +"{'id':150726,'leaf':true,'children':null,'text':'新巴尔虎左旗国⼟资源局'}," +"{'id':150727,'leaf':true,'children':null,'text':'新巴尔虎右旗国⼟资源局'}," +"{'id':150781,'leaf':true,'children':null,'text':'满洲⾥市国⼟资源局'}," +"{'id':150782,'leaf':true,'children':null,'text':'⽛克⽯市国⼟资源局'}," +"{'id':150783,'leaf':true,'children':null,'text':'扎兰屯市国⼟资源局'}," +"{'id':150784,'leaf':true,'children':null,'text':'额尔古纳市国⼟资源局'}," +"{'id':150785,'leaf':true,'children':null,'text':'根河市国⼟资源局'}" +"]}," +"{'id':150800,'leaf':false,expanded:false,'text':'巴彦淖尔市国⼟资源局','children':[" + "{'id':150801,'leaf':true,'children':null,'text':'市辖区国⼟资源局'}," +"{'id':150802,'leaf':true,'children':null,'text':'临河区国⼟资源局'}," +"{'id':150821,'leaf':true,'children':null,'text':'五原县国⼟资源局'}," +"{'id':150822,'leaf':true,'children':null,'text':'磴⼝县国⼟资源局'}," +"{'id':150823,'leaf':true,'children':null,'text':'乌拉特前旗国⼟资源局'}," +"{'id':150824,'leaf':true,'children':null,'text':'乌拉特中旗国⼟资源局'}," +"{'id':150825,'leaf':true,'children':null,'text':'乌拉特后旗国⼟资源局'}," +"{'id':150826,'leaf':true,'children':null,'text':'杭锦后旗国⼟资源局'}" + "]}," +"{'id':150900,'leaf':false,expanded:false,'text':'乌兰察布市国⼟资源局','children':[" + "{'id':150901,'leaf':true,'children':null,'text':'市辖区国⼟资源局'}," +"{'id':150902,'leaf':true,'children':null,'text':'集宁区国⼟资源局'}," +"{'id':150921,'leaf':true,'children':null,'text':'卓资县国⼟资源局'}," +"{'id':150922,'leaf':true,'children':null,'text':'化德县国⼟资源局'}," +"{'id':150923,'leaf':true,'children':null,'text':'商都县国⼟资源局'}," +"{'id':150924,'leaf':true,'children':null,'text':'兴和县国⼟资源局'}," +"{'id':150925,'leaf':true,'children':null,'text':'凉城县国⼟资源局'}," +"{'id':150926,'leaf':true,'children':null,'text':'察哈尔右翼前旗国⼟资源局'}," + "{'id':150927,'leaf':true,'children':null,'text':'察哈尔右翼中旗国⼟资源局'}," + "{'id':150928,'leaf':true,'children':null,'text':'察哈尔右翼后旗国⼟资源局'}," + "{'id':150929,'leaf':true,'children':null,'text':'四⼦王旗国⼟资源局'}," +"{'id':150981,'leaf':true,'children':null,'text':'丰镇市国⼟资源局'}" +"]}," +"{'id':152200,'leaf':false,expanded:false,'text':'兴安盟国⼟资源局','children':[" + "{'id':152201,'leaf':true,'children':null,'text':'乌兰浩特市国⼟资源局'}," +"{'id':152202,'leaf':true,'children':null,'text':'阿尔⼭市国⼟资源局'}," +"{'id':152221,'leaf':true,'children':null,'text':'科尔沁右翼前旗国⼟资源局'}," + "{'id':152222,'leaf':true,'children':null,'text':'科尔沁右翼中旗国⼟资源局'}," + "{'id':152223,'leaf':true,'children':null,'text':'扎赉特旗国⼟资源局'}," +"{'id':152224,'leaf':true,'children':null,'text':'突泉县国⼟资源局'}" +"]}," +"{'id':152500,'leaf':false,expanded:false,'text':'锡林郭勒盟国⼟资源局','children':[" + "{'id':152501,'leaf':true,'children':null,'text':'⼆连浩特市国⼟资源局'}," +"{'id':152502,'leaf':true,'children':null,'text':'锡林浩特市国⼟资源局'}," +"{'id':152522,'leaf':true,'children':null,'text':'阿巴嘎旗国⼟资源局'}," +"{'id':152523,'leaf':true,'children':null,'text':'苏尼特左旗国⼟资源局'}," +"{'id':152524,'leaf':true,'children':null,'text':'苏尼特右旗国⼟资源局'}," +"{'id':152525,'leaf':true,'children':null,'text':'东乌珠穆沁旗国⼟资源局'}," +"{'id':152526,'leaf':true,'children':null,'text':'西乌珠穆沁旗国⼟资源局'}," +"{'id':152527,'leaf':true,'children':null,'text':'太仆寺旗国⼟资源局'}," +"{'id':152528,'leaf':true,'children':null,'text':'镶黄旗国⼟资源局'}," +"{'id':152529,'leaf':true,'children':null,'text':'正镶⽩旗国⼟资源局'}," +"{'id':152530,'leaf':true,'children':null,'text':'正蓝旗国⼟资源局'}," +"{'id':152531,'leaf':true,'children':null,'text':'多伦县国⼟资源局'}" +"]}," +"{'id':152900,'leaf':false,expanded:false,'text':'阿拉善盟国⼟资源局','children':[" + "{'id':152921,'leaf':true,'children':null,'text':'阿拉善左旗国⼟资源局'}," +"{'id':152922,'leaf':true,'children':null,'text':'阿拉善右旗国⼟资源局'}," +"{'id':152923,'leaf':true,'children':null,'text':'额济纳旗国⼟资源局'}" +"]}" +"]";context.Response.Write(strTreeNode); 如此，上⾯所述的效果就实现了……。
bootstrap treeselect 案例
概述随着前端开发技术的飞速发展，越来越多的优秀工具和框架被开发出来，为开发者们提供了更多的选择。
其中，bootstrap treeselect 是一个备受瞩目的框架，它在处理树形数据展示和选择方面具有独特的优势。
本文将对 bootstrap treeselect 的相关内容进行详细介绍和分析，帮助读者更好地了解和应用这一框架。
一、bootstrap treeselect 的基本概念bootstrap treeselect 是一个基于bootstrap 的树形下拉选择框组件，它可以用来展示树形数据并实现树形结构的数据选择。
该组件基于jquery和bootstrap构建而成，为开发者提供了一种简洁、美观的方式来展示树形数据，并允许用户在树形结构中进行选择操作。
二、bootstrap treeselect 的使用方法1. 引入相关文件要使用 bootstrap treeselect，首先需要引入相关的css和js文件。
可以通过CDN或下载文件到本地进行引入。
通过这样的方式，可以使用该框架提供的样式和脚本。
2. 定义页面结构在页面中，需要定义一个select标签，用于展示树形选择框。
另外，还需要定义一个用于存储相关数据的数据源。
数据源可以是一个静态的json对象，也可以是动态获取的数据。
3. 初始化 treeselect通过调用bootstrap treeselect提供的初始化方法，将select标签转化为树形选择框。
在初始化时，可以传入相关的参数来定制树形选择框的样式和行为。
4. 处理选择事件当用户在树形选择框中进行选择操作时，可以通过监听相关的选择事件来进行处理。
根据用户的选择，可以获取到相应的数据并进行后续的处理。
三、bootstrap treeselect 的特点和优势1. 灵活多样的样式定制bootstrap treeselect 提供了丰富的样式定制选项，开发者可以根据自己的需要来定制树形选择框的外观和行为，从而实现与应用的整体风格和需求相匹配。
树状下拉挑选框comboxtree实例
Jquery-easy-ui 提供了这样的组件，称为 comboxtree
效果如下:
对全部高中资料试卷电气设备，在安装过程中以及安装结束后进行高中资料试卷调整试验；通电检查所有设备高中资料电试力卷保相护互装作置用调与试相技互术关，通系电1，力过根保管据护线生高0不产中仅工资2艺料22高试2可中卷以资配解料置决试技吊卷术顶要是层求指配，机置对组不电在规气进范设行高备继中进电资行保料空护试载高卷与中问带资题负料2荷试2，下卷而高总且中体可资配保料置障试时2卷，32调需3各控要类试在管验最路；大习对限题设度到备内位进来。行确在调保管整机路使组敷其高设在中过正资程常料1工试中况卷，下安要与全加过，强度并看工且25作尽52下可22都能护可地1关以缩于正小管常故路工障高作高中；中资对资料于料试继试卷电卷连保破接护坏管进范口行围处整，理核或高对者中定对资值某料，些试审异卷核常弯与高扁校中度对资固图料定纸试盒，卷位编工置写况.复进保杂行护设自层备动防与处腐装理跨置，接高尤地中其线资要弯料避曲试免半卷错径调误标试高方中等、动管中试电作线资高气，敷料中课并设3试资件且、技卷料中拒管术试试调绝路中验卷试动敷包方技作设含案术，技线以来术槽及避、系免管统不架启必等动要多方高项案中方；资式对料，整试为套卷解启突决动然高过停中程机语中。文高因电中此气资，课料电件试力中卷高管电中壁气资薄设料、备试接进卷口行保不调护严试装等工置问作调题并试，且技合进术理行，利过要用关求管运电线行力敷高保设中护技资装术料置。试做线卷到缆技准敷术确设指灵原导活则。。：对对在于于分调差线试动盒过保处程护，中装当高置不中高同资中电料资压试料回卷试路技卷交术调叉问试时题技，，术应作是采为指用调发金试电属人机隔员一板，变进需压行要器隔在组开事在处前发理掌生；握内同图部一纸故线资障槽料时内、，设需强备要电制进回造行路厂外须家部同出电时具源切高高断中中习资资题料料电试试源卷卷，试切线验除缆报从敷告而设与采完相用毕关高，技中要术资进资料行料试检，卷查并主和且要检了保测解护处现装理场置。设。备高中资料试卷布置情况与有关高中资料试卷电气系统接线等情况，然后根据规范与规程规定，制定设备调试高中资料试卷方案。
心基于Element-UI的组件改造的树形选择器（树形下拉框）
⼼基于Element-UI的组件改造的树形选择器（树形下拉框）前⾔：由于做项⽬需要⼀个树形选择器，项⽬⽤的也是element-ui框架，然⽽它⾃带的选择器组件没有树形选项，⼜不想引⼊其他的框架组件，于是⾃⼰利⽤el-select和el-tree改造了⼀个，感觉还挺好⽤的，就封装成了⼀个组件，如下图：element-ui的el-select组件的选项只能是列表形式：改造后的树形选择器：简介：此树形选择器组件是基于elment-ui框架的el-select和el-tree组件的基础上改造的，其解决了原el-select组件的选项列表不能是树形的问题，集合了前两个组件的属性和⽅法封装成了⼀个组件，引⼊即可使⽤。
其实现了树形列表、默认展开、默认选中、清空选值等功能，基本上可以满⾜⼤部分选择器的使⽤需求。
主要代码组合el-select和el-tree组件：<template><el-select :value="valueTitle" :clearable="clearable" @clear="clearHandle"><el-option :value="valueTitle" :label="valueTitle"><el-tree id="tree-option"ref="selectTree":accordion="accordion":data="options":props="props":node-key="props.value":default-expanded-keys="defaultExpandedKey"@node-click="handleNodeClick"></el-tree></el-option></el-select></template>封装组件：<script>export default {name: "el-tree-select",props:{/* 配置项 */props:{type: Object,default:()=>{return {value:'id', // ID字段名label: 'title', // 显⽰名称children: 'children' // ⼦级字段名}}},/* 选项列表数据(树形结构的对象数组) */options:{type: Array,default: ()=>{ return [] }},/* 初始值 */value:{type: Number,default: ()=>{ return null }},/* 可清空选项 */clearable:{type:Boolean,default:()=>{ return true }},/* ⾃动收起 */accordion:{type:Boolean,default:()=>{ return false }},},data() {return {valueId:this.value, // 初始值valueTitle:'',defaultExpandedKey:[]}},mounted(){this.initHandle()},methods: {// 初始化值initHandle(){if(this.valueId){this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[bel] // 初始化显⽰this.$refs.selectTree.setCurrentKey(this.valueId) // 设置默认选中this.defaultExpandedKey = [this.valueId] // 设置默认展开}this.$nextTick(()=>{let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'scrollBar.forEach(ele => ele.style.width = 0)})},// 切换选项handleNodeClick(node){this.valueTitle = node[bel]this.valueId = node[this.props.value]this.$emit('getValue',this.valueId)this.defaultExpandedKey = []},// 清除选中clearHandle(){this.valueTitle = ''this.valueId = nullthis.defaultExpandedKey = []this.clearSelected()this.$emit('getValue',null)},/* 清空选中样式 */clearSelected(){let allNode = document.querySelectorAll('#tree-option .el-tree-node')allNode.forEach((element)=>element.classList.remove('is-current'))}},watch: {value(){this.valueId = this.valuethis.initHandle()}},};</script>css样式：<style scoped>.el-scrollbar .el-scrollbar__view .el-select-dropdown__item{height: auto;max-height: 274px;padding: 0;overflow: hidden;overflow-y: auto;}.el-select-dropdown__item.selected{font-weight: normal;}ul li >>>.el-tree .el-tree-node__content{height:auto;padding: 0 20px;}.el-tree-node__label{font-weight: normal;}.el-tree >>>.is-current .el-tree-node__label{color: #409EFF;font-weight: 700;}.el-tree >>>.is-current .el-tree-node__children .el-tree-node__label{color:#606266;font-weight: normal;}</style>查看demo注意：此树形选择器要求的值（options）必须是树形对象数组，如你的值是扁平数据，需转换成树形数据。
树型结构~无限级联下拉列表框
树型结构~⽆限级联下拉列表框这个问题困扰了我很久，今天终于把它解决了，⼼中的喜悦可想⽽知，赶快把它记录⼀下标题⽆限级联下拉列表框的含义：可能有⼀个树型结构的表，它可能有ID,Name,ParentID,Level等字段，下⾯要实现的就是从⼀级节点开始，⼀级⼀级的列出来，并以下拉列表框的形式体现出来，就像是Ｎ级联动。
效果图：两个问题：１ 建⽴操作时的联动，它不需要进⾏⾃动绑定２ 编辑操作时的联运，它需要根据⼦节点，逐级⾃⼰绑定到⽗节点，直到根实现：ＪＳ代码1 <script type="text/javascript">2function areaOnSelect(obj) {3var res = '';4 $.ajax({ url: '@Url.Action("GetSubTree")',5 type: 'GET',6 data: { parentId: obj.value },7 success: function (msg) {8 $(obj).nextAll().remove();9 res = "<select name='Sub' onchange='areaOnSelect(this)'>";10 res += "<option value=''>请选择</option>";11 $.each(msg, function (i, item) {12 res += "<option value='" + item["ID"] + "'>" + item["Name"] + "</option>";13 });14 res += "</select>";15if ($(res).find("option").size() > 1)16 $(obj).after(res);17 }18 });19 }20 </script>Ｃ#代码：1 #region 树型结构相关2/// <summary>3/// 递归找⽼祖宗4/// </summary>5/// <param name="father"></param>6void GetFather(SubItem father)7 {8if (father != null)9 {10 father.Parent = _subList.FirstOrDefault(i => i.ID == father.ParentID);11 GetFather(father.Parent);12 }13 }1415/// <summary>16/// 弟妹找⼦孙17/// </summary>18/// <param name="father">⽗对象</param>19void getSons(SubItem father)20 {21if (father != null)22 {23 father.Sons = _subList.Where(item =>24 item.ParentID.Equals(father.ID)).ToList();25 father.Sons.ForEach(item =>26 {27 item.Parent = father;28 getSons(item);29 });30 }31 }323334 #endregionＣ#拼接下拉列表框相关：1 /// <summary>2/// 递归得到它的所有祖宗以selectlist的形式进⾏拼接3/// </summary>4/// <param name="son"></param>5/// <param name="sbr"></param>6void getSelectList(SubItem son, StringBuilder sbr)7 {8 StringBuilder inSbr = new StringBuilder();9if (son != null)10 {11if (son.ParentID == 0)12 inSbr.Append("<select name='Parent' onchange = 'areaOnSelect(this)' >");13else14 inSbr.Append("<select name='Sub'>");15 GetCommon_CategoryByLevel(son.Level).ToList().ForEach(i =>16 {17if (i.ID == son.ID)18 inSbr.Append("<option value='" + i.ID + "' selected='true'>" + + "</option>");19else20 inSbr.Append("<option value='" + i.ID + "'>" + + "</option>");21 });2223 inSbr.Append("</select>");24 sbr.Insert(0, inSbr);25 getSelectList(son.Parent, sbr);26 }27 }Ｃ#得到同⼀深度的节点（同辈节点）相关：1 /// <summary>2/// 得到指定深度的列表3/// </summary>4/// <param name="level"></param>5/// <returns></returns>6 public List<SubItem> GetCommon_CategoryByLevel(int level)7 {8var linq = from data1 in _subList9 join data2 in _subList on data1.ParentID equals data2.ID into list10 select new SubItem11 {12 ID = data1.ID,13 Level = data1.Level,14 Name = ,15 Parent = list.FirstOrDefault(),16 ParentID = data1.ParentID,17 };18return linq.Where(i => i.Level.Equals(level)).ToList();19 }ＭＶＣ页⾯action相关：1 public ActionResult Category(int? id)2 {3 ViewData["Parent"] = new SelectList(_subList.Where(i => i.ID == (id ?? 0)), "ID", "Name", id ?? 1);4 SubItem current = _subList.FirstOrDefault(i => i.ID == (id ?? 1));5 GetFather(current);6 StringBuilder sbr = new StringBuilder();7 getSelectList(current, sbr);8 ViewData["edit"] = sbr.ToString();//修改时，进⾏绑定9return View();10 }ＭＶＣ页⾯代码相关：1 @Html.Raw(ViewData["edit"].ToString())Ｃ#树型结构实体类相关：1///<summary>2///树型分类结构3///</summary>4public class Category5 {6///<summary>7///⽗ＩＤ8///</summary>9public int ParentID { get; set; }10///<summary>11///树ＩＤ12///</summary>13public int ID { get; set; }14///<summary>15///树名称16///</summary>17public string Name { get; set; }18///<summary>19///深度20///</summary>21public int Level { get; set; }22///<summary>23///⼦孙节点24///</summary>25public List<Category> Sons { get; set; }26///<summary>27///⽗节点28///</summary>29public Category Parent { get; set; }30 }好了，现在我们的Ｎ级⽆限下拉列表框就做好了，呵呵！。
Extjs4.2下拉树 ComboBoxTree
});
record.cascadeBy(function (node) {
} else {
self.setDefaultValue('', self.emptyText);
}
});
self.callParent();
},
constructor: function (config)
});
record.bubble(function (parentNode) {
if ('Root' != parentNode.get('text')) {
record = this.getRecord(item);
var check = !record.get('checked');
record.set('checked', check);
if ('Root' != parentNode.get('text')) {
parentNode.set('checked', true);
} else {
record.cascadeBy(function (node) {
node.set('checked', false);
/* 调用方式
var rescomboBoxTree = Ext.create('boboxTree', {
fieldLabel: '权限设置',
name: 'resIDS',
hiddenName: 'hiddenName',
基于ExtJS和E3.Tree实现下拉树
【关键词:E3.Tree ComboTree ExtJS 下拉树】一、写在最前面下拉树为下拉框和树形UI组件结合的一种高级UI表现形式，可称其为ComboTree。
在权限管理模块及其他各种业务中都较为常见。
此文就将结合ExtJs的Combobox组件和经过深度封装的E3.tree树形UI组件一起实现这种下拉树。
二、实现步骤第一步、扩展E3.Tree的AbstractWebTreeBuilderpublic class ComboExtTreeBuilder extends AbstractWebTreeBuilder{//361行//temp.append("${treeID}.render('${treeID}');").append(ENTER);}第二步、使用扩展后的ComboExtTreeBuilder构造出树形UIpublic void generateComboMenuTree(HttpServletRequest request){List nodeList = this.manageMenuResourceBpo.getMenuListByDto(new BaseDto());//业务数据解码器，从业务数据中分解出id和parentidUserDataUncoder deptUncoder = new UserDataUncoder(){public Object getID(Object menuData) throws UncodeException {MenuResourceDomain domain = (MenuResourceDomain)menuData;return domain.getMenuId();}public Object getParentID(Object menuData) throws UncodeException {MenuResourceDomain domain = (MenuResourceDomain)menuData;return domain.getParentMenuId();}};//Tree模型构造器，用于生成树模型AbstractWebTreeModelCreator treeModelCreator = new AbstractWebTreeModelCreator(){//该方法负责将业务数据映射到树型节点protected Node createNode(Object menuData, UserDataUncoder uncoder) {MenuResourceDomain domain = (MenuResourceDomain)menuData;WebTreeNode result = new WebTreeNode(domain.getMenuName(), "node" + domain.getMenuId());if(EredcipUtils.isNotEmpty(domain.getMenuId())){result.setAttribute("parentMenuId", domain.getMenuId());}return result;}};treeModelCreator.init(request);TreeModel treeModel = treeModelCreator.create(nodeList, deptUncoder);TreeDirector director = new DefaultTreeDirector();ComboExtTreeBuilder treeBuilder = new ComboExtTreeBuilder();treeBuilder.init(request);//防止生成DIV占位treeBuilder.setCreateDiv(false);//menuComboTree为生成的Ext.Treepanel对象名treeBuilder.setTreeID("menuComboTree");treeBuilder.setRootExpand(false);director.build(treeModel, treeBuilder);String treeScript = treeBuilder.getTreeScript();request.setAttribute("menuComboTreeScript", treeScript);}第三步、使用ExtJS生成下拉框Combobox//输出树脚本${menuComboTreeScript}<script type="text/javascript">var comboxWithTree;function menuComboTreeRenderBeforeHandler(pTree){comboxWithTree = new boBox({store:new Ext.data.SimpleStore({fields:[],data:[[]]}),editable:false,id: 'parentMenuName',value: '${menuName}',fieldLabel:'<span class=MUSTINPUT>上级菜单</span>',anchor: '100%',mode: 'local',triggerAction:'all',maxHeight: 230,//下拉框的显示模板,treeDiv作为显示下拉树的容器tpl: "<tpl for='.'><div style='height:230px'><div id='treeDiv'></div></div></tpl>", allowBlank: false,onSelect:Ext.emptyFn});//监听下拉树的节点单击事件pTree.on('click', function(node){comboxWithTree.setValue(node.text);Ext.getCmp("menuForm").findById('parentMenuId').setValue(node.attributes.parentMenuId) comboxWithTree.collapse();});//监听下拉框的下拉展开事件comboxWithTree.on('expand',function(){//将UI树挂到treeDiv容器pTree.render('treeDiv');pTree.root.expand();});}</script>说明:看到这里，聪明的读者都会想到，如此类推其实在下拉框里放任何的Ui组件都是可以的不一定是树UI。
ES007 Mscomboxtree按钮的配置及使用
Mscombotree按钮详解一、简介按钮说明：本示例仅讲述mscombotree的使用方法、技巧、注意点。
不涉及具体业务的逻辑。
mscombotree按钮是平台24种功能按钮之一，可以实现下拉出树形菜单功能。
备注:导入压缩包里的应用模块，可以查看应用示例，但导入后的应用是无数据的，可自行按照文档说明添加数据,另外导入后表单权限重新打开在点击确定下具体效果如下图1-1图1-1二、操作具体过程及参数详解2.1 拖一个button按钮选择按钮功能为mscombotree如图2-1-1图2-1-12.2 配置按钮样式及参数选中按钮，将按钮文本改成6，可设置按钮样式为向下的一个小箭头，如图2-2-2，再点击表单设计器左边的控件6如图2-2-1图2-2-1 图2-2-22.3数据处理参数的设置1)点击上边红圈后的按钮进入参数配置页面。
2)在参数窗口中首先选择数据源，local为本地数据库（如果建有外部的数据源那么在此处也会显示出来，也可选择），然后选着数据源表为(local)@EV_ORGONLINE3)取值字段相当于SQL语句中select后面的内容，即为你想取出的值，如图2-3-1，在右边的字段列表中选中你想取出的值图2-3-14):检索条件：对应于SQL语句where后面的部分，1=1表示显示所有数据，如图2-3-2图2-3-2如果要做数据的过滤，则在检索条件中填写where后边的条件，过滤掉无用的信息。
如图2-3-3图2-3-35）目标对象：即把选中的值分别加到设置的表单对应的控件里，通过数据目标来控制如图2-3-4图2-3-4对于取值字段和目标对象这边，取值字段可以选择多个取值字段，但是取出的这些字段存放的位置和需要下面的目标对象一一对应，即：取几放几。
如下图：现在取了两个字段，suporg和orgname，那么就会把suporg这个字段赋给提交人，Orgname赋给提交人所在部门。
6)父子段、子字段：表示在此EV_ORGONLINE视图中，选择所需的两个字段来构成父子关系的部门树形目录，即suporg和orgname两个字段。
在ComboBox控件的下拉框内加入TreeView控件
在ComboBox控件的下拉框内加⼊TreeView控件Public Class ComboboxTreeInherits ComboBoxPrivate Const WM_LBUTTONDOWN As Int32 = &H201Private Const WM_LBUTTONDBLCLK As Int32 = &H203Private m_TreeViewHost As ToolStripControlHostPrivate m_DropDown As ToolStripDropDownPrivate WithEvents TreeViewF As TreeViewFormPublic Event AddNode(ByVal Node As TreeNode)Public Event DelNode(ByVal Node As TreeNode)Public Event NodeUp(ByVal Node As TreeNode)Public Event NodeDown(ByVal Node As TreeNode)Public Sub New()TreeViewF = New TreeViewForm(New Size(DropDownWidth, DropDownHeight))m_TreeViewHost = New ToolStripControlHost(TreeViewF)m_DropDown = New ToolStripDropDown()With m_DropDown.AutoSize = False.Width = Me.Width.Height = 113.Items.Add(m_TreeViewHost)End WithEnd SubPrivate Sub TreeView_ChangeSize(ByVal NewSize As System.Drawing.Size) Handles TreeViewF.ChangeSizeIf NewSize.Width < Me.Width Then NewSize.Width = Me.WidthIf NewSize.Height < 113 Then NewSize.Height = 113m_DropDown.Width = NewSize.Widthm_DropDown.Height = NewSize.Heightm_TreeViewHost.Size = New Size(NewSize.Width - 2, NewSize.Height - 5)End SubProtected Overrides Sub WndProc(ByRef m As System.Windows.Forms.Message)If (m.Msg = WM_LBUTTONDBLCLK Or m.Msg = WM_LBUTTONDOWN) ThenShowDropDown()ReturnEnd IfMyBase.WndProc(m)End SubPrivate Sub ShowDropDown()If Me.DroppedDown = False Thenm_DropDown.Width = Me.Widthm_DropDown.Height = 113m_TreeViewHost.Size = New Size(DropDownWidth - 2, DropDownHeight + 2)m_DropDown.Show(Me, 0, Me.Height)End IfEnd Sub⾃定义的属性和事件两个内部类end class四个按钮的功能代码要⾃⾏写,可参照我的《移动treeview内的节点》代码对不⾜之处请提出修改意见！。
LigerUI的下拉框行和树的设置（表单生成）
LigerUI的下拉框⾏和树的设置（表单⽣成）/dxnn520/article/details/8194767// ---------------------- // 【下拉树设置 -- 单选】{display: "产品", name: "Variety_Name", comboboxName: "Variety_Name2", newline: true, labelWidth: 100, width: 180, space: 30, type: "select", options: { valueFieldID: "Variety_Id", tree: { url: "../handle/Class_CustomProducts_Handle.ashx?ajaxaction=Select_Class_Variety", checkbox: false} } },// ---------------------- // 【下拉树设置 -- 多选框】{display: "产品", name: "Variety_Name", comboboxName: "Variety_Name2", newline: true, labelWidth: 100, width: 180, space: 30, type: "select", options: { valueFieldID: "Variety_Id", tree: { url: "../handle/Class_CustomProducts_Handle.ashx?ajaxaction=Select_Class_Variety", checkbox: True} } },// ---------------------- // 【下拉⾏设置】{display: "产品", name: "Variety_Name", comboboxName: "Variety_Name2", newline: true, labelWidth: 100, width: 180, space: 30, type: "select", options: { valueFieldID: "Variety_Id", url: "../handle/Class_CustomProducts_Handle.ashx?ajaxaction=Select_Class_Variety", checkbox: false } },// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% // 【下拉弹出选择窗⼝】// ---------【1】{display: "产品名称", name: "ProductId", comboboxName: "ProductId2", newline: true, labelWidth: 100, width: 150, space: 30, type: "select", option: { } },// --------------- 注意：【option: { }】选项//------【2 - 放在Form⾯】 -[设置下拉框的数据关联]$.ligerui.get("ProductId2").set('onBeforeOpen', f_selectContact)//------【3 - 放在body后⾯】<div id="productdetail" style="display:none;"> <%--【弹出产品选择窗⼝】--%><div class="searchbox"><form class="l-form"><table><tr><td>助记码：</td><td style="width:155px"><input type="text" id="helpcodetext"/></td><td ><a href="javascript:void(0)" class="l-button" style="width:100px" onclick='GetClassProduct()'>查询</a></td><td> </td><td><a href="javascript:void(0)" class="l-button" style="width:100px" onclick='GetClassProductAll()'>全部显⽰</a></td></tr></table></form></div><div id="productgrid" style="margin:0px;"></div></div>//------【4】// #region ===========================================================【弹出选择产品js函数 - 放在<scripttype="text/javascript">下⾯】var productdetail = null;// 【弹出产品选择窗⼝】function f_selectContact(){if (productdetail) {productdetail.show();}else {productdetail = .ligerDialog.open ({ target: $("#productdetail"), width: 624, height: 465, top: 15, title: "选择产品", buttons: [ { text: '选择', onclick: function () { selectproduct(); } }, { text: '取消', onclick: function () { productdetail.hide(); } } ] }); } return false; } // 【将选择的产品赋值到选择框】 function selectproduct() { var selected = productgrid.getSelected(); if (selected) {$("#Product_Name2").val(selected.Product_Name) $("#Product_Name1").val(selected.Product_Id) productdetail.hide(); } else { LG.tip('请选择⾏!'); } } // 【产品助记码查询事件】 function GetClassProduct() { var helpcode = $("#helpcodetext").val(); // if (helpcode == "") return; productgrid.set('url', rootPath + 'handle/Class_CustomProducts_Handle.ashx?ajaxaction=Get_Class_Product&HelpCode=' + helpcode); } // 【全部查询事件】 function GetClassProductAll() { var helpcode = "SelectAll"; // if (helpcode == "") return; productgrid.set('url', rootPath + 'handle/Class_CustomProducts_Handle.ashx?ajaxaction=Get_Class_Product&HelpCode=' + helpcode); } // 【产品选择表格设置】("#helpcodetext").ligerTextBox({ width: 150 });var productgrid = $("#productgrid").ligerGrid({columns: [{ display: "产品名称", name: "Product_Name", width: 200, type: "text", align: "left" },{ display: "助记码", name: "HelpCode", width: 150, type: "textarea", align: "left" }, //【助记码-1】{display: "产品描述", name: "Remark", width: 400, type: "textarea", align: "left" }],// ---------------------------------------- // 双击选择代码 = 【开始】onDblClickRow: function (data, rowindex, rowobj) {selectproduct();},// ---------------------------------------- // 双击选择代码 = 【结束】dataAction: 'local', pageSize: 20,url: rootPath + 'handle/Class_CustomProducts_Handle.ashx?ajaxaction=Get_Class_Product&HelpCode=' + 'SelectAll', sortName: 'Sort',tree: { columnName: 'Product_Name' },width: '600', height: '370', heightDiff: -10, checkbox: false});//#endregionLoading [MathJax]/jax/element/mml/optable/BasicLatin.js。
combotree树形下拉框
Combotree组合树形下拉框代码：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>combotree组合树形下拉框</title><link rel="stylesheet" type="text/css"href="css/themes/default/easyui.css" /><script type="text/javascript"src="js/jquery.easyui.min.js"></script></head><body><form id="form" name="form" action="" method="post"><input type="hidden" id="query_ddtree" name="query_ddtree"value="${query_ddtree}"/><div><table border="0" cellpadding="0" cellspacing="0"><tr><th>combotree：</th><td><input id="ddtree" name="ddtree" class="gray" value="${query_ddtree}"/></td></tr></table></div></form></body></html><script type="text/javascript">$('#ddtree').combotree({width:200,url :'getComboTreeData.do',checkbox :true,multiple :true,onSelect :function(node){var tree = $(this).tree;isLeaf = tree('isLeaf', node.target);}});</script>publicvoid getComboTreeData(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws IOException{response.setCharacterEncoding("UTF-8");String sign = request.getParameter("closed");if (sign != null&& (sign.equals("true") ||sign.equals("false"))) {closed = Boolean.parseBoolean(sign);}comboTrees = initkkTrees();List<ComboTree> parents = findByCondition(0);StringBufferjson = new StringBuffer();buildJSON(parents, json);response.getWriter().print(json.toString());}private List<ComboTree>initkkTrees(){List<ComboTree> list = new ArrayList<ComboTree>();try{List<ComboTreeVo>ls = this.daoService.getComboTree();for(int i=0; i<ls.size();i++){ComboTreect= new ComboTree(ls.get(i).getId(), ls.get(i).getName(), ls.get(i).getParentId());list.add(ct);}}catch(DaoException e){e.printStackTrace();}return list;}privatevoid buildJSON(List<ComboTree>comboTrees, StringBufferjson){json.append("[");if(comboTrees!= null&&comboTrees.size() > 0){ for(int i = 0; i <comboTrees.size(); i++ ){ ComboTreect = comboTrees.get(i);json.append("{");json.append("\"id\"");json.append(":");json.append("\"");json.append(ct.getId());json.append("\"");json.append(",");json.append("\"text\"");json.append(":");json.append("\"");json.append(ct.getName());json.append("\"");if(ct.getId()==-2){json.append(",");json.append("\"selected\"");json.append(":");json.append("\"true\"");}List<ComboTree> children =findByCondition(ct.getId());if(children != null&&children.size() > 0){if(!closed){json.append(",");json.append("\"state\"");json.append(":");json.append("\"closed\"");}json.append(",");json.append("\"children\"");json.append(":");buildJSON(children, json);}json.append("}");if(i != keyKindTrees.size() - 1){json.append(",");}}}json.append("]");}private List<ComboTree>findByCondition(int parent){ List<ComboTree> result = new ArrayList<ComboTree>();for(ComboTreevo : comboTrees){if(parent == vo.getParent()){result.add(vo);}}return result;}。
手把手教学~基于element封装tree树状下拉框
⼿把⼿教学~基于element封装tree树状下拉框1.组件调⽤代码<template><div id="app"><h1>{{`基于Element-UI组件改造的树形选择器`}}:</h1><!-- 调⽤树形下拉框组件 --><!-- 下拉树 --><selectbutton:props="props":options="optionData":value="valueId":clearable="isClearable":accordion="isAccordion"@getValue="getValue($event)"height="200"></selectbutton>ID为：{{valueId}}</div></template>复制代码调⽤组件的数据<script>import SelectTree from "./components/treeSelect.vue";export default {name: "app",components: {SelectTree},data() {return {isClearable: true, // 可清空（可选）isAccordion: true, // 可收起（可选）valueId: 1, // 初始ID（可选）props: {// 配置项（必选）value: "id",label: "name",children: "children"// disabled:true},// 选项列表（必选）list: [{ id: 1, parentId: 0, name: "⼀级菜单A", rank: 1 },{ id: 2, parentId: 0, name: "⼀级菜单B", rank: 1 },{ id: 3, parentId: 0, name: "⼀级菜单C", rank: 1 },{ id: 4, parentId: 1, name: "⼆级菜单A-A", rank: 2 },{ id: 5, parentId: 1, name: "⼆级菜单A-B", rank: 2 },{ id: 6, parentId: 2, name: "⼆级菜单B-A", rank: 2 },{ id: 7, parentId: 4, name: "三级菜单A-A-A", rank: 3 },{ id: 8, parentId: 7, name: "四级菜单A-A-A-A", rank: 4 },{ id: 9, parentId: 0, name: "⼀级菜单C", rank: 1 },{ id: 10, parentId: 0, name: "⼀级菜单end", rank: 1 }],};},computed: {/* 转树形数据 */optionData() {let cloneData = JSON.parse(JSON.stringify(this.list)); // 对源数据深度克隆return cloneData.filter(father => {// 循环所有项，并添加children属性let branchArr = cloneData.filter(child => father.id == child.parentId); // 返回每⼀项的⼦级数组branchArr.length > 0 ? (father.children = branchArr) : ""; //给⽗级添加⼀个children属性，并赋值return father.parentId == 0; //返回第⼀层});}},methods: {// 取值getValue(value) {this.valueId = value;console.log(this.valueId);}}};</script>复制代码2.组件封装<template><el-select :value="valueTitle" :clearable="clearable" @clear="clearHandle" ref="treeSelect"> <el-inputclass="selectInput":placeholder="placeholder"v-model="filterText"></el-input><el-option :value="valueTitle" :label="valueTitle" class="options"><el-tree id="tree-option"ref="selectTree":accordion="accordion":data="options":props="props":node-key="props.value":default-expanded-keys="defaultExpandedKey":filter-node-method="filterNode"@node-click="handleNodeClick"></el-tree></el-option></el-select></template>复制代码<script>export default {name: "el-tree-select",props:{/* 配置项 */props:{type: Object,default:()=>{return {value:'id', // ID字段名label: 'title', // 显⽰名称children: 'children' // ⼦级字段名}}},/* 选项列表数据(树形结构的对象数组) */options:{type: Array,default: ()=>{ return [] }},/* 初始值 */value:{type: Number,default: ()=>{ return null }},/* 可清空选项 */clearable:{type:Boolean,default:()=>{ return true }},/* ⾃动收起 */accordion:{type:Boolean,default:()=>{ return false }},placeholder:{type:String,default:()=>{return "检索关键字"}}},data() {return {filterText: '',valueId:this.value, // 初始值valueTitle:'',defaultExpandedKey:[]}},mounted(){this.initHandle()},methods: {// 初始化值initHandle(){if(this.valueId){this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[bel] // 初始化显⽰ this.$refs.selectTree.setCurrentKey(this.valueId) // 设置默认选中this.defaultExpandedKey = [this.valueId] // 设置默认展开}this.initScroll()},// 初始化滚动条initScroll(){this.$nextTick(()=>{let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'scrollBar.forEach(ele => ele.style.width = 0)})},// 切换选项handleNodeClick(node){this.valueTitle = node[bel]this.valueId = node[this.props.value]this.$emit('getValue',this.valueId)this.defaultExpandedKey = []if(!node.children || !node.children.length) { //补录选择完选项弹框不能收起this.$refs.treeSelect.blur()}},// 清除选中clearHandle(){this.valueTitle = ''this.valueId = nullthis.defaultExpandedKey = []this.clearSelected()this.$emit('getValue',null)},/* 清空选中样式 */clearSelected(){let allNode = document.querySelectorAll('#tree-option .el-tree-node')allNode.forEach((element)=>element.classList.remove('is-current'))},filterNode(value, data) {if (!value) return true;return .indexOf(value) !== -1;}},watch: {value(){this.valueId = this.valuethis.initHandle()},filterText(val) {this.$refs.selectTree.filter(val);}},};</script>复制代码3.样式修改<!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.el-scrollbar .el-scrollbar__view .el-select-dropdown__item{height: auto;max-height: 274px;padding: 0;overflow: hidden;overflow-y: auto;}.el-select-dropdown__item.selected{font-weight: normal;}ul li >>>.el-tree .el-tree-node__content{height:auto;padding: 0 20px;}.el-tree-node__label{font-weight: normal;}.el-tree >>>.is-current .el-tree-node__label{color: #409EFF;font-weight: 700;}.el-tree >>>.is-current .el-tree-node__children .el-tree-node__label{ color:#606266;font-weight: normal;}.selectInput{padding: 0 5px;box-sizing: border-box;}</style>。
iview实现selecttree树形下拉框的示例代码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
html部分
<Tree :data="treeData" ref="tree" :render="renderContent"></Tree>
数据部分
rt const treeData= [ { title: 'parent 1', expand: true, selected: true, value: '1', children: [ { title: 'parent 1-1', expand: true, value: '11', children: [ { value: '111', title: 'leaf 1-1-1' }, { value: '112', title: 'leaf 1-1-2' } ] }, { title: 'parent 1-2', value: '12', expand: true, children: [ { value: '121', title: 'leaf 1-2-1' }, { value: '122', title: 'leaf 1-2-2' } ] } ] }
];
js部分
// 子节点的option renderContent (h, { root, node, data }) {
return h('Option', { style: { display: 'inline-block', margin: '0' }, props:{ value: data.value }
一个很酷的EXT树形下拉框
一个很酷的EXT树形下拉框，本地服务器测试通过。
Ext.form.TreeField = Ext.extend(Ext.form.TriggerField, { /*** @cfg {Boolean} readOnly* 设置为只读状态**/readOnly : true ,/*** @cfg {String} displayField* 用于显示数据的字段名**/displayField : 'text',/*** @cfg {String} valueField* 用于保存真实数据的字段名*/valueField : null,/*** @cfg {String} hiddenName* 保存真实数据的隐藏域名*/hiddenName : null,/*** @cfg {Integer} listWidth* 下拉框的宽度*/listWidth : null,/*** @cfg {Integer} minListWidth* 下拉框最小宽度*/minListWidth : 50,/*** @cfg {Integer} listHeight* 下拉框高度*/listHeight : null,/*** @cfg {Integer} minListHeight* 下拉框最小高度*/minListHeight : 50,/*** @cfg {String} dataUrl* 数据地址*/dataUrl : null,/*** @cfg {Ext.tree.TreePanel} tree* 下拉框中的树*/tree : null,/*** @cfg {String} value* 默认值*/value : null,/*** @cfg {String} displayValue* 用于显示的默认值*/displayValue : null,/*** @cfg {Object} baseParams* 向后台传递的参数集合*/baseParams : {},/*** @cfg {Object} treeRootConfig* 树根节点的配置参数*/treeRootConfig : {id : ' ',text : 'please select...',draggable:false},/*** @cfg {String/Object} autoCreate* A DomHelper element spec, or true for a default element spec (defaults to * {tag: "input", type: "text", size: "24", autocomplete: "off"})*/defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},initComponent : function(){Ext.form.TreeField.superclass.initComponent.call(this);this.addEvents('select','expand','collapse','beforeselect');},initList : function(){if(!this.list){var cls = 'x-treefield-list';this.list = new yer({shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false });var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);this.list.setWidth(lw);this.list.swallowEvent('mousewheel');this.innerList = this.list.createChild({cls:cls+'-inner'});this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));this.innerList.setHeight(this.listHeight || this.minListHeight);if(!this.tree){this.tree = this.createTree(this.innerList);}this.tree.on('click',this.select,this);this.tree.render();}},onRender : function(ct, position){Ext.form.TreeField.superclass.onRender.call(this, ct, position);if(this.hiddenName){this.hiddenField = this.el.insertSibling({tag:'input',type:'hidden',name: this.hiddenName,id:(this.hiddenId||this.hiddenName)},'before', true);this.hiddenField.value =this.hiddenValue !== undefined ? this.hiddenV alue :this.value !== undefined ? this.value : '';this.el.dom.removeAttribute('name');}if(Ext.isGecko){this.el.dom.setAttribute('autocomplete', 'off');}this.initList();},select : function(node){if(this.fireEvent('beforeselect', node, this)!= false){this.onSelect(node);this.fireEvent('select', this, node);}},onSelect:function(node){this.setValue(node);this.collapse();},createTree:function(el){var Tree = Ext.tree;var tree = new Tree.TreePanel({el:el,autoScroll:true,animate:true,containerScroll: true,loader: new Tree.TreeLoader({dataUrl : this.dataUrl,baseParams : this.baseParams})});var root = new Tree.AsyncTreeNode(this.treeRootConfig);tree.setRootNode(root);return tree;},getValue : function(){if(this.valueField){return typeof this.value != 'undefined' ? this.value : '';}else{return Ext.form.TreeField.superclass.getValue.call(this);}},setValue : function(node){var text,value;if(node && typeof node == 'object'){text = node[this.displayField];value = node[this.valueField || this.displayField];}else{text = node;value = node;}if(this.hiddenField){this.hiddenField.value = value;}Ext.form.TreeField.superclass.setValue.call(this, text);this.value = value;},onResize: function(w, h){Ext.form.TreeField.superclass.onResize.apply(this, arguments);if(this.list && this.listWidth == null){var lw = Math.max(w, this.minListWidth);this.list.setWidth(lw);this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));}},validateBlur : function(){return !this.list || !this.list.isVisible();},onDestroy : function(){if(this.list){this.list.destroy();}if(this.wrap){this.wrap.remove();}Ext.form.TreeField.superclass.onDestroy.call(this);},collapseIf : function(e){if(!e.within(this.wrap) && !e.within(this.list)){this.collapse();}},collapse : function(){if(!this.isExpanded()){return;}this.list.hide();Ext.getDoc().un('mousewheel', this.collapseIf, this);Ext.getDoc().un('mousedown', this.collapseIf, this);this.fireEvent('collapse', this);},expand : function(){if(this.isExpanded() || !this.hasFocus){return;}this.onExpand();this.list.alignTo(this.wrap, this.listAlign);this.list.show();Ext.getDoc().on('mousewheel', this.collapseIf, this);Ext.getDoc().on('mousedown', this.collapseIf, this);this.fireEvent('expand', this);},onExpand : function(){var doc = Ext.getDoc();this.on('click',function(){alert(111)},this);},isExpanded : function(){return this.list && this.list.isVisible();},onTriggerClick : function(){if(this.disabled){return;}if(this.isExpanded()){this.collapse();}else {this.onFocus({});this.expand();}this.el.focus();}});Ext.reg('treeField', Ext.form.TreeField);。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jquery easy ui comboxtree应用树状下拉选择框2011-04-28 13:23:05| 分类：默认分类| 标签：|字号大中小订阅随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等，通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。
jQuery 是继prototype之后的又一个优秀的javascript框架。
它是由John Resig 于2006 年初创建的，它有助于简化JavaScript? 以及Ajax 编程。
有人使用这样的一比喻来比较prototype和jQuery：prototype 就像Java，而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。
它具有如下一些特点：1、代码简练、语义易懂、学习快速、文档丰富。
2、jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。
3、jQuery支持css1-CSS3,以及基本的xPath。
4、jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
5、可以很容易的为jQuery扩展其他功能。
6、能将JS代码和html代码完全分离，便于代码和维护和修改。
7、插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。
jQuery的设计会改变你写JavaScript代码的方式，降低你学习使用JS操作网页的复杂度，提高网页JS 开发效率，无论对于js初学者还是资深专家，jQuery都将是您的首选。
jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不同的Web应用程序中。
官方站点：/ 中文站点：/今天我们所讲的就是jquery-easy-ui，这是一个功能比较丰富的插件，提供了许多通用布局、显示组件。
如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效等。
此插件的目标就是Easy to build the ui of your web site by it!我们通常有一些数据需要用户进行选择，比如部门或类别之类的，一般情况下我们提供了一个select元素即可。
如下:这样当然可以，但如果这些数据具有层次结构特征，比如类别之间的关系，组织机构之间的关系，我们更希望能在选择时清楚我们选择的数据在层次结构上的信息。
这时我们首先肯定是树状组件，但如果能在下拉选择框中嵌入树状组件，用来代替相应的选项，这是一个很好的结果。
Jquery-easy-ui提供了这样的组件，称为comboxtree效果如下:<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../jquery-1.4.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script>function reload(){$('#cc').combotree('reload');}function setValue(){$('#cc').combotree('setValue',{id:2,text:''});}function getValue(){var val = $('#cc').combotree('getValue');alert(val);}</script></head><body><h1>ComboTree</h1><div style="margin-bottom:10px;"><a href="#" onclick="reload()">reload</a><a href="#" onclick="setValue()">setValue</a><a href="#" onclick="getValue()">getValue</a></div><span>Select:</span><select id="cc" class="easyui-combotree" url="depart.json" style="width:200px;"></select>很简单，组件的数据来源于一个depart.json文件，当然也可以来源于服务器，你可以用服务器组件(jsp,servlet之类)的返回一个相关的文件。
我们来看一个其结构信息：[{"id" : 1,"text" : "健坤集团","children" : [{"id" : 2,"text" : "清华IT","children" : []}, {"id" : 3,"text" : "北大bird","children" : []}, {"id" : 4,"text" : "后勤部","children" : []}, {"id" : 5,"text" : "科技公司","children" : [{"id" : 6,"text" : "软件实训部","children" : []}]}]}]所有，我们只要把数据从数据库或其它数据来源中取出来，递归生成对应格式的文件即可。
以下是简单的示例:package org.entites;import java.util.ArrayList;import java.util.List;public class NodeBean {static List<NodeBean> list = new ArrayList<NodeBean>();static{//模拟从数据源中取出记录封装于java对象中NodeBean node = new NodeBean(1,"健坤集团",0);NodeBean node2 = new NodeBean(2,"清华IT",1);NodeBean node3 = new NodeBean(3,"北大bird",1);NodeBean node4 = new NodeBean(4,"后勤部",1);NodeBean node5 = new NodeBean(5,"科技公司",1);NodeBean node6 = new NodeBean(6,"软件实训部",5);list.add(node);list.add(node2);list.add(node3);list.add(node4);list.add(node5);list.add(node6);}/*** [* {* text:'健坤',* children:[* {....}* ]* }* ]* @return*/static String getJsonData(){StringBuffer buffer = new StringBuffer();buffer.append("[");iterGet(list, 0, buffer);buffer.append("]");//将,\n]替换成\n]String tmp = buffer.toString();tmp = tmp.replaceAll(",\n]", "\n]");return tmp;}static int count=0;/*** 递归生成json格式的数据{id:1,text:'',children:[]}* @param args*/static void iterGet(List<NodeBean> list,int pid,StringBuffer buffer){for(NodeBean node : list){//查找所有父节点为pid的所有对象，然后拼接为json格式的数据if(node.getPid()==pid)count++;// for(int i=0;i<count;i++){// buffer.append("\t");// }buffer.append("{\"id\":"+node.getId()+",\"text\":\""+node.getText()+"\",\"children\":[");//递归iterGet(list, node.getId(), buffer);buffer.append("]},\n");count--;}}}/*** 测试* @param args*/public static void main(String[] args) {System.out.println(getJsonData());}private int id;//节点编号private String text;//节点名private int pid;//父节点编号public int getId() {return id;}public void setId(int id) {this.id = id;}public NodeBean() {super();}public NodeBean(int id, String text, int pid) {super();this.id = id;this.text = text;this.pid = pid;}public String getText() {return text;}public void setText(String text) {this.text = text;}public int getPid() {return pid;}public void setPid(int pid) {this.pid = pid;}}很简单吧！其中的一些细节，比如节点的图标显示，你可以生成对应字符串根据数据形态去确即可。