JavascriptのGrid高性能ランキング
30479 ワード
久しぶりにブログ園に行って記事を書きました.最近は高性能JS開発に関する本を読みました.Gridランキングという自我的な感覚についてはよく分かりました.持ってきてJS上級者に指導してもらいます.JSの初心者たちにも理解してもらえます.コードに何か不具合がありましたら、皆さんの写真を撮ってください.ありがとうございます
ここで私は主にGrid順序付けのエンティティ機能を実装しています.様々なプロジェクトのバージョンで直接使用できるようにします.以下はJSの詳細コードとコメントです.
ここで私は主にGrid順序付けのエンティティ機能を実装しています.様々なプロジェクトのバージョンで直接使用できるようにします.以下はJSの詳細コードとコメントです.
1 /*
2 * @
3 * @CodeBy:MrCo
4 * @Date:2013/3/15
5 * @Mail:[email protected]
6 */
7 (function (w) {
8
9 /*
10 * @ window gridSort
11 */
12 if (w.gridSort) {
13 return new Error(' gridSort ');
14 }
15
16 /*
17 * @
18 * @GID string table ID， ID
19 */
20 var GridSort = function (GID) {
21 this.Grid = document.getElementById(GID);
22 this.Gbody = this.Grid.tBodies[0];
23 this.Ghead = this.Grid.tHead;
24 }
25
26 /*
27 * @
28 * @ Grid ，
29 * @val string
30 * @valType string ， int、float、date, string
31 */
32 GridSort._StringByConvert = function (val, valType) {
33 if (!valType) return val.toString();
34 switch (valType.toLowerCase()) {
35 case 'int':
36 return parseInt(val);
37 case 'float':
38 return parseFloat(val);
39 case 'date':
40 return new Date(Date.parse(val));
41 default:
42 return val.toString();
43 }
44 }
45
46 /*
47 * @Grid
48 * @colIdx int （table） td
49 * @colType string （table） td
50 */
51 GridSort.prototype._Sequence = function (colIdx, colType) {
52 // JS
53 // ， return _Sequence()
54 // Array Sort（）
55 // arguments
56 // A B，
57 // ：
58 // a b， a b ， 0 。
59 // a b， 0。
60 // a b， 0 。
61 return (function(){
62 var _rowPrevVal = GridSort._StringByConvert(arguments[0].cells[colIdx].firstChild.nodeValue, colType), // A
63 _rowAfterVal = GridSort._StringByConvert(arguments[1].cells[colIdx].firstChild.nodeValue, colType); // B
64 if (_rowPrevVal < _rowAfterVal)
65 return -1;
66 else if (_rowPrevVal > _rowAfterVal)
67 return 1;
68 else
69 return 0;
70 });
71 }
72
73 /*
74 * @Grid
75 * @ ， Table ，
76 * @ DOM
77 */
78 GridSort.prototype.BindClickHeadSort = function () {
79 var _rowsHead = this.Ghead.rows[0].cells,
80 _gbody = this.Gbody,
81 _gridRows = _gbody.rows,
82 _girdSort = this._Sequence;
83
84 // Grid Click ， dom onclick
85 for (var i = 0, count = _rowsHead.length; i < count; i++) {
86
87 // ，
88 (function (idx) {
89 _rowsHead[idx].onclick = function () {
90 var _sortRows = [],
91 _sortType = this.getAttribute('stype'),
92 _orderby = _gbody.getAttribute('orderby');
93
94 // Grid Row Copy ，
95 for (var i = 0, count = _gridRows.length; i < count; i++) {
96 _sortRows[i] = _gridRows[i];
97 }
98
99 // _orderby ，
100 if (!_orderby) {
101 // Array Sort() ， Sort()
102 // Sort() ， _Sequence() ，
103 _sortRows.sort(_girdSort(idx, _sortType));
104 _gbody.setAttribute('orderby', 'asc');
105 } else {
106 _sortRows.reverse();
107 _gbody.removeAttribute('orderby');
108 }
109
110 // ， Rows
111 // ， ，
112 var _newRows = document.createDocumentFragment();
113 for (var j = 0, count2 = _sortRows.length; j < count2; j++) {
114 _newRows.appendChild(_sortRows[j]);
115 }
116
117 // Grid
118 _gbody.appendChild(_newRows);
119 }
120 })(i);
121 }
122 }
123
124 /*
125 * GridSort window gridSort
126 * ， widnow.gridSort() GridSort
127 * GridSort
128 */
129 w.gridSort = (function (gid) { new GridSort(gid).BindClickHeadSort(); });
130 })(window); 1 <table width="400" id="tab">
2 <thead>
3 <tr>
4 <th width="100">First Name</th>
5 <th width="100">Last Name</th>
6 <th width="100" stype="date">Date</th>
7 <th width="100" stype="int">Int</th>
8 </tr>
9 </thead>
10 <tbody>
11 <tr>
12 <td>Kingwell</td>
13 <td>Leng</td>
14 <td>3/10/2012</td>
15 <td>1</td>
16 </tr>
17 <tr>
18 <td>1aJim</td>
19 <td>Green</td>
20 <td>3/5/2012</td>
21 <td>2</td>
22 </tr>
23 <tr>
24 <td>Kate</td>
25 <td>Bin</td>
26 <td>1/2/2012</td>
27 <td>3</td>
28 </tr>
29 <tr>
30 <td>Zte</td>
31 <td>Ri</td>
32 <td>5/3/2012</td>
33 <td>33</td>
34 </tr>
35 <tr>
36 <td>Bee</td>
37 <td>Dd</td>
38 <td>8/1/2012</td>
39 <td>15</td>
40 </tr>
41 </tbody>
42 </table>
43 <script type="text/javascript">
44 gridSort('tab');
45 </script>