Extjs中ComboBoxTree实现的下拉框树效果(自写)

最近涉及到的一个项目中,需要实现ComboBoxTree的效果,首先,看看效果吧……
 
在Extjs中是没有这种效果的,所以得自己写,在网络上看了看别人的资料,自己再总结了一下,修改了一下,代码如下:


代码如下:

Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, {
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);
Ext.form.ComboBox.superclass.setValue.call(this, dispText);
this.hiddenValue = code;
},
initComponent: function () {
var _this = this;
var tplRandomId = 'deptcombo_' + Math.floor(Math.random() * 1000) + this.tplId
this.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);

如此,上面所述的效果就实现了……

(0)

相关推荐

  • WinForm实现为ComboBox绑定数据源并提供下拉提示功能

    本文实例展示了WinForm实现为ComboBox绑定数据源并提供下拉提示功能,这是一个非常有实用价值的功能,具体实现方法如下: 主要功能代码如下: /// <summary> /// 为ComboBox绑定数据源并提供下拉提示 /// </summary> /// <typeparam name="T">泛型</typeparam> /// <param name="combox">ComboBox<

  • ComboBox(下拉列表框)通过url加载调用远程数据的方法

    ComboBox(下拉列表框) ComboBox(下拉列表框)常用属性: valueField: 基础数据值名称绑定到该下拉列表框.- 提交值 textField:基础数据字段名称绑定到该下拉列表框.-显示值 url:通过URL加载远程列表数据. mode:定义了当文本改变时如何读取列表数据.设置为'remote'时,下拉列表框将会从服务器加载数据.当设置为"remote"模式时,用户输入将被发送到名为'q'的HTTP请求参数到服务器检索新数据. 方法: clear:清除下拉列表框的值

  • c#构造ColorComboBox(颜色下拉框)

    复制代码 代码如下: class ColorComboBox : ComboBox    {        /// <summary>        /// 当前选中色        /// </summary>        public Color SelectedColor        {            get { return Color.FromName(this.Text); }        }        /// <summary>     

  • Ext中下拉列表ComboBox组件store数据格式用法介绍

    复制代码 代码如下: var p_years = new Ext.form.ComboBox( { fieldLabel : '统计年份', anchor : anchor_w, mode : 'remote', maxHeight:100, triggerAction : 'all', selectOnFocus : true, forceSelection : true, editable : false, //store :[['11', '2011'], ['12', '2012'],[

  • jQuery+easyui中的combobox实现下拉框特效

    1.第一种写法:Input框中显示: 复制代码 代码如下: <input id="cc" class="easyui-combobox" name="name" data-options="valueField:'value',textField:'text',data:[{'value':'1','text':'java'},{'value':'2','text':'C#'}]"/> 2. 第二种用法,在list

  • jquery插件 autoComboBox 下拉框

    问: 1.大家在做省市区下拉框联动,或者是产品分类联动,或者是部门联动等下拉框时怎么做? 是用ajaxpro.dll 还是jquery ajax呢?? 答: 是,留下继续阅读. 否,跟帖回复你的方法 结论:每次重复劳动 重复创造联动的下拉框, 累,想死!! 读完本文 您也许可以找到更好的方法来实现 无限级(理论) 的联动下拉框,也许只要10秒钟就够了. 就这样,一个自动产生联动下拉框的插件诞生了... 本插件依赖于jquery1.4.2 最低版本自行测试. 废话完毕. 代码: <div clas

  • Extjs中ComboBoxTree实现的下拉框树效果(自写)

    最近涉及到的一个项目中,需要实现ComboBoxTree的效果,首先,看看效果吧--  在Extjs中是没有这种效果的,所以得自己写,在网络上看了看别人的资料,自己再总结了一下,修改了一下,代码如下: 复制代码 代码如下: Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, { constructor: function (cfg) { cfg = cfg || {}; Ext.ux.TreeCombo.superclass.constructor.

  • jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑

    例如"报告交付方式"包含固定交付时,第二个下拉框不可编辑,反之可以编辑,具体代码如下 报告交付方式: <select class="easyui-combobox" panelHeight="auto" style="width:195px" data-options="required:true,valueField:'id',textField:'text' , onSelect:function(){ v

  • 微信小程序select下拉框实现效果

    小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉 这里为了更清楚的显示层级 就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>¥99.00</text> </view> <!--下拉框 --> <view class='list-msg2' bindtap='bi

  • MVC实现下拉框联动效果(单选)

    下拉框联动效果,我们以部门--职位为例,选择部门时,关联到该部门的职位.下拉框的写法就不多说了,详细请参照前文. 视图: 其中,dept是部门的属性,deptlist是部门下拉框的属性,job是职位的属性,joblist是职位下拉框的属性,下拉框绑定请参照前文 @using (Html.BeginForm("aaai003sch", "aaa", FormMethod.Post, new { @class = "form-horizontal",

  • jquery实现下拉框功能效果【实例代码】

    说不清楚,直接上图 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; paddin

  • asp.net中js+jquery添加下拉框值和后台获取示例

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type

  • JavaScript Ajax Json实现上下级下拉框联动效果实例代码

    最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是1:N 复制代码 代码如下: <div class="forntName">部门</div> <div class="inpBox"> <select  name="department" id="department"  onchange="change();" style="width:

  • JQuery打造省市下拉框联动效果

    做联动效果,若是用纯JavaScript来做,往往需要辅助页面保存需要刷新的结果集,然后渲染到原页面.考虑将需要动态刷新的内容自动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后面的下拉框全部清除,然后重新拼接刷新的内容.用JQuery实现比较容易,代码以省市联动效果为例实现. JSP页面代码如下: 复制代码 代码如下: <li id="base"> <p>生源地:</p> <label> <select id=&

  • 基于BootStrap multiselect.js实现的下拉框联动效果

    背景:当option特别多时,一般的下拉框选择起来就有点力不从心了,所以使用multiselect是个很好的选择,可以通过输入文字来选择选项很方便,但是有一个需要下拉框联动,网上找了半天才找到解决方法,在此分享一下 1.先引入 <script src="~/Assets/js/bootstrap-multiselect.min.js"></script> <link href="~/Assets/css/bootstrap-multiselect

随机推荐