[置顶] 银行MIS系统前台开发总结（3）-dataTable控件应用2

发布时间：2020-06-08 10:28:29 作者：873582595
来源：网络阅读：516

其实上次我都不好意思说我用了dataTable这个控件，就用到了加载数据，其实很简单，用个ajax把所有用json传过来的数据都放入table里面就可以了，稍微显得困难点的也就是动态增加表头，也没用到什么高深的。现在想来当初有点装逼了，估计过一段时候再看看这篇文章，估计又得套上装逼的嫌疑，索性把这叫做进步吧。

那现在这一篇算是我对dataTable这个控件的第二次较高深的应用吧，为了方便读者，我先把这次的主要内容说明如下：

动态增加一行数据
选择一行，并将这一行的所有数据取出
提交更新的数据

　　看起来很简单吧，其实怪我学的不是很好，也不是很难啦。也就跟大家分享一下，最后我会给出国外dataTable官网上一个比较好的例子。

　　先简单的给一些图，看看效果吧。

[置顶] 银行MIS系统前台开发总结（3）-dataTable控件应用2

图 1-1 主页面

[置顶] 银行MIS系统前台开发总结（3）-dataTable控件应用2

图 1-2 点击新增或修改按钮

[置顶] 银行MIS系统前台开发总结（3）-dataTable控件应用2

图1-3 添加了一些数据后的主页面

[置顶] 银行MIS系统前台开发总结（3）-dataTable控件应用2

图1-4 修改一列已选数据

[置顶] 银行MIS系统前台开发总结（3）-dataTable控件应用2

图 1-5 修改数据

[置顶] 银行MIS系统前台开发总结（3）-dataTable控件应用2

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　图 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都有问题，要改一下。有空我在弄弄这个吧，挺好的。

[置顶] 银行MIS系统前台开发总结（3）-dataTable控件应用2