combobox下拉动态树
主要自定义js文件
/**
* 下拉树
*/
Ext.define('TeaComboTreeBox', {
extend: 'Ext.form.field.ComboBox',
multiSelect: false, //控制单选,多选
fieldLabel: '责 任 班 组',
emptyText: '--请选择班组--',
displayField: 'text',
valueField: 'text',
createPicker: function () {
var me = this;
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'getFirstBm.action'
},
folderSort: false,
autoLoad:true
});
store.load();
var picker = Ext.create('Ext.tree.Panel', {
store: store,
listeners: {/*
afteritemexpand:function(node,index,item,eOpts){
node.removeAll();
console.log(node.raw.code);
Ext.Ajax.request({
url:'getSecondData.action',
params:{
code:node.raw.code
},
success:function(responce){
console.log(responce.responseText);
node.appendChild(eval("("+responce.responseText+")"));
}
})
}
*/},
rootVisible: false,
selModel: {
mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
},
floating: true,
hidden: true,
focusOnToFront: false
});
me.mon(picker, {
itemclick: me.onItemClick,
refresh: me.onListRefresh,
scope: me
});
me.mon(picker.getSelectionModel(), {
beforeselect: me.onBeforeSelect,
beforedeselect: me.onBeforeDeselect,
selectionchange: me.onListSelectionChange,
scope: me
});
this.picker = picker;
return picker;
}
});
在其他js中调用自定义动态树代码
var combotree = Ext.create('TeaComboTreeBox', {
multiSelect: true,//可实现多选
labelWidth: 70,
id: 'wz_zrbz',
anchor: '96%'
});
后台:在service层代码
@Override
public List<Map<String, Object>> getFirstBm() {
List<Map<String, Object>> list = wzdjDao.getFirstBm();
getNextLevels(list);
return list;
}
//递归调用查找所有孩子
private void getNextLevels(List<Map<String, Object>> tempList) {
for (Map<String, Object> map : tempList) {
if (map.get("leaf").equals("false")) {
List<Map<String, Object>> nextData = wzdjDao.getSecondData((String)map.get("code"));
getNextLevels(nextData);
map.put("children",nextData);
}
}
}
首先,先获取父层数据
List<Map<String, Object>> list = wzdjDao.getFirstBm();
然后,根据递归将孩子数据得到传到前台。
效果图如下