基于JQuery封装的Table操作脚本
1 /**
2 依赖JQuery
3
4
5 **/
6
7 (function () {
8 var Table = window.Table = function (rowCount, columnCount, width, height, rowHeight) {
9 this.rowCount = rowCount;
10 this.columnCount = columnCount;
11 this.width = width;
12 this.height = height;
13 this.rowHeight = rowHeight;
14 this.context;
15 this.tableCss;
16 this.rowCss;
17 this.columnCss;
18 this.onTdCreated = function () { };
19 this.onTdMouseDown = function (e) { };
20 this.onTrCreated = function () { };
21 this.onTrMouseDown = function (e) { };
22 };
23 Table.prototype.CreateTable = function (target) {
24 this.context = $("<table style=‘width:auto‘></table>");
25
26 if (this.tableCss)
27 this.context.addClass(this.tableCss);
28 if (this.width)
29 this.context.css("width", this.width);
30 if (this.height)
31 this.context.css("height", this.height);
32
33 if (target) {
34 this.context.appendTo(target);
35 }
36
37 for (var index = 0; index < this.rowCount; index++) {
38 CreatedRow.call(this, this.context);
39 }
40
41 return this.context;
42 };
43 Table.prototype.GetRowCount = function () {
44 return this.rowCount;
45 };
46 Table.prototype.GetColumnCount = function () {
47 return this.columnCount;
48 };
49 Table.prototype.AddRow = function () {
50 var tr = CreatedRow.call(this, this.context);
51 if (this.rowHeight)
52 tr.css("height", this.rowHeight);
53
54 this.rowCount++;
55 return tr;
56 };
57 Table.prototype.AddColumn = function () {
58 var rows = $(this.context).children().children();
59 for (var index = 0; index < rows.length; index++) {
60 CreateTd.call(this, $(rows[index]));
61 }
62 this.columnCount++;
63 };
64 Table.prototype.RemoveRow = function (row) {
65 $(row).remove();
66 this.rowCount--;
67 return $(row);
68 }
69 Table.prototype.RemoveColumn = function (column) {
70 var tds = $(column).parent().children();
71 var columnIndex = GetColumnIndex(tds, column);
72 var rows = this.context.children().children()
73 for (var index = 0; index < rows.length; index++) {
74 var tr = rows[index];
75 var tdIndex = GetTdIndex(tr, columnIndex);
76 var td = $(tr).children()[tdIndex];
77 if (parseInt($(td).attr("colspan") || 1) > 1) {
78 $(td).attr("colspan", parseInt($(td).attr("colspan") - 1));
79 } else {
80 $(td).remove();
81 }
82 }
83 this.columnCount--;
84 }
85 Table.prototype.MergeColumns = function (column, value) {
86 value = parseInt(value);
87 if (value <= 0) {
88 throw "列数必须大于0！";
89 return;
90 }
91
92 var tds = $(column).nextAll(‘td‘);
93 if (value > tds.length) value = tds.length;
94 var colspan = parseInt($(column).attr("colspan") || 1);
95
96 for (var index = 0; index < value; index++) {
97 colspan += parseInt($(tds[index]).attr("colspan") || 1);
98 $(tds[index]).remove();
99 }
100
101 $(column).attr("colspan", colspan);
102 }
103 Table.prototype.SplitColumn = function (column, value) {
104 value = parseInt(value);
105 if (value <= 0) {
106 throw "列数必须大于0！";
107 return;
108 }
109 var colspan = parseInt($(column).attr("colspan") || 1);
110
111 if (colspan <= 1) {
112 throw "不能拆分单元格！";
113 return;
114 }
115
116 if (value > colspan) {
117 throw "输入数字无效！";
118 return;
119 }
120
121 $(column).attr("colspan", colspan - parseInt(value) + 1);
122 var tr = $(column).parent();
123 for (var index = 0; index < value - 1; index++) {
124 CreateTd.call(this,tr);
125 }
126 }
127 Table.prototype.AddRowFrom = function (row, position) {
128 var tr = CreatedRow();
129 for (var index = 0; index < this.columnCount; index++) {
130 CreateTd(tr);
131 }
132 switch (position) {
133 case "north":
134 $(row).before(tr);
135 break;
136 case "south":
137 $(row).after(tr);
138 break;
139 default:
140 $(row).after(tr);
141 break;
142 }
143 this.rowCount++;
144 return tr;
145 }
146 Table.prototype.AddColumnFrom = function (column, position) {
147 var columnIndex = GetColumnIndex($(column).parent().children(), column);
148 if (columnIndex < 0) {
149 throw "获取当前列失败！";
150 return;
151 }
152 var rows = this.context.children().children();
153 for (var index = 0; index < rows.length; index++) {
154 row = rows[index];
155 var td = CreateTd();
156 var tdIndex = GetTdIndex(row, columnIndex);
157 switch (position) {
158 case "west":
159 $($(row).children()[tdIndex]).before(td);
160 break;
161 case "east":
162 $($(row).children()[tdIndex]).after(td);
163 break;
164 default:
165 $($(row).children()[tdIndex]).after(td);
166 break;
167 }
168 }
169 this.columnCount++;
170 }
171
172 function CreatedRow(target) {
173 var tr;
174 if (this.rowCss)
175 tr = $("<tr class=‘" + this.rowCss + "‘></tr>");
176 else
177 tr = $("<tr></tr>");
178
179 if (target) {
180 tr.appendTo(target);
181 }
182
183 for (var index = 0; index < this.columnCount; index++) {
184 CreateTd.call(this, tr);
185 }
186
187 if ($.isFunction(this.onTrMouseDown))
188 tr.bind("mousedown ", this.onTrMouseDown);
189
190 if ($.isFunction(this.onTrCreated))
191 this.onTrCreated.call(tr);
192
193 return tr;
194 };
195
196 function CreateTd(target) {
197 var td;
198 if (this.columnCss)
199 td = $("<td class=‘" + this.columnCss + "‘></td>");
200 else
201 td = $("<td></td>");
202
203 if (target) {
204 td.appendTo(target);
205 }
206
207 if ($.isFunction(this.onTdMouseDown))
208 td.bind("mousedown ", this.onTdMouseDown);
209
210 if ($.isFunction(this.onTdCreated))
211 this.onTdCreated.call(td);
212
213 return td;
214 }
215
216 function GetColumnIndex(tds, td) {
217 var tdIndex = $.inArray(td, tds);
218 var columnIndex = 0;
219 for (var index = 0; index <= tdIndex; index++) {
220 columnIndex += parseInt($(tds[index]).attr("colspan") || 1);
221 }
222 return columnIndex;
223 }
224
225 function GetTdIndex(tr, columnIndex) {
226 var tds = $(tr).children();
227 var ColumnIndex = 0;
228 for (var index = 0; index < tds.length; index++) {
229 ColumnIndex += parseInt($(tds[index]).attr("colspan") || 1);
230 if (ColumnIndex >= columnIndex)
231 return index;
232 }
233 }
234 }());
时间： 2024-07-31 19:53:19