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