修改UniEAP Platform RIA 页面combobox控件,增加全选,全选取消下拉框(ie浏览器 js)

combobox控件 ,总共有个三个重要js,ComboBox.js(未改动),ComboBoxDataProvider.js,ComboBoxPopup.js


 针对ComboBoxDataProvider.js ,

1、增加了自定义列  customItem:{CODEVALUE:'-1',CODENAME: '全部'}

2、修改了在什么情况下 增加自定义列

       //增加自定义列
        dojo.require("unieap.form.ComboBoxPopup");
        dojo.require("unieap.form.Popup");
        //alert(this.widget.getPopup().displayStyle=='multi');
        if(this.customItem&&this.widget.getPopup().displayStyle=='multi'&&this.widget.getPopup().hasAll=='true'){
            datas=[].concat(this.customItem,datas)
        }

针对ComboBoxPopup.js

1、设置全选是否被选中标志位

//默认全部未被选中 ,标志位
var bool = false;

2、增加在下拉框关闭时 ,标志位重置为默认值

close:function(){
        this.inherited(arguments);
        this._highlighted_option=null;
        this.widget.getDataProvider().clearCurrentItems();
        bool= false;
    }

3、增加鼠标在 单击 全部选项 (打钩  或 点击 全部字体 或 点击全部那一行)时的功能

//注意close 函数功能

_onSelect:function(evt,tgt, close){
        var item=tgt.item;
        dijit.focus(this.widget.focusNode);
        if(this.displayStyle=='multi'&&(evt.type=='click'||evt.keyCode==dojo.keys.ENTER)){
            //针对全部选项 qiaozhy
            if(item.CODEVALUE == -1){
                //针对单击全部字体或在全部字体前打钩
                if(evt.srcElement.tagName=="INPUT" || evt.srcElement.tagName=="SPAN"){
                    var a  = evt.srcElement.parentElement.parentElement.parentElement;
                    
                }else if(evt.srcElement.tagName=="TD") {
                    //针对单击全部字体 所在的行时
                    var a  = evt.srcElement.parentElement.parentElement;
                   
                
                }
                //获取下拉框选项
                var b  = a.childNodes;
                
                //点击后改变标志位状态
                bool = !bool;
                for (i = 0; i < b.length; i++) {
                    if(bool == true){
                        //全部选中时未选中的选中
                        if(b[i].firstChild.firstChild.checked==false){
                            b[i].click();
                        }
                        
                    }else if(bool == false){
                        //取消全部选中时选中的不选中
                        if(b[i].firstChild.firstChild.checked==true){
                            b[i].click();
                        }
                        
                    }
                    

                }
                //改变下拉框 全部选项 前面是否打钩
                changeAll(evt,tgt);
                
            }else{
              this._multiCheck(evt,tgt);
            
            }


ComboBoxDataProvider.js源码如下

dojo.provide("unieap.form.ComboBoxDataProvider");
dojo.declare("unieap.form.ComboBoxDataProvider", null,{
	/**
	 * @declaredClass:
	 * 		unieap.form.ComboBoxDataProvider
	 * @summary:
	 * 		下拉列表的数据源控制器
	 */
	
	/**
	 * @summary:
	 * 		设置下拉框绑定的DataStore对象或者DataStore对象的名称。
	 * @type:
	 * 		{string|unieap.ds.Datastore}
	 */
	store:null,
	
	/*
	 * @summary:
	 * 		下拉框请求数据的相关参数
	 * @type:
	 * 		{object}
	 */
	parameters:{},
	
	//combobox数据
	_comboboxStore:null,
	
	//选中的数据
	_selectedItems:null,
	
	/**
	 * @summary:
	 * 		添加自定义列
	 * @type:
	 * 		{object|array}
	 * @example:
	 * |	<div dojoType="unieap.form.ComboBox" dataProvider="{customItem:{CODEVALUE:'3',CODENAME: '大连'}}" >
	 * |	</div>
	 * 		此时除了store中的数据,还将增加一个自定义列。多列时可配置为数组。
	 */
	customItem:{CODEVALUE:'-1',CODENAME: '全部'},
	

	
	/**
	 * @summary:
	 * 		是否使用静态数据
	 * @description:
	 * 		注意:开启staticData功能是,ComboBox的标签请使用select标签。
	 * @type:
	 * 		{boolean}
	 * @default:
	 * 		false
	 * @example:
	 * |	<select dojoType="unieap.form.ComboBox" dataProvider="{staticData:true}" >
	 * |		<option value="1">男</option>
	 * |		<option  value="0">女</option>
	 * |	</select>
	 * 		此时combobox将增加两个自定义数据
	 */	
	 staticData:false,
	 
	 constructor: function(params){
		dojo.mixin(this, params);
		this.setDataStore(this.store);
	},
	
	 
	 /*
	  * @summary:
	  * 	用户自定义数据源,构造ComboBox支持的数据格式
	  * @param:
	  * 	{string} name DataStore的名字
	  * @param:
	  * 	{object} parameters 自定义参数 ,如{a:123,b:456}
	  * @example:
	  * |	<div dojoType="unieap.form.ComboBox" dataProvider="{loadStore:loadMyStore}" >
	  * |	</div>
	  * | loadMyStore = function(name,parameters){
	  * |		return new unieap.ds.DataStore(name,[{a:1,b:1},{a:2,b:2}]);
	  * | }
	  * @return
	  * 	 {unieap.ds.DataStore}
	  */	 
	 loadStore:function(name,parameters){
	 	return null;
	 },
	 
	 /**
	  * @summary:
	  * 	设置数据源
	  * @description:
	  * 	重新构造ComboBox支持的数据格式
	  * @param:
	  * 	{unieap.ds.DataStore|string} store
	  */
	 setDataStore:function(store){
	 	var _store = unieap.getDataStore(store,null,true);
		if(!_store){
			_store=this.loadStore(store,this.parameters);
		}
		if(!_store){
			dojo.require("unieap.rpc");
			_store = unieap.Action.getCodeList(store);
		}
		this.store=_store;
		this._comboboxStore=this._loadDataFromDataStore(this.store);
		this._comboboxStore.cacheItems=null;
	 },
	 
	 /**
	  * @summary:
	  * 	依据条件获取下拉框的数据对象数组(item数组)
	  * @description:
	  * 	不传递参数,则返回ComboBox绑定的所有item的数组,多条件仅支持“或”关系
	  * @param:
	  * 	{string} text 针对显示值的过滤条件,多个条件用ComboBox控件的separator属性字符分割,并设置isMulti参数为true
	  * @param:
	  * 	{boolean} isMulti 是否是多个条件
	  * @return:
	  * 	{array}
	  * @example:
	  * |<script type="text/javascript">
	  * |	var city = new unieap.ds.DataStore('city_store', [
	  * |		{CODEVALUE: 1,CODENAME: '宁波'}, 
	  * |		{CODEVALUE: 2,CODENAME: '宁海'}, 
	  * |		{CODEVALUE: 3,CODENAME: '温州'}, 
	  * |		{CODEVALUE: 4,CODENAME: '沈阳'}
	  * |	]);
	  * |	dojo.addOnLoad(function(){
	  * |		var city = unieap.byId('city');
	  * |		city.getDataProvider().getItems('宁,阳',true);
	  * |	});
	  * |</script>
	  * |<div dojoType="unieap.form.ComboBox" id="city" dataProvider="{'store':'city_store'}"></div>
	  * 以上示例展示多条件的getItems方法使用,单条件API调用如:city.getDataProvider().getItems('宁',false);。
	  * 上述示例运行结果如图所示
	  * @img:
	  * 	images/form/combobox_getitems_data.png
	  * 
	  */
	 getItems:function(text,isMulti){
	 	if(this._comboboxStore){
	 		return this._comboboxStore.fetch(text,isMulti);
		}
		return [];
	 },
	 
	 /**
	  * @summary:
	  * 	取得ComboBox可下拉的数据条目(items)
	  * @description:
	  * 	在ComboBox级联的情况下,调用从ComboBox的此方法,可以获得到经过主ComboBox过滤后的从ComboBox可下拉的数据条目
	  * @return:
	  * 	{array} 
	  * @example:
	  * |var combobox = unieap.byId('cityComboBox');
	  * |var items = combobox.getDataProvider().getCurrentItems();
	  */
	 getCurrentItems:function(){
	 	if(this._comboboxStore){
	 		return this._comboboxStore.currentItems||[];
		}
	 	return []
	 },
	 
	 /**
	  * @summary:
	  * 	获取ComboBox绑定的DataStore
	  * @return:
	  * 	unieap.ds.DataStore
	  * @example:
	  * |var combobox = unieap.byId('cityComboBox');
	  * |var store = combobox.getDataProvider().getDataStore();
	  */
	 getDataStore:function(){
	 	return this.store;
	 },
	 
	 getComboBoxStore:function(){
	 	return this._comboboxStore;
	 },

	 
	/**
	 * @summary:
	 * 		动态增加一条或多条下拉数据
	 * @param:
	 * 		{object|array} item
	 * @example:
	 * |var city = new unieap.ds.DataStore('city_store', [
	 * |	{CODEVALUE: 1,CODENAME: '宁波'}, 
	 * |	{CODEVALUE: 2,CODENAME: '宁海'}, 
	 * |	{CODEVALUE: 3,CODENAME: '温州'}, 
	 * |	{CODEVALUE: 4,CODENAME: '沈阳'}
	 * |]);
	 * |var city = unieap.byId('cityComboBox');
	 * |city.getDataProvider().addItem({CODEVALUE:5,CODENAME:'大连'}); //添加一条item
	 * |city.getDataProvider().addItem([{CODEVALUE:6,CODENAME:'鞍山'},{CODEVALUE:7,CODENAME:'瓦房店'}]);//添加一个item数组,多条item
	 * 如上代码执行后,city ComboBox可以下拉出7条数据,包括动态添加进来的'大连'、'鞍山'、'瓦房店'
	 */
	 addItem:function(item){
	 	this._comboboxStore.items.push(item);
		this.clearCacheItems();
	 },
	 
	 /**
	 * @summary:
	 * 		得到当前选中的节点
	 * @description:
	 * 		多条被选中(复选ComboBox)时,返回item数组
	 * @return:
	 * 		{array}
	 */
	getSelectedItems:function(){
		return this._selectedItems;
	},
	
	/**
	 * @summary:
	 * 		选中一个或多个节点
	 * @param:
	 * 		{array} item
	 * @param:
	 * 		{boolean} 是否改变显示值
	 * 		默认true
	 * @example:
	 * |function setSelectItems(){
	 * |	var items = unieap.byId("setSelect").getDataProvider().getItems();
	 * |	unieap.byId("setSelect").getDataProvider().setSelectedItems([items[2],items[3]],true);
	 * |}
	 * |<div id="setSelect" popup="{displayStyle:'multi'}" dojoType="unieap.form.ComboBox" dataProvider="{'store':'city_store'}">
	 * |</div>
	 * 以上代码执行后,会将第三条和第四条数据选中。
	 */
	 setSelectedItems:function(items,display){
	 	this._selectedItems=items;
		if(typeof display == 'undefined'){
			display=true;
		}
		this.widget._onSelectedChange(display);
	 },
	 
	 
	 setSelectedItemsByIndex : function(indexs){
	 	var items=this.getItems(),sItems=[];
		if(!dojo.isArray(indexs)){
			indexs=[indexs];	
		}
		dojo.forEach(items,function(item,index){
			if(dojo.indexOf(indexs,index)!=-1){
				sItems.push(item);
			}
		});
		this.setSelectedItems(sItems);
	 },
	 
	 /**
	 * @summary:
	 * 		清空ComboBox
	 * @description:
	 * 		清空ComboBox输入框的值及下拉框的选中状态
	 * @example:
	 * |var city = unieap.byId('cityComboBox');
	 * |city.getDataProvider().clear();
	 */
	clear:function(){
		this.clearCacheItems();
		this.setSelectedItems(null);
	},
	
	/*
	 * @summary:
	 * 		清空ComboBox内的缓存数据
	 */
	clearCacheItems:function(){
		if(this._comboboxStore){
			this._comboboxStore.cacheItems=null;
		}
	},
	
	/*
	 * @summary:
	 * 		清空当前页显示的数据
	 */
	clearCurrentItems:function(){
		if(this._comboboxStore){
			this._comboboxStore.currentItems=null;
		}
	},
	
	//克隆datastore中的数据
	_loadDataFromDataStore:function(dataStore){
		var comboboxStore = null;
		var datas=[];
		if(dataStore){
			try {
				datas = dojo.clone(dataStore.rowSet.getData());
			} catch (e) {
				datas=[];
			}
		}
		//增加静态数据
		if(this.staticData){
			datas=[].concat(this.createStaticItems(),datas);
		}
		//增加自定义列
		dojo.require("unieap.form.ComboBoxPopup");
		dojo.require("unieap.form.Popup");
        //alert(this.widget.getPopup().displayStyle=='multi');
		if(this.customItem&&this.widget.getPopup().displayStyle=='multi'&&this.widget.getPopup().hasAll=='true'){
			datas=[].concat(this.customItem,datas)
		}
		dojo.require('unieap.form.ComboBoxDataFilter');
		comboboxStore = new unieap.form.ComboBoxDataStore({
				items : datas
		});
		comboboxStore.widget=this.widget;
		return comboboxStore;
	},
	
	
	//创建静态数据
	createStaticItems:function(){
		var node=this.widget._staticNode;
		var items=[];
		var decoder=this.widget.getDecoder();
		dojo.forEach(node.childNodes,function(option){
			if(option&&option.tagName=="OPTION"){
				var item={};
				item[decoder.displayAttr]=option.text;
				item[decoder.valueAttr]=option.value;
				items.push(item);
			}
		})
		return items;
	},
	
	destroy: function(){
		if(this._comboboxStore){
			delete this._comboboxStore.widget;
		}
		this.inherited(arguments);
	}
});
ComboBoxPopup.js 源码如下:

dojo.provide("unieap.form.ComboBoxPopup");
dojo.require("unieap.form.Popup");
//默认全部未被选中 ,标志位
var bool = false;

//该函数只改变下拉框中的属性,不改变输入框中的属性(针对全部)
function changeAll(evt,tr){
		var target=evt.target;
		var checkbox;
		if(evt.type=='click'&&target&&target.tagName=="INPUT"){
			//选中checkbox将自动改变checkbox的状态
			checkbox=target;
		}else{
			checkbox=dojo.query("input",tr);
			if(checkbox&&checkbox.length>0)
			checkbox=checkbox[0];	
			//选中行,手动改变checkbox的状态
			checkbox.checked=!checkbox.checked;
		}
		
	}
dojo.declare("unieap.form.ComboBoxPopup",unieap.form.Popup,{
	/**
	 * @declaredClass:
	 * 		unieap.form.ComboBoxPopup
	 * @summary:
	 * 		下拉框的弹出框
	 * @superClass:
	 * 		unieap.form.Popup
	 * @example:
	 * |var city = new unieap.ds.DataStore('city_store', [
	 * |	{CODEVALUE: 1,CODENAME: '宁波'}, 
	 * |	{CODEVALUE: 2,CODENAME: '宁海'}, 
	 * |	{CODEVALUE: 3,CODENAME: '温州'}, 
	 * |	{CODEVALUE: 4,CODENAME: '沈阳'}, 
	 * |	{CODEVALUE: 5,CODENAME: '大连'}, 
	 * |	{CODEVALUE: 6,CODENAME: '金州'},
	 * |	{CODEVALUE: 7,CODENAME: '旅顺'},
	 * |	{CODEVALUE: 8,CODENAME: '鞍山'}
	 * |]);
	 * |<div dojoType="unieap.form.ComboBox" 
	 * |		dataProvider="{'store':'city_store',valueAttr:'CODEVALUE',displayAttr:'CODENAME'}"
	 * |		popup="{displayStyle:'multi',height:100px}">
	 * |</div>
	 * 上述代码展示,通过popup属性配置下拉框多选和下拉框高度
	 * @img:
	 * 		images/form/combobox_multi_height.png
	 */
	
	//用a标签,在firefox下通过document.activeElement可以获得到
	templateString : "<a href=\"#return false;\" tabindex=\"-1\" class=\"u-combobox-list u-a-common\"  dojoAttachPoint=\"listNode,popupcontainer,containerNode\"  >"
				+ "<div class=\"u-combobox-list-header\"  dojoAttachPoint=\"listHeaderNode\">"
				+ "<table dojoAttachPoint=\"tableHeaderNode\"></table>"
				+ "</div>"
				+ "<div class=\"u-combobox-items-container\" dojoAttachPoint=\"listContainerNode\" >"
				+ "<table dojoAttachPoint=\"tableBodyNode,focusNode\"><tbody></tbody></table>"
				+ "</div>"
				+ "<div class=\"u-combobox-list-footer\" dojoAttachPoint=\"listFooterNode\"></div>"
				+ "</a>",
	
	
	
	height:"210px",
	
	
	/**
	 * @summary:
	 * 		下拉列表item个数限制
	 * @type:
	 * 		{number}
	 * 
	 */	
	 pageSize:-1, 
	 
	 
	/**
	 * @summary:
	 * 		下拉框的显示类型
	 * @type:
	 * 		"string"
	 * @enum:
	 * 		{"table"|"list"|"multi"}
	 * @example:
	 * |<div dojoType="unieap.form.ComboBox" popup="{displayStyle:'table'}" dataProvider="{'store':'city_store'}">
	 * |</div>
	 * 上述代码展示了displayStyle为table的配置
	 * @img:
	 * 		images/form/combobox_table.png
	 */
	displayStyle:"list",
	
	/**
	 * @summary:
	 * 		树展示效果 - CUSTOMIZE
	 * @type:
	 * 		"string"
	 * @enum:
	 * 		{"true"|"false"}
	 * |<div dojoType="unieap.form.ComboBoxTree" popup="{attr1:'true'}" dataProvider="{'store':'city_store'}">
	 * |</div>
	 * 上述代码展示了attr1为ComboBoxTree的配置
	 */
	attr1:"false",
	
	attr2:"false",

	widget:null,
	
	/**
	 * @summary:
	 * 		下拉框的结构
	 * @type:
	 * 		{object}
	 * @example:
	 *|	<script type="text/javascript">  
	 *|		var search = new unieap.ds.DataStore('mysearch', [
	 *|		 		{CODEVALUE:'baidu',CODENAME: '百度'}, 
	 *|		 		{CODEVALUE: 'google',CODENAME: '谷歌'} 
	 *|			]);
	 *|		dataCenter.addDataStore(search);
     *|		var structure = {   
	 *|	            rows : [{   
	 *|	                field :"CODEVALUE",   
	 *|	                width : "30%"   
	 *|	            }, {   
	 *|	                "title" : "代码标题",   
	 *|	                field : "CODENAME",   
	 *|	                width : "70%"   
	 *|	            }]   
	 *|	        }   
	 *|	    var imgPath="/EAPDomain/ria33demo/pages/samples/form/images/";   
	 *|	    function getInnerHTML(value, item, field, text, matchReg){   
	 *|	        if (field == 'CODEVALUE') {   
	 *|	            if (item.CODEVALUE == "baidu") {   
	 *|	                return "<img style='display:block;height:16px;width:16px' src='"+imgPath+"baidu.bmp"+"' />"   
	 *|	            }else{   
	 *|	                return "<img style='display:block;height:16px;width:16px' src='"+imgPath+"google.bmp"+"' />"   
	 *|	            }   
	 *|	        }   
	 *|	        return "<span>" + value + "</span>";   
	 *|	    }   
	 *|	</script>  
	 *|	<div dojoType="unieap.form.ComboBox" popup="{structure:structure,getInnerHTML:getInnerHTML}" dataProvider="{'store':'mysearch'}">  
	 *|	</div>  
	 *上述代码展示了自定义下结构和下拉框的例子
	 *@img:
	 *		images/form/combobox_custom.png
	 */
	structure: null,
	
	/*
	 * @summary:
	 * 		默认显示第几条数据 从零开始,-1指最后一条数据
	 * @type:
	 * 		{number}
	 */
	//此方式暂时没有实现
	defaultItem:"",
	
	postCreate:function(){
		this.inherited(arguments);
		this.connect(this.focusNode,'onclick','_onClick');
		this.connect(this.focusNode,'onmouseover','_onMouseOver');
		this.connect(this.focusNode,'onmouseout','_onMouseOut');
	},

	

		/**
	 * @summary:
	 * 		打开下拉框
	 */
	open:function(text){
		this._highlighted_option=null;
		var items=this.widget.getDataProvider().getItems(text,this.displayStyle=="multi");
		if(items&&items.length>0){
			if(this.structure==null){
				this.getDefaultStructure();
			}
			this._createHeader(this.structure);
			this._createOptions(items,this.structure,text);			
		}else{
			this.close();
			return;
		}
		this.inherited(arguments);
		if(!this.animate){
			dojo.style(this.listContainerNode, "overflowY", "auto");
			//高亮显示选中的节点
			var selectedItems=this.widget.getDataProvider().getSelectedItems();
			selectedItems&&dojo.query(".u-combobox-item",this.tableBodyNode).forEach(dojo.hitch(this,function(tr){
				if(tr.item==selectedItems[0]){
					this._focusOptionNode(tr)
				}
			}));
		}
		
	},
	onAnimateBegin:function(){
		this.inherited(arguments);
		this.domNode.style.visibility="visible";
		dojo.style(this.listContainerNode, "overflowY", "hidden");
	},
	onAnimateEnd:function(){
		this.inherited(arguments);
		if(dojo.isIE){
			if(this.listContainerNode.offsetHeight<this.tableBodyNode.offsetHeight){
				dojo.style(this.listContainerNode, "overflowY", "scroll");
			}
		}else{
			dojo.style(this.listContainerNode, "overflowY", "auto");
		}
		var selectedItems=this.widget.getDataProvider().getSelectedItems();
		selectedItems&&dojo.query(".u-combobox-item",this.tableBodyNode).forEach(dojo.hitch(this,function(tr){
			if(tr.item==selectedItems[0]){
				this._focusOptionNode(tr)
			}
		}));
	},
	
	/**
	 * @summary:
	 * 		关闭下拉框
	 */
	close:function(){
		this.inherited(arguments);
		this._highlighted_option=null;
		this.widget.getDataProvider().clearCurrentItems();
		bool= false;
	},
	
	/**
	 * @summary:
	 * 		设置下拉框的结构
	 * @param:
	 * 		{object} structure
	 */
	setStructure:function(structure){
		this.structure=structure;
	},
	
	getDefaultStructure:function(){
		var d=this.widget.getDecoder();
		if(this.displayStyle=='table'){
			//table的默认展现方式
			this.structure={
				rows:[
					{title:'代码值',field:d.valueAttr,width:'30%'},
					{title:'代码标题',field:d.displayAttr,width:'70%'}
				]
			}
		}else{
			//list multi的默认展现方式
			this.structure={
				rows:[
					{field:d.displayAttr}
				]
			}
		}
		return this.structure;
	},
	
	/**
	 * @summary:
	 * 		选中某条下拉数据之后的回调方法。
	 * @type:
	 * 		{function}
	 * @param:	
	 * 		{object} item
	 * 		 选中的本行数据
	 * @param
	 * 		{unieap.form.Combobox} widget
	 * 		combobox变量	
	 * @example:
	 * |<script type="text/javascript">
	 * |	var city = new unieap.ds.DataStore('city_store', [
	 * |		{CODEVALUE: 1,CODENAME: '宁波'}, 
	 * |		{CODEVALUE: 2,CODENAME: '宁海'}, 
	 * |		{CODEVALUE: 3,CODENAME: '温州'}
	 * |	]);
	 * |	function selectItem(item,widget){
	 * |		alert(item.CODEVALUE);
	 * |		alert(widget.id);
	 * |	}
	 * |</script>
	 * |<div id="combobox" dojoType="unieap.form.ComboBox" popup="{onSelect:selectItem}" dataProvider="{'store':'city_store'}">
	 * |</div>
	 * onSelect的可以或得两个参数,1.被选中的数据对象item 2.ComboBox控件对象widget			
	 */
	onSelect:function(item,widget){
	},
	
	
	/*
	 * @summary:
	 * 		创建表头,初始化时创建一次。在改变结构时重新构造
	 */
	_createHeader : function() {
		//清空表头
		dojo.empty(this.tableHeaderNode);
		var head = dojo.create('thead')
		var tr = dojo.create('tr',null,head);
		if(dojo.some(this.structure.rows,function(row){return !row.title})){
			dojo.style(this.listHeaderNode, "display","none");
		}else{
			//每列都有title的情况
			dojo.forEach(this.structure.rows,function(row){
				dojo.create('th',{innerHTML:row.title,style:{'width':row.width||''}},tr);
			});
			dojo.style(this.listHeaderNode, "display","");
			this.tableHeaderNode.appendChild(head);
		}
	},
	
	/*
	 * @summary:
	 * 		创建内容,实时构造
	 * @param:
	 * 		 {object} results 数据
	 * @param:
	 * 		 {object} structure 结构
	 */
	_createOptions:function(results,structure,text){
		if(text&&text!=""){
			var matchReg=this._getMatchReg(text);
		}
		var tbn = this.tableBodyNode;
		//清空表中的Options
		dojo.empty(tbn);
		var tb=dojo.create('tbody');
		for (var i = 0; i < results.length; i++) {
			var item = results[i];
			var tr = document.createElement("tr");
			if(this.displayStyle=='multi'){
				var sitems=this.widget.getDataProvider().getSelectedItems()||[];
				dojo.map(this.widget.getDataProvider().getItems(),function(item){
					if(dojo.indexOf(sitems,item)!=-1){
						item['checked']=true;
					}else{
						item['checked']=false;
					}
				})
				var checkbox=null;
				if(dojo.isIE){
					//ie下 设置checkbox.checked=boolean存在问题
					if(item["checked"]){
						checkbox=document.createElement("<input type='checkbox' checked/>");
					}else{
						checkbox=document.createElement("<input type='checkbox' />");
					}
				}else{
					checkbox=dojo.create('input',{type:'checkbox'});
					checkbox.checked=item["checked"];
				}
				dojo.create('td',null,tr).appendChild(checkbox);
			}
			for (var k = 0, len = structure.rows.length; k < len; k++) {
				var row = structure.rows[k];
				var field=row.field;
				var value = item[field];
				dojo.create('td',{style:{'width':row.width||''}},tr).innerHTML=this.getInnerHTML(value,item,field,text,matchReg);
			}
			tr.item = item;
			dojo.addClass(tr, "u-combobox-item");
			tb.appendChild(tr);
		}
		tbn.appendChild(tb);
	},
	
	//构造高亮正则表达式
	//多选时构造成如  /(a|b|c)/gi的正则表达式
	_getMatchReg:function(text){
		if(this.displayStyle=="multi"){
			var texts=text.split(this.widget.separator);
			text=dojo.filter(texts,function(text){
				return text!="";
			}).join("|");
		}
		try{
			//new RegExp("("+text+")","gi") 可能发生异常
			if(text!=""){
			var	matchReg=new RegExp("("+text+")","gi");
				return matchReg;
			}
		}catch(e){
			return null;
		}
	},
	
	/**
	 * @summary:
	 * 		渲染下拉列表中的td的innerHTML
	 * @param 
	 * 		{string} value
	 * 		显示值
	 * @param:
	 * 	 	{object} item
	 * 		本行数据
	 * @param: 
	 * 		{string} field
	 * 		显示值所在的字段值,如:CODEVALUE CODENAME
	 * @param:
	 * 		{string} text
	 * 		当前输入域文本
	 * @param:  {object} matchReg
	 * 		默认提供的正则表达式,控制输入文本的高亮显示。
	 * @return:
	 * 		返回innerHTMl
	 * @example :
	 * |	<div dojoType="unieap.form.ComboBox" popup="{getInnerHTML:getInnerHTML}">
	 * |	</div>
	 * |	function getInnerHTML(value,item,field,text,matchReg){
	 * |		if(field=='age'){
	 * |			if(value<16){
	 * |				reurn "<img src='child.png'/>"
	 * |			}
	 * |			return "<img src='person.png'/>"
	 * |		}
	 * |		return "<span>"+value+"</span>";
	 * |	} 
	 * 		修改年龄字段的显示为图片
	 */
	getInnerHTML:function(value,item,field,text,matchReg){
		if(matchReg){
			value=value.toString().replace(matchReg,"<strong class='match'>$1</strong>");
		}
		//ie下 td 的innerHTML为‘<’时 不能正常显示 故套上一个 <span>
		return "<span>"+value+"</span>";
	},
	
	_onClick:function(evt){
		var tgt = evt.target||evt.srcElement;
		this.isFause = true;
		var isItem = true;
		while (!tgt.item) {
			tgt = tgt.parentNode;
			if (tgt === this.listNode) {
				isItem = false;
				break;
			}
		}
		if (isItem) {
			this._onSelect(evt,tgt);
		} else {
			return;
		}
	},
	
	//鼠标点击或者上下键控制选中节点,触发onSelect事件
	//evt 上下 回车 onclick事件
	_onSelect:function(evt,tgt,close){
		var item=tgt.item;
		dijit.focus(this.widget.focusNode);
		if(this.displayStyle=='multi'&&(evt.type=='click'||evt.keyCode==dojo.keys.ENTER)){
			//针对全部选项 qiaozhy
			if(item.CODEVALUE == -1){
				if(evt.srcElement.tagName=="INPUT" || evt.srcElement.tagName=="SPAN"){
					var a  = evt.srcElement.parentElement.parentElement.parentElement;
					
				}else if(evt.srcElement.tagName=="TD") {
					var a  = evt.srcElement.parentElement.parentElement;
				   
				
				}
				var b  = a.childNodes;
				
				//改变状态
				bool = !bool;
				for (i = 0; i < b.length; i++) {
                    if(bool == true){
                    	//全部选中情况
                    	if(b[i].firstChild.firstChild.checked==false){
                    		b[i].click();
                    	}
                    	
                    }else if(bool == false){
                    	//全部未选中情况
                    	if(b[i].firstChild.firstChild.checked==true){
                    		b[i].click();
                    	}
                    	
                    }
					

				}
				//改变下拉框 全部选项 前面是否打钩
				changeAll(evt,tgt);
				
			}else{
			  this._multiCheck(evt,tgt);
			
			}
			
		}else if(evt.type=='click'||(evt.keyCode==dojo.keys.ENTER&&this.displayStyle!='multi')){
			this.onSelect(item,this.widget);
		}
		if(evt.type=='click'&&this.displayStyle!='multi'){
			this.close();
		}
		var _getSelectedItems=function(item){
			if(this.displayStyle=='multi'){
				var items=dojo.filter(this.widget.getDataProvider().getCurrentItems(),function(item){
					return item['checked']&&item['checked']==true;
				});
				return items;
			}else{
				return [item];
			}
		}
		var items=dojo.hitch(this,_getSelectedItems)(item);
		this.widget.getDataProvider().setSelectedItems(items);	
		
	},
	
	
	//鼠标移出事件
	_onMouseOver:function(evt){
		var tgt = evt.target;
		while (tgt&&!tgt.item) {
			tgt = tgt.parentNode;
		}
		if(!tgt)return;	
		try{
			this._focusOptionNode(tgt);
		}catch(e){}
	},
	//光标进入事件
	_onMouseOut:function(){
		this._blurOptionNode();
	},
	
	//inpu的keyup事件
	_handKeyUp:function(evt){
		var keyCode=evt&&evt.keyCode;
		if(keyCode == dojo.keys.ENTER){
			//回车
			if(this.displayStyle!='multi'){
				if(this._isShowingNow){
					this.close()
				}else{
					this.open();
				}
			}else if(this.displayStyle=='multi'){
				if(this._isShowingNow&&!this._highlighted_option){
					this.close();
				}else if(!this._isShowingNow){
					this.open();
					
				}
			}
		}else if(keyCode == dojo.keys.PAGE_DOWN 
			||keyCode == dojo.keys.DOWN_ARROW
			||keyCode == dojo.keys.PAGE_UP
			||keyCode == dojo.keys.UP_ARROW
			||keyCode == dojo.keys.TAB){
		}else if(keyCode == dojo.keys.ESCAPE){
			//esc 退出
			this.close();
		}else{
			window.clearTimeout(this._openJob);
			var self=this;
			this._openJob=setTimeout(function(){
				var text=self.widget.getText();
				if(text!=self._ot){
					self.open(text);	
					self._ot=text;
				}
			},100);
		}
	},
	
	//input的keydown事件
	_handKeyDown:function(evt){
		var keyCode=evt.keyCode;
		if (this._isShowingNow == true) {
			if (keyCode == dojo.keys.PAGE_DOWN || keyCode == dojo.keys.DOWN_ARROW) {
				//向下选中
				this._highlightNextOption();
				this.displayStyle!="multi"&&this._onSelect(evt, this._highlighted_option);
			}else if (keyCode == dojo.keys.PAGE_UP || keyCode == dojo.keys.UP_ARROW) {
				//向上选中
				this._highlightPrevOption();
				this.displayStyle!="multi"&&this._onSelect(evt, this._highlighted_option);
			}else if (keyCode == dojo.keys.ENTER&&this._highlighted_option) {
				this._onSelect(evt, this._highlighted_option);
			}
		}
	},
	

	 //高亮显示当前结点的下一个结点
	_highlightNextOption : function() {
		if (!this._highlighted_option) {
			this._focusOptionNode(this.tableBodyNode.rows[0]);
		} else if (this._highlighted_option.nextSibling) {
			this._focusOptionNode(this._highlighted_option.nextSibling);
		}
		
	},
	 
	//高亮显示当前结点的上一个结点
	_highlightPrevOption : function() {
		if (!this._highlighted_option) {
			this._focusOptionNode(this.tableBodyNode.rows[0]);
		} else if (this._highlighted_option.previousSibling) {
			this._focusOptionNode(this._highlighted_option.previousSibling);
		}
	},
	

	 //使结点获得焦点,并高亮结点
	_focusOptionNode : function(/* DomNode */node) {
		if (this._highlighted_option != node) {
			this._blurOptionNode();
			this._highlighted_option = node;
			dojo.addClass(this._highlighted_option,"u-comobobox-item-hover");
			dijit.scrollIntoView(this._highlighted_option);
		}
	},
	
	 //使结点失去焦点
	_blurOptionNode : function() {
		if (this._highlighted_option) {
			dojo.removeClass(this._highlighted_option,
				"u-comobobox-item-hover");
			this._highlighted_option = null;
		}
	},
	
	//重新设置高度宽度
	_resetWidgetHW: function(){
		if(this.animate){
			this.domNode.style.visibility="hidden";
		}
		this.domNode.style.display='block';
		this.popupcontainer.style.height="";
		this.listContainerNode.style.height="";
		dojo.style(this.popupcontainer, 'width', this.width || dojo.style(this.widget.domNode, 'width') + 'px');
		this.height=(this.height+"").replace(/[^0-9]/g,'');
		if(this.height&&this.domNode.offsetHeight>this.height){
			dojo.style(this.popupcontainer, 'height', this.height+'px');
			var _h=this.height-this.listHeaderNode.offsetHeight;
			dojo.style(this.listContainerNode,'height',_h+'px');
		}
	},
	
	//多选时改变item数据
	_multiCheck:function(evt,tr){
		var target=evt.target;
		var checkbox;
		if(evt.type=='click'&&target&&target.tagName=="INPUT"){
			//选中checkbox将自动改变checkbox的状态
			checkbox=target;
		}else{
			checkbox=dojo.query("input",tr);
			if(checkbox&&checkbox.length>0)
			checkbox=checkbox[0];	
			//选中行,手动改变checkbox的状态
			checkbox.checked=!checkbox.checked;
		}
		//更新item数据中的checked
		tr.item['checked']=checkbox.checked;
	},
	
	destroy : function(){
		dojo.query(".u-combobox-item",this.tableBodyNode).forEach(dojo.hitch(this,function(tr){
			dojo.removeAttr(tr, "item");
	    }))
		this.inherited(arguments);
	}		
});





评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值