项目中用到的一个带树的下拉框
var unitCB = new Ext.form.ComboBox({// 所属单位选择框
fieldLabel : '所属单位',
resizable : true,
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
editable : false,
valueField : 'id',
displayField : 'text',
value : ' ',
maxHeight : 390,
// labelStyle : micolor,
anchor : '84%',
mode : 'local',
triggerAction : 'all',
allowBlank : false,
onSelect : Ext.emptyFn(),
emptyText : '请选择所属单位'
});
add_unitCB.tpl = '<tpl for="."><div id="' + unitCB.getId()
+ 'orgTpl" style="height:390px;width:100"><div id="'
+ unitCB.getId() + 'orgTreeDiv"></div></div></tpl>';
var orgTreeloader = new Ext.tree.TreeLoader({
url : '/stm/system/org.do?method=findOrgTree'
});
orgTreeloader.on('beforeload', function(orgTreeloader, node) {
this.baseParams.id = node.attributes.id; // set parameter
});
var orgTreeRoot = new Ext.tree.AsyncTreeNode({
id : '00',
text : '根节点'
});
var orgTree = new Ext.tree.TreePanel({
width : 210,
autoScroll : true,
containerScroll : true,
collapsible : true,
loader : orgTreeloader,
root : orgTreeRoot,
animate : false,
border : false,
rootVisible : true,
border : false
});
var org_id; // 存储所属单位的ID
// 监听下拉树的节点单击事件
orgTree.on('click', function(node) {
org_id = node.attributes.id;
unitCB.setValue(node.text);
unitCB.collapse();
});
// 默认选择总公司
unitCB.on('render', function() {
org_id = '00';
unitCB.setValue('根节点');
});
// 监听下拉框的下拉展开事件 下拉框中加入树
unitCB.on('expand', function() {
// 将UI树挂到treeDiv容器
orgTree.root.reload(); // 每次下拉都会加载数据
// orgTree.root.expand(); //只是第一次下拉会加载数据
orgTree.render(unitCB.getId() + 'orgTreeDiv');
});
分享到:
相关推荐
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框
layui组件之树形下拉框例子,看完你就会写下拉树了。不过同时还需要下载ztree的相关js和style 不过压缩包里都有呢!希望对大家有所帮助
bootstrap树控件使用树形控件在下拉框select中显示,实现树形下拉框
下拉框树控件(下拉框和树结合)下拉框树控件(下拉框和树结合)下拉框树控件(下拉框和树结合)下拉框树控件(下拉框和树结合)下拉框树控件(下拉框和树结合)下拉框树控件(下拉框和树结合)(下拉框和树结合)
下拉框实现树结构带禁用.vue
自定义开发的以树形结构显示的下拉框,基于NETFRAMWORK开发
TreeCombo,Ext TreeCombo 树形 下拉框,树形下拉框
树形下拉框样式
JQ JS javascript bootstrap 带搜索 下拉框 select
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框
下载之前请看好,不是所有都适用,只是树形下拉框的风格比较贴近bootstrap <link rel="stylesheet" type="text/css" href="easyUI/css/easyui.css"> <link rel="stylesheet" type="text/css" href="easyUI/...
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框
用层和标准控件TreeView做的下拉框树,用来选择部门或者其他需要用到树形的控件
树形下拉框.net 通过树形下拉框来显示部门或者岗位的层级关系.
在下拉框里面绑定树形显示 1、递归绑定 2、树形显示下拉框列表
树形下拉框的使用例子 方便快捷 欢迎使用 转载 分享
用C#编写的一个下拉框控件,展开后内部可以有树型结构,对应WINFORM程序特别有用.