維新生活日記

在.NET上，我們已經相當習慣使用DataTable這樣的物件來處理大量資料。Browser端呢？

在開發AJAX Web應用程式的時候，我們常常會需要再Browser端處理由Web端拋轉過來的多筆資料，也因為這樣的需求，我就直接在Browser用JavaScript實作出一個DataTable物件。來協助我處理Browser端的多筆資料。

這個概念其實很簡單，就是利用二維的字串陣列來當作DataTable的Browser端記憶體儲存區。而JavaScript的陣列物件其實還滿好用的。

例如：

DataRow = new Array();

DataCol = new Array();

就可以建立起資料列以及資料欄的陣列物件

DataCol.push("AAA");

DataCol.push("BBB");

DataCol.push("CCC");

DataRow.push(DataCol);

這樣資料欄陣列就可以直接被加到資料列陣列中

DataCol = DataRow[row];

str_value = DataCol[col];

這樣就可以直接取得 row 列的 col欄 資料..!!!!..

這只是DataTable的資料存取基本邏輯

當然，還要額外實作出 setValue(), getValue(),

以及 MaxRow(), FieldCount() 等 function 就可以讓你的DataTable物件逐漸成行..!!!!..

另外直得一提的是，其實JavaScript的物件宣告也滿簡單的，很好用，例如要建立一個所謂的DataTable物件，只要利用下面這個範例就可以宣告出這個DataTable物件

1. function DataTable()
2. {
3. this.FieldName = null;
4. this.DataRow = null;
5. this.MaxRow = null;
6. this.FieldCount = null;
8. this.create = function (columns, rows)
9. {
10. this.FieldName = new Array();
11. this.DataRow = new Array();
12. this.MaxRow = 0;
13. this.FieldCount = 0;
15. for (var col = 0; col < columns.length; col++)
16. {
17. var str_name = columns[col];
19. this.FieldName.push(str_name);
20. }
22. this.FieldCount = this.FieldName.length;
24. for (var row = 0; row < rows; row++)
25. {
26. var data_col = new Array();
28. for (var col = 0; col < columns.length; col++)
29. {
30. data_col.push("");
31. }
33. this.DataRow.push(data_col);
34. }
36. this.MaxRow = this.DataRow.length;
37. }
39. this.getValue = function (row, ColumnName)
40. {
41. var i_column = this.FieldName.indexOf(ColumnName);
42. var data_col = this.DataRow[row];
44. return (data_col[i_column]);
45. }
47. this.setValue = function (row, ColumnName, ColumnValue)
48. {
49. var i_column = this.FieldName.indexOf(ColumnName);
50. var data_col = this.DataRow[row];
52. data_col[i_column] = ColumnValue;
53. }
54. }

使用的方法也很簡單

var dt = new DataTable();

dt.create("col1,col2,col3,col4,col5".split(","), 10);

這樣就可以簡單地在Browser端建立DataTable的 Instance

並且建立一個10筆資料列，以及欄位名稱為：co11, col2, col3, col4, col5的 DataTable

這只是一個簡單的範例，之後可以建立ImportXML, ImportCSV or 其他 function 將Web端拋出來的多筆資料匯入 Browser端 DataTable中。

就可以在Browser端輕易地操作大量資料..!!!!