web前端|js教程
ComboBoxTree,下拉框树
web前端-js教程
最近涉及到的一个项目中，需要实现ComboBoxTree的效果，首先，看看效果吧……
在Extjs中是没有这种效果的，所以得自己写，在网络上看了看别人的资料，自己再总结了一下，修改了一下，代码如下：
在线互动教学网站源码,平板能下载vscode,ubuntu那么难用,tomcat 多条dns,sqlite3更新内容,山东爬虫饲养箱厂家直销,php fpm 9000,丽水seo推广商家,织梦服务行业手机网站模板,随机网页看片,另类网站模板lzw
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.tplId
this.tpl = "
"
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(eforeselect, _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类库
新卡购源码搭建系统,vscode如何编译ros,ubuntu快照备份,tomcat库怎么添加,爬虫寄,php rrd,贵阳seo网站推广技巧,asp网站在线客服,中文 wordpres模板lzw
其中，login.js的代码如下：
淘宝互刷源码 php,vscode界面崩溃,官网下载ubuntu的办法,tomcat 断开连接,sqlite速度影响什么,c winform插件框架,前端框架做了什么软件,爬虫语言什么好,php单文件,seo优化收费软件seo顾问,内网视频播放网站源码,去除 网页 代码,企业新闻网站模板,mysql管理系统,程序前端主要功能模块lzw
/* File Created: 五月 27, */
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"///
},
{
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, ext:呼和浩特市国土资源局,children:[" +
"{id:150101,leaf:true,children:null, ext:市辖区国土资源局}," +
"{id:150102,leaf:true,children:null, ext:新城区国土资源局}," +
"{id:150103,leaf:true,children:null, ext:回民区国土资源局}," +
"{id:150104,leaf:true,children:null, ext:玉泉区国土资源局}," +
"{id:150105,leaf:true,children:null, ext:赛罕区国土资源局}," +
"{id:150121,leaf:true,children:null, ext:土默特左旗国土资源局}," +
"{id:150122,leaf:true,children:null, ext:托克托县国土资源局}," +
"{id:150123,leaf:true,children:null, ext:和林格尔县国土资源局}," +
"{id:150124,leaf:true,children:null, ext:清水河县国土资源局}," +
"{id:150125,leaf:true,children:null, ext:武川县国土资源局}" +
"]}," +
"{id:150200,leaf:false,expanded:false, ext:包头市国土资源局,children:[" +
"{id:150201,leaf:true,children:null, ext:市辖区国土资源局}," +
"{id:150202,leaf:true,children:null, ext:东河区国土资源局}," +
"{id:150203,leaf:true,children:null, ext:昆都仑区国土资源局}," +
"{id:150204,leaf:true,children:null, ext:青山区国土资源局}," +
"{id:150205,leaf:true,children:null, ext:石拐区国土资源局}," +
"{id:150206,leaf:true,children:null, ext:白云矿区国土资源局}," +
"{id:150207,leaf:true,children:null, ext:九原区国土资源局}," +
"{id:150221,leaf:true,children:null, ext:土默特右旗国土资源局}," +
"{id:150222,leaf:true,children:null, ext:固阳县国土资源局}," +
"{id:150223,leaf:true,children:null, ext:达尔罕茂明安联合旗国土资源局}" +
"]}," +
"{id:150300,leaf:false,expanded:false, ext:乌海市国土资源局,children:[" +
"{id:150301,leaf:true,children:null, ext:市辖区国土资源局}," +
"{id:150302,leaf:true,children:null, ext:海勃湾区国土资源局}," +
"{id:150303,leaf:true,children:null, ext:海南区国土资源局}," +
"{id:150304,leaf:true,children:null, ext:乌达区国土资源局}" +
"]}," +
"{id:150400,leaf:false,expanded:false, ext:赤峰市国土资源局,children:[" +
"{id:150401,leaf:true,children:null, ext:市辖区国土资源局}," +
"{id:150402,leaf:true,children:null, ext:红山区国土资源局}," +
"{id:150403,leaf:true,children:null, ext:元宝山区国土资源局}," +
"{id:150404,leaf:true,children:null, ext:松山区国土资源局}," +
"{id:150421,leaf:true,children:null, ext:阿鲁科尔沁旗国土资源局}," +
"{id:150422,leaf:true,children:null, ext:巴林左旗国土资源局}," +
"{id:150423,leaf:true,children:null, ext:巴林右旗国土资源局}," +
"{id:150424,leaf:true,children:null, ext:林西县国土资源局}," +
"{id:150425,leaf:true,children:null, ext:克什克腾旗国土资源局}," +
"{id:150426,leaf:true,children:null, ext:翁牛特旗国土资源局}," +
"{id:150428,leaf:true,children:null, ext:喀喇沁旗国土资源局}," +
"{id:150429,leaf:true,children:null, ext:宁城县国土资源局}," +
"{id:150430,leaf:true,children:null, ext:敖汉旗国土资源局}" +
"]}," +
"{id:150500,leaf:false,expanded:false, ext:通辽市国土资源局,children:[" +
"{id:150501,leaf:true,children:null, ext:市辖区国土资源局}," +
"{id:150502,leaf:true,children:null, ext:科尔沁区国土资源局}," +
"{id:150521,leaf:true,children:null, ext:科尔沁左翼中旗国土资源局}," +
"{id:150522,leaf:true,children:null, ext:科尔沁左翼后旗国土资源局}," +
"{id:150523,leaf:true,children:null, ext:开鲁县国土资源局}," +
"{id:150524,leaf:true,children:null, ext:库伦旗国土资源局}," +
"{id:150525,leaf:true,children:null, ext:奈曼旗国土资源局}," +
"{id:150526,leaf:true,children:null, ext:扎鲁特旗国土资源局}," +
"{id:150581,leaf:true,children:null, ext:霍林郭勒市国土资源局}" +
"]}," +
"{id:150600,leaf:false,expanded:false, ext:鄂尔多斯市国土资源局,children:[" +
"{id:150602,leaf:true,children:null, ext:东胜区国土资源局}," +
"{id:150621,leaf:true,children:null, ext:达拉特旗国土资源局}," +
"{id:150622,leaf:true,children:null, ext:准格尔旗国土资源局}," +
"{id:150623,leaf:true,children:null, ext:鄂托克前旗国土资源局}," +
"{id:150624,leaf:true,children:null, ext:鄂托克旗国土资源局}," +
"{id:150625,leaf:true,children:null, ext:杭锦旗国土资源局}," +
"{id:150626,leaf:true,children:null, ext:乌审旗国土资源局}," +
"{id:150627,leaf:true,children:null, ext:伊金霍洛旗国土资源局}" +
"]}," +
"{id:150700,leaf:false,expanded:false, ext:呼伦贝尔市国土资源局,children:[" +
"{id:150701,leaf:true,children:null, ext:市辖区国土资源局}," +
"{id:150702,leaf:true,children:null, ext:海拉尔区国土资源局}," +
"{id:150721,leaf:true,children:null, ext:阿荣旗国土资源局}," +
"{id:150722,leaf:true,children:null, ext:莫力达瓦达斡尔族自治旗国土资源局}," +
"{id:150723,leaf:true,children:null, ext:鄂伦春自治旗国土资源局}," +
"{id:150724,leaf:true,children:null, ext:鄂温克族自治旗国土资源局}," +
"{id:150725,leaf:true,children:null, ext:陈巴尔虎旗国土资源局}," +
"{id:150726,leaf:true,children:null, ext:新巴尔虎左旗国土资源局}," +
"{id:150727,leaf:true,children:null, ext:新巴尔虎右旗国土资源局}," +
"{id:150781,leaf:true,children:null, ext:满洲里市国土资源局}," +
"{id:150782,leaf:true,children:null, ext:牙克石市国土资源局}," +
"{id:150783,leaf:true,children:null, ext:扎兰屯市国土资源局}," +
"{id:150784,leaf:true,children:null, ext:额尔古纳市国土资源局}," +
"{id:150785,leaf:true,children:null, ext:根河市国土资源局}" +
"]}," +
"{id:150800,leaf:false,expanded:false, ext:巴彦淖尔市国土资源局,children:[" +
"{id:150801,leaf:true,children:null, ext:市辖区国土资源局}," +
"{id:150802,leaf:true,children:null, ext:临河区国土资源局}," +
"{id:150821,leaf:true,children:null, ext:五原县国土资源局}," +
"{id:150822,leaf:true,children:null, ext:磴口县国土资源局}," +
"{id:150823,leaf:true,children:null, ext:乌拉特前旗国土资源局}," +
"{id:150824,leaf:true,children:null, ext:乌拉特中旗国土资源局}," +
"{id:150825,leaf:true,children:null, ext:乌拉特后旗国土资源局}," +
"{id:150826,leaf:true,children:null, ext:杭锦后旗国土资源局}" +
"]}," +
"{id:150900,leaf:false,expanded:false, ext:乌兰察布市国土资源局,children:[" +
"{id:150901,leaf:true,children:null, ext:市辖区国土资源局}," +
"{id:150902,leaf:true,children:null, ext:集宁区国土资源局}," +
"{id:150921,leaf:true,children:null, ext:卓资县国土资源局}," +
"{id:150922,leaf:true,children:null, ext:化德县国土资源局}," +
"{id:150923,leaf:true,children:null, ext:商都县国土资源局}," +
"{id:150924,leaf:true,children:null, ext:兴和县国土资源局}," +
"{id:150925,leaf:true,children:null, ext:凉城县国土资源局}," +
"{id:150926,leaf:true,children:null, ext:察哈尔右翼前旗国土资源局}," +
"{id:150927,leaf:true,children:null, ext:察哈尔右翼中旗国土资源局}," +
"{id:150928,leaf:true,children:null, ext:察哈尔右翼后旗国土资源局}," +
"{id:150929,leaf:true,children:null, ext:四子王旗国土资源局}," +
"{id:150981,leaf:true,children:null, ext:丰镇市国土资源局}" +
"]}," +
"{id:152200,leaf:false,expanded:false, ext:兴安盟国土资源局,children:[" +
"{id:152201,leaf:true,children:null, ext:乌兰浩特市国土资源局}," +
"{id:152202,leaf:true,children:null, ext:阿尔山市国土资源局}," +
"{id:152221,leaf:true,children:null, ext:科尔沁右翼前旗国土资源局}," +
"{id:152222,leaf:true,children:null, ext:科尔沁右翼中旗国土资源局}," +
"{id:152223,leaf:true,children:null, ext:扎赉特旗国土资源局}," +
"{id:152224,leaf:true,children:null, ext:突泉县国土资源局}" +
"]}," +
"{id:152500,leaf:false,expanded:false, ext:锡林郭勒盟国土资源局,children:[" +
"{id:152501,leaf:true,children:null, ext:二连浩特市国土资源局}," +
"{id:152502,leaf:true,children:null, ext:锡林浩特市国土资源局}," +
"{id:152522,leaf:true,children:null, ext:阿巴嘎旗国土资源局}," +
"{id:152523,leaf:true,children:null, ext:苏尼特左旗国土资源局}," +
"{id:152524,leaf:true,children:null, ext:苏尼特右旗国土资源局}," +
"{id:152525,leaf:true,children:null, ext:东乌珠穆沁旗国土资源局}," +
"{id:152526,leaf:true,children:null, ext:西乌珠穆沁旗国土资源局}," +
"{id:152527,leaf:true,children:null, ext:太仆寺旗国土资源局}," +
"{id:152528,leaf:true,children:null, ext:镶黄旗国土资源局}," +
"{id:152529,leaf:true,children:null, ext:正镶白旗国土资源局}," +
"{id:152530,leaf:true,children:null, ext:正蓝旗国土资源局}," +
"{id:152531,leaf:true,children:null, ext:多伦县国土资源局}" +
"]}," +
"{id:152900,leaf:false,expanded:false, ext:阿拉善盟国土资源局,children:[" +
"{id:152921,leaf:true,children:null, ext:阿拉善左旗国土资源局}," +
"{id:152922,leaf:true,children:null, ext:阿拉善右旗国土资源局}," +
"{id:152923,leaf:true,children:null, ext:额济纳旗国土资源局}" +
"]}" +
"]";
context.Response.Write(strTreeNode);
如此，上面所述的效果就实现了……
