[extjs] 三态树的使用实例

ll_feng

于 2012-12-17 16:44:22 发布

阅读量152

点赞数

分类专栏： ajax 文章标签： xhtml javascript java ViewUI

本文链接：https://blog.csdn.net/ll_feng/article/details/84368857

版权

ajax 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

以下通过一个工作实例，来说明怎么使用extjs的三态树。
一、需求描述：
在一个iframe中嵌入一个页面，这个页面在要创建一颗地区的三态树。在用户选择后，系统要从这个iframe中获到选择的结果。

二、构建三态树
1、area.js


Ext.namespace("send.comp");


/**
 * 切换非GIS方式进行区域标绘的树
 * @author 吕凌峰
 */
AreaTreePanel = function() {
	//已标绘区域的数据对象，用来存储调用者所需的数据（这里根据实际情况来设计）
	this.areaInfo = function(){
		area = "";				//所有被选择区域的名称字符串，如：“离石区，水文县,交城县
		areaid = "";			//所有被选择区域的区域代码串，如：”11101,11102,11103“

	}; 

	AreaTreePanel.superclass.constructor.call(this, {
		id : 'send-comp-areatree',
		border : false,
		autoScroll : true,
		animate : true,
		autoWidth : true,
		enableDD : false,
		containerScroll : true,
		isload : false,
		checkModel : 'cascade',
		onlyLeafCheckable : false,
		animate : false,
		rootVisible : false,
		autoScroll : true,
		loader : new Ext.tree.TreeLoader({
			//dataUrl : rootPath + '/lead/lead_showPersonTree.action',
			dataUrl : rootPath+'/contents/forecattwarn/weather/js/data2.json',
			/*baseParams : {
				isShowPerson : true,
				isCheck : '1',
				fwid : 'c564f546d48000016ce51d4213be8f40',
				orgcode : themis.commonjs.org.orgCode
			},*/
			listeners : {
				beforeload : function(loader, node) {
//							if (releasetype == 'pt_01') { 
//								loader.baseParams.releasetype = 'pm_08';
//							}
				},
				load : function(loader, node, response) {
					node.expandChildNodes(true);// 展开所有的子节点
					node.collapseChildNodes(true);// 收回所有的子节点
				}
			},
			baseAttrs : {
				uiProvider : Ext.ux.TreeCheckNodeUI
			}
		}),
		root : new Ext.tree.AsyncTreeNode({
			id : 'root',
			iconCls : 'icon-root',
			text : '行政区域',
			expanded : true
		}),
		listeners : {
			load : function() {
				isload = true;
			},
			beforeload : function() {
				isload = false;
			},
			beforeappend : function(tree, parent, node) {

			}
		}
	})
}

/**
 * 对树对象进行功能扩展，添加适用的方法
 * @class AreaTreePanel
 * @extends Ext.tree.TreePanel
 */
Ext.extend(AreaTreePanel, Ext.tree.TreePanel, {

	initLeader : function() {

	},
	/**
	 * 
	 * @param {} a
	 * @param {} startNode
	 * @return {} 返回节点对象数组，若子节点已全选则只返回父节点，若只有部分子节点被选择，则返回被选的子节点
	 */
	getChecked : function(a, startNode) {

		startNode = startNode || this.root;
		var r = [];
		var f = function() {
			if (this.attributes.checked == 'all') {
				r.push(!a ? this : (a == 'id' ? this.getDepth() + '-' + this.id : this.attributes[a]));
				return false;
			}
		};
		startNode.cascade(f);
		return r;
	},


	/**
	 * 获取区域树中被用户选择的区域信息
	 * 基于getChecked(),封装成调用者所需的数据
	 */
	getAreaDatas : function(){
		var info = this.areaInfo;
		var aNodes = this.getChecked();
		var names = "";
		var codes = "";
		Ext.each(aNodes,function(node){
			names+=node.text+",";
			codes+=node.id+",";
		})
		info.area = names.indexOf(",") == -1 ? names : names.substring(0,names.length - 1);
		info.areaid = codes.indexOf(",") == -1 ? codes : codes.substring(0,codes.length - 1);
		return info;
	}

});

2、模拟数据：data.json


[{
	id:'141100',
	text:'吕梁市',
	children:[{
		id:'141101',
		text:'离石区',
		leaf:false,
		checked:'all',
		iconCls:'icon-user',
		children:[{
			id:'11001',
			text:'东庄乡',
			leaf:true
		},{
			id:'11002',
			text:'西庄乡',
			leaf:true
		}]
	},{
		id:'141121',
		text:'文水县',
		children:[],
		leaf:true,
		checked:'all',
		iconCls:'icon-user'
	},{
		id:'141122',
		text:'交城县',
		children:[],
		leaf:true,
		checked:'all',
		iconCls:'icon-user'
	},{
		id:'141123',
		text:'兴县',
		children:[],
		leaf:true,
		checked:'all',
		iconCls:'icon-user'
	}],
	leaf:false,
	checked:'all',
	iconCls:'icon-organize'
}]

3、在页面里使用树：area.jsp


<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<%@ include file="/include/commonCss.jsp" %>
	<%@ include file="/include/ext/base.jsp" %>
	<%@ include file="/include/commonJs.jsp" %>
	<script type="text/javascript" src="${pageContext.request.contextPath}/contents/commons/js/TreeCheckNodeUI.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/contents/forecattwarn/weather/js/area.js"></script>
    <script type="text/javascript" >

    var tree = new AreaTreePanel();
    Ext.onReady(function() {
        Ext.QuickTips.init();
        var viewport = new Ext.Viewport({
			layout : 'border',
			items : [{
				region:'center',
				title:'',
				split:true,
				width: 200,
				minSize: 175,
				maxSize: 400,
				items: [{
				    title:'请选择影响区域',
				    border:false,
				    items:tree
				}]
			}]
		});



     });
	</script>
 </head>
<body>
</body>
</html>

三、调用代码：


var tree = gisframe.window.tree;
var data = tree.getAreaDatas();
return data;

ll_feng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[extjs] 三态树的使用实例

以下通过一个工作实例，来说明怎么使用extjs的三态树。一、需求描述：在一个iframe中嵌入一个页面，这个页面在要创建一颗地区的三态树。在用户选择后，系统要从这个iframe中获到选择的结果。二、构建三态树1、area.js[code="java"]Ext.namespace("send.comp");/** * 切换非GIS方式进行区域标绘的树 ...
复制链接

扫一扫