1 /**
  2  * @version 1.1
  3  * @author ideawu@163.com
  4  * @link http://www.ideawu.net/
  5  * @class
  6  * 用于显示两栏(备选框, 已选框)选择器控件的JavaScript控件.
  7  *
  8  * @param {String} id: HTML节点的id, 控件将显示在该节点中.
  9  * @returns {TableView}: 返回分页控件实例.
 10  * @requires jQuery
 11  *
 12  * @example
 13  *
 14  * #HTML代码:
 15  * <div id="sel_div"></div>
 16  * 
 17  * #JavaScript代码:
 18  * var sel = new SelectorView('sel_div');
 19  * sel.src.header = {
 20  * 	id			: 'Id',
 21  * 	name		: 'Name',
 22  * 	text		: 'Text'
 23  * };
 24  * sel.dst.header = {
 25  * 	id			: 'Id',
 26  * 	name		: 'Name',
 27  * };
 28  * sel.src.dataKey = 'id';
 29  * sel.dst.dataKey = 'id';
 30  * sel.src.title = '可选';
 31  * sel.dst.title = '已选';
 32  *
 33  * sel.src.add({id: 1, name: 'Tom', text: 'Tomcat'});
 34  * sel.src.add({id: 2, name: 'Jerry', text: 'Jerrimy'});
 35  *
 36  * sel.render();
 37  */
 38 function SelectorView(id){
 39 	// 为了在函数中引用.
 40 	var self = this;
 41 
 42 	this.id = id;
 43 	this._rendered = false;
 44 
 45 	/**
 46 	 * 当前控件所处的HTML节点引用.
 47 	 * @type DOMElement
 48 	 */
 49 	this.container = null;
 50 	/**
 51 	 * 备选框TableView.
 52 	 * @type TableView
 53 	 */
 54 	this.src = null;
 55 	/**
 56 	 * 已选框TableView.
 57 	 * @type TableView
 58 	 */
 59 	this.dst = null;
 60 
 61 	this._init = function(){
 62 		var div = document.getElementById(this.id);
 63 		div.view = this;
 64 
 65 		var id_prefix = 'asdfsafokmlv';
 66 		var src_id = this.id + '_' + id_prefix + '_src';
 67 		var dst_id = this.id + '_' + id_prefix + '_dst';
 68 		var str = '';
 69 		str += '<div class="SelectorView">\n';
 70 		str += '<table class="selector_table">\n';
 71 		str += '<tr>';
 72 		str += '<td valign="top" class="src">';
 73 			str += '<div id="' + src_id + '" class="src_div"></div>';
 74 			str += '<input type="button" value="选择" onclick="document.getElementById(\'' + this.id + '\').view.select()" />';
 75 		str += "</td>\n";
 76 		str += '<td valign="top" class="dst">';
 77 			str += '<div id="' + dst_id + '" class="dst_div"></div>';
 78 			str += '<input type="button" value="取消选择" onclick="document.getElementById(\'' + this.id + '\').view.unselect()" />';
 79 		str += "</td>\n";
 80 		str += "</tr>\n";
 81 		str += "</table>\n";
 82 		str += '</div><!-- /.SelectorView -->\n';
 83 		div.innerHTML = str;
 84 		
 85 		this.container = div;
 86 		this.src = new TableView(src_id);
 87 		this.dst = new TableView(dst_id);
 88 	}
 89 
 90 	this._init();
 91 
 92 	// 重写数据表格的行双击方法.
 93 	this.src.dblclick = function(id){
 94 		var row = self.src.get(id);
 95 		if(row == false){
 96 			return;
 97 		}
 98 		self.dst.add(row);
 99 		self.src.del(row);
100 	};
101 
102 	// 重写数据表格的行双击方法.
103 	this.dst.dblclick = function(id){
104 		var row = self.dst.get(id);
105 		if(row == false){
106 			return;
107 		}
108 		self.src.add(row);
109 		self.dst.del(row);
110 	};
111 
112 	/**
113 	 * 渲染整个选择控件.
114 	 */
115 	this.render = function(){
116 		this.src.render();
117 		this.dst.render();
118 		this._rendered = true;
119 	};
120 
121 	/**
122 	 * 将备选框中选中的数据移动到已选框中.
123 	 */
124 	this.select = function(){
125 		var rows = this.src.getSelected();
126 		this.dst.addRange(rows);
127 		this.src.delRange(rows);
128 		this.src.unselectAll();
129 	};
130 
131 	/**
132 	 * 将已选框中选中的数据移动到备选框中.
133 	 */
134 	this.unselect = function(){
135 		var rows = this.dst.getSelected();
136 		this.src.addRange(rows);
137 		this.dst.delRange(rows);
138 		this.dst.unselectAll();
139 	};
140 
141 	/**
142 	 * 获取已选择的的记录对象的列表, 也即已选框中的所有记录.
143 	 */
144 	this.getSelected = function(){
145 		return this.dst.getDataSource();
146 	};
147 
148 	/**
149 	 * 获取所有已选择的数据对象键值列表.
150 	 */
151 	this.getSelectedKeys = function(){
152 		var keys = [];
153 		var rows = this.dst.getDataSource();
154 		for(var i in rows){
155 			keys.push(rows[i][this.dst.dataKey]);
156 		}
157 		return keys;
158 	};
159 }
160