其实上次我都不好意思说我用了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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
