其实上次我都不好意思说我用了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
