posts - 33,comments - 129,trackbacks - 0

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

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

  1. 动态增加一行数据
  2. 选择一行,并将这一行的所有数据取出
  3. 提交更新的数据

  看起来很简单吧,其实怪我学的不是很好,也不是很难啦。也就跟大家分享一下,最后我会给出国外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

posted on 2012-12-08 22:28 tony_lp 阅读(...) 评论(...) 编辑 收藏