溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
其實上次我都不好意思說我用了dataTable這個控件，就用到了加載數據，其實很簡單，用個ajax把所有用json傳過來的數據都放入table里面就可以了，稍微顯得困難點的也就是動態增加表頭，也沒用到什么高深的。現在想來當初有點裝逼了，估計過一段時候再看看這篇文章，估計又得套上裝逼的嫌疑，索性把這叫做進步吧。
那現在這一篇算是我對dataTable這個控件的第二次較高深的應用吧，為了方便讀者，我先把這次的主要內容說明如下：
看起來很簡單吧，其實怪我學的不是很好，也不是很難啦。也就跟大家分享一下，最后我會給出國外dataTable官網上一個比較好的例子。
先簡單的給一些圖，看看效果吧。
![[置頂] 銀行MIS系統前臺開發總結（3）-dataTable控件應用2](http://pic002.cnblogs.com/images/2012/368430/2012120821431655.jpg)
圖 1-1 主頁面
![[置頂] 銀行MIS系統前臺開發總結（3）-dataTable控件應用2](http://pic002.cnblogs.com/images/2012/368430/2012120821440017.jpg)
圖 1-2 點擊新增或修改按鈕
![[置頂] 銀行MIS系統前臺開發總結（3）-dataTable控件應用2](http://pic002.cnblogs.com/images/2012/368430/2012120821443542.jpg)
圖1-3 添加了一些數據后的主頁面
![[置頂] 銀行MIS系統前臺開發總結（3）-dataTable控件應用2](http://pic002.cnblogs.com/images/2012/368430/2012120821451940.jpg)
圖1-4 修改一列已選數據
![[置頂] 銀行MIS系統前臺開發總結（3）-dataTable控件應用2](http://pic002.cnblogs.com/images/2012/368430/2012120821455793.jpg)
圖 1-5 修改數據
![[置頂] 銀行MIS系統前臺開發總結（3）-dataTable控件應用2](http://pic002.cnblogs.com/images/2012/368430/2012120821415062.jpg)
圖 1-6 修改數據后的主頁面
上面是一些主要截圖，不知道大家有沒有看懂了。
接下來說說主要代碼：
下面這段代碼實現了每次只能選擇一行，并有相應的樣式顯示，如圖1-6的效果。注意第一行的unbind函數，剛開始就是因為這個弄得我一陣頭大，由于剛開始沒有添加這一行，所以導致選中一行老是不成功，因為這個函數需要在每次新添加一行的時候都調用，然后導致了添加幾行綁定幾次click事件，所以要記得在最開始先取消綁定，然后再綁定事件。
![[置頂] 銀行MIS系統前臺開發總結（3）-dataTable控件應用2](http://common.cnblogs.com/images/copycode.gif)
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都有問題，要改一下。有空我在弄弄這個吧，挺好的。
![[置頂] 銀行MIS系統前臺開發總結（3）-dataTable控件應用2](http://pic002.cnblogs.com/images/2012/368430/2012120822095788.jpg)
圖 1-7 表格可編輯
http://editor.datatables.net/ 這個比較強悍吧，但是很可惜，要money，而且很貴。我做的和它實現的效果差不多，也是通過選中一行，然后修改。挺像的，就是一個地方還沒有實現，把鼠標形狀變為手型。刪除的話也很好做的。
![[置頂] 銀行MIS系統前臺開發總結（3）-dataTable控件應用2](http://pic002.cnblogs.com/images/2012/368430/2012120822171943.jpg)
圖 1- 8 表格可編輯2
![[置頂] 銀行MIS系統前臺開發總結（3）-dataTable控件應用2](http://pic002.cnblogs.com/images/2012/368430/2012120822203255.jpg)
圖 1-9 選中一行，然后點edit
好了，有關于dataTable的就是這些，然后說說最近的一些感受吧，css挺有用的，就比分這次的選中，然后最近也在專研這個，然后么，前臺挺有意思的，但是也挺煩的，今天差不多都在忙這個了。挺惡心的。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
