Extjs4 异步复选框树

文章作为最近代码的记录,并未整理,同时也不排除有任何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;
	}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值