文章作为最近代码的记录,并未整理,同时也不排除有任何bug和效率问题,效果图:
前台js
function industyTree(){
if(industryWindow){
industryWindow.show();
}
var columnHeaders = [{xtype: 'treecolumn',width:"100%",dataIndex: 'name'}];
var industrystore = Ext.create('Ext.data.TreeStore', {
fields: ['id','name','leaf'],
autoLoad : true,
proxy : {
type : 'ajax',
url : basePath + "/vision/companyCreditAction?act=getTreeData_INDUSTRY",
reader : {
type : 'json'
},
//传参
extraParams : {
id : ''
}
},
root : {
name : '行业',
expanded : true
},
listeners : {
'beforeexpand' : function(node,eOpts){
//点击父亲节点的菜单会将节点的id通过ajax请求,将到后台
this.proxy.extraParams.id = node.raw.id;
}
}
});
var tree = Ext.create('Ext.tree.Panel', {
columns:columnHeaders,
store: industrystore,
rootVisible: true,
useArrows: true,
frame: true,
autoWidth: true,
autoHeight: true
,viewConfig:{
onCheckboxChange: function(e, t) {
this.setLoading(true, Ext.getBody());
var item = e.getTarget(this.getItemSelector(), this.getTargetEl()), record;
if (item) {
record = this.getRecord(item);
var check = !record.get('checked');
record.set('checked', check);
if (check) {
//将当前的选择模式带入到后台
record.store.proxy.extraParams.checkStatus = check;
record.expand();
record.expandChildren();
record.bubble(function(parentNode) { //处理父级节点的选择状态
if(parentNode.raw.checked==null || parentNode.raw.checked==undefined){
return;
}
var flag = true; //标记选择状态
parentNode.eachChild(function(childnode) {
if(!childnode.get('checked')){
flag = false;
}
});
if(!flag){
return;
}
else{
parentNode.set('checked', true);
}
});
record.cascadeBy(function(node) {
node.set('checked', true);
});
record.store.proxy.extraParams.checkStatus = null;
} else {
// record.collapse();
// record.collapseChildren();
record.cascadeBy(function(node) {
node.set('checked', false);
});
record.bubble(function(parentNode) {
if(parentNode.raw.checked==null || parentNode.raw.checked==undefined){
return;
}
var flag = false; //标记选择状态
parentNode.eachChild(function(childnode) {
if(!childnode.get('checked')){
flag = true;
}
});
if(flag){
parentNode.set('checked', false);
}
});
}
}
this.setLoading(false, Ext.getBody());
}
}
});
var industryWindow = Ext.create('Ext.window.Window', {
title: '请选择行业',
height: 430,
width: 360,
//modal : true,
constrain : true,
layout: 'fit',
items: [
tree
],
buttons: [
]
});
industryWindow.show();
}
================后台java
action:
private void getTreeData_INDUSTRY(HttpServletRequest req,HttpServletResponse resp){
String pid = req.getParameter("id");
String checkStatus = req.getParameter("checkStatus");
Map<String,String> paramsMap = new HashMap<String,String>();
paramsMap.put("pid", pid);
paramsMap.put("checkStatus", checkStatus);
List<Map<String, String>> list = new ArrayList<Map<String, String>>();
try {
list.addAll(companyCreditQueryService.getTreeData_INDUSTRY(paramsMap));
} catch (Exception e) {
e.printStackTrace();
}
WebUtils.flushObject(list, resp);
}
dao:
public List<Map<String, String>> getTreeData_INDUSTRY(Map<String,String> paramMap) {
String pid = paramMap.get("pid");
String checkStatus = paramMap.get("checkStatus");
final Boolean checked = StringUtils.isNotBlank(checkStatus) ? true : false;
JdbcTemplate jdbcTemplate = this.getJdbcTemplate(Constants.DBNAME_DW);
String sql = null;
if(StringUtils.isBlank(pid) || "root".equalsIgnoreCase (pid)){
sql = "SELECT DISTINCT INDUSTRYDLID id,INDUSTRYDLNAME name,'false' leaf FROM dw.dim_qy_industry order by INDUSTRYDLNAME";
}
else{
sql="SELECT DISTINCT INDUSTRYXLID id,INDUSTRYXLNAME name, 'true' leaf FROM dw.dim_qy_industry A WHERE A.INDUSTRYDLID='"+pid+"'";
}
List<Map<String, String>> list = jdbcTemplate.query(sql, new RowMapper() {
public Map<String, Object> mapRow(ResultSet rs, int arg1) throws SQLException {
Map<String, Object> maprow = new HashMap<String, Object>();
maprow.put("id", rs.getString(1));
maprow.put("name", rs.getString(2));
maprow.put("leaf", Boolean.valueOf(rs.getString("leaf")));
maprow.put("checked", checked);
return maprow;
}
});
return list;
}