其實上次我都不好意思說我用了dataTable這個控件，就用到了加載數據，其實很簡單，用個ajax把所有用json傳過來的數據都放入table里面就可以了，稍微顯得困難點的也就是動態增加表頭，也沒用到什么高深的。現在想來當初有點裝逼了，估計過一段時候再看看這篇文章，估計又得套上裝逼的嫌疑，索性把這叫做進步吧。
那現在這一篇算是我對dataTable這個控件的第二次較高深的應用吧，為了方便讀者，我先把這次的主要內容說明如下：
- 動態增加一行數據
- 選擇一行，並將這一行的所有數據取出
- 提交更新的數據
看起來很簡單吧，其實怪我學的不是很好，也不是很難啦。也就跟大家分享一下，最后我會給出國外dataTable官網上一個比較好的例子。
先簡單的給一些圖，看看效果吧。
圖 1-1 主頁面
圖 1-2 點擊新增或修改按鈕
圖1-3 添加了一些數據后的主頁面
圖1-4 修改一列已選數據
圖 1-5 修改數據
圖 1-6 修改數據后的主頁面
上面是一些主要截圖，不知道大家有沒有看懂了。
接下來說說主要代碼：
下面這段代碼實現了每次只能選擇一行，並有相應的樣式顯示，如圖1-6的效果。注意第一行的unbind函數，剛開始就是因為這個弄得我一陣頭大，由於剛開始沒有添加這一行，所以導致選中一行老是不成功，因為這個函數需要在每次新添加一行的時候都調用，然后導致了添加幾行綁定幾次click事件，所以要記得在最開始先取消綁定，然后再綁定事件。
1 function selectRow(){
2 $("#textMakeTable tbody tr").unbind("click");
3 $("#textMakeTable tbody tr").click( function( e ) {
4 if ( $(this).hasClass('row_selected') ) {
5 $(this).removeClass('row_selected');
6 }
7 else {
8 textMakeTable.$('tr.row_selected').removeClass('row_selected');
9 $(this).addClass('row_selected');
10 }
11 });
12 }
這是修改之前獲得當前選中行的數據
1 function modifyRow(){
2 var i = 0;
3 var rowData =[];
4 $('.row_selected').find('td').each(function(){
5 rowData[i] = $(this).html();
6 i++;
7 });
8 //需要設置一些不能修改的選項，具體設置為，$('#id').attr('disable', 'disabled');同時需要注意在增加數據的函數中設置$('#id').attr('disable', true);使得其可以編輯
9 $('#textId').val(rowData[0]);
10 $('#customerId').val(rowData[1]);
11 $('#contractId').val(rowData[2]);
12 $('#accountName').val(rowData[3]);
13 $('#mobileNum').val(rowData[4]);
14 $('#identifyId').val(rowData[5]);
15 $('#conInstit').val(rowData[6]);
16 $('#belInstit').val(rowData[7]);
17 $('#contractType').val(rowData[8]);
18 $('#textId').attr('disable', 'disabled');
19 openAddRowDialog();
20 modifyFlag = 1;
21 }
//這是增加一行的主要代碼，隱藏了部分無關緊要的數據獲取，ajax實現，值得說明的是，通過我這種方法向后台傳送了數據，而且不刷新表格，只是動態的增加了一行。
1 function addRowData(){ 2 textMakeTable.dataTable().fnAddData([ 3 textId,customerId,contractId,accountName,mobileNum,identifyId,conInstit,belInstit,'' 4 ]); 5 selectRow(); 6 /* $.ajax({ }); 7 }
這個就是將修改的數據顯示在表格中，然后將修改的一行數據通過ajax傳向后台。
1 function modifyData(){
2 $('.row_selected').find('td').each(function(){
3 $(this).html(rowData[i]);
4 i++;
5 });
6 }
好了也就這些吧，看着也不難，有空做一下，應該都能實現的吧。
下面列出一些網上，或是dataTable上實現的表格可編輯，大家看看吧。圖1-7 是實現表格可編緝，看起來很強悍，這是在DataTable控件下載下來的example/api的editable.html。個人感覺效果還行，但是功能有所不足，如果我想要實現單行，特殊列的不可編輯呢。而且如果我要添加一行呢，有點困難。我看過源碼，他是通過一個專門的js文件實現的，幾百行代碼吧。可以修改一下它的ajax。里面傳的格式，url都有問題，要改一下。有空我在弄弄這個吧，挺好的。
圖 1-7 表格可編輯
http://editor.datatables.net/ 這個比較強悍吧，但是很可惜，要money，而且很貴。我做的和它實現的效果差不多，也是通過選中一行，然后修改。挺像的，就是一個地方還沒有實現，把鼠標形狀變為手型。刪除的話也很好做的。
圖 1- 8 表格可編輯2
圖 1-9 選中一行，然后點edit
好了，有關於dataTable的就是這些，然后說說最近的一些感受吧，css挺有用的，就比分這次的選中，然后最近也在專研這個，然后么，前台挺有意思的，但是也挺煩的，今天差不多都在忙這個了。挺惡心的。PS：我怎么感覺我像是在寫實驗報告呢，呃，可能受學校摧殘的太嚴重了。天天實驗報告，報告的。就說這些吧，最近又要考試了，頭疼。
以上全部都屬個人原創，請大家轉載的時候附上原創鏈接： http://www.cnblogs.com/tonylp