DataTables实现增删改查(1.10版本)

这段时间项目需要做个APP的管理后台，运维人员用的，简单的增删改查，于是想到了dataTable，下面简单记录下个人在使用过程中的一些难点，顺带一些没有解决的问题，将随着项目的进展，慢慢解决。

先看一下插件的页面效果：



对于一款前端插件，要考虑这样一个问题，相比不用插件和其他插件，这款插件的优势值不值得自己花精力去学习并掌握这个插件。

如果仅仅作为表格的载体，其实有很多插件可以选择。我更看重的是它的编辑功能，后台为维护更多的是对单跳数据进行操作，具体场景是客服和客户1V1的交流，而dataTables对于单条数据的编辑，是相当不错的，具体来说，采用bootstrap的模态窗口（插件自动生成）实现了修改功能。对于开发人员来说，省去了另写编辑页面的繁琐。

话不多说，下面慢慢粘代码以及效果图。

对于一个和后台交互的插件，最重要其实就两件事情，需要什么样的数据格式，提交给后台的又是怎样的数据格式，搞清楚这两点，其实就没什么了。

dataTables支持很多数据源，官方有详细介绍，项目采用了轻量级的json数据进行传输，以下是插件填充表格时所需的数据格式：




对于增删改查，dataTable默认传给后台的数据相当蛋疼，这里费了不少心思，最后重新封装了下数据格式，先看一下默认的数据格式：



想要看懂上面的数据，还需要知道一个知识点，如果想使用dataTables的编辑功能，返回数据中，需要包括"DT_RowId"这个键，这个键值对需要放在每一行的数据中，充当表格的主键，当然，重复也没关系，这就是让人困惑的地方；

有了这个知识点，在看编辑数据时，默认的数据格式，这些都是键值对，对于键的命名，action表示操作行为，包括remove,edit,create三种键值，支持自定义，详细的可以参考官方文档；剩下的便是每个单元格的表示，“data[row1][accountId]”中，data是固定的，row1是选中行DT_RowId的值，accountId是选中行列的别称，关于列名和json数据源键名的匹配，以下会有详细代码。

看懂这个之后，再去思考后台如何拿数据，后台不可能去遍历request中的所有参数，所以比较好的方法就是在前台二次封装这些数据，通过对json数据的重新封装，即可，以下是个人的封装方法：

	ajax: {
		url:"/charge-manage/individualMember/edit",
		data:function(data){
			var result={};
			for(var i in data.data){
				var result=data.data[i];
				result.DT_RowId=i;
				result.action=data.action;
				console.log(result);
			}
			return result;
		},
	},

经过这样的封装，参数类型如下：




这样后台就方便拿参数进行操作了。

解决了数据流向问题，在看页面本身的问题，表格列名如何与数据源匹配，这个比较简单，代码如下：

	$('#member').DataTable( {
    	dom: "Bfrtip",
    	ajax:"/charge-manage/individualMember/getMember?"+"phoneNum="+phoneNum,
    	columns:[{data:"memberCode"},
    	         {data:"accountId"},
    	         {data:"phoneNum"},
    	         {data:"password"},
    	         {data:"lastLoginTime"}    	         
    	         ],
    	select:true,
        buttons: [
             { extend: "create", editor: editor },
             { extend: "edit",   editor: editor },
             { extend: "remove", editor: editor }]
    } );

columns集合中的顺序，对应表格列的顺序，data的值，对应json数据源中的键；
以下是表格的实际图形：

编辑操作有自己的操作对象，也就是上面buttons栏引用的，代码如下：

	var editor = new $.fn.dataTable.Editor( {
	ajax: {
		url:"/charge-manage/individualMember/edit",
		data:function(data){
			var result={};
			for(var i in data.data){
				var result=data.data[i];
				result.DT_RowId=i;
				result.action=data.action;
				console.log(result);
			}
			return result;
		},
	},
		  	
		  	 fields: [{
	                label: "会员编码:",
	                name: "memberCode"
	            }, {
	                label: "账户编码:",
	                name: "accountId"
	            },{
            	 	label: "手机号:",
	                name: "phoneNum"
	            },{
            	 	label: "密码:",
	                name: "password"	            	
	            },{
            	 	label: "最后登录时间:",
	                name: "lastLoginTime"	            	
	            }],
	        table: "#member"
	 });

fields集合中，label值是模态窗口对应的名称，细心的同学可以看到加了冒号，name对应向后台传入参数的键名。
下面是该模态的实际图片，再次强调，这玩意是自动生成的！



当然第一次使用，自然有相当多的问题还没有解决，欢迎玩过的同学过来指教。

评论

3 楼 jaimyjie 2017-12-01  

能发份源码？谢谢,[e-mail]

2 楼 西蜀石兰 2016-08-30  

唯我独赞mo 写道

datatable editor的ajax如何进行再次加载呢，类似以datatable的table.ajax.url,楼主怎么看

可以重写ajax方法，这几天有时间我把这个整理下。

1 楼 唯我独赞mo 2016-06-16  

datatable editor的ajax如何进行再次加载呢，类似以datatable的table.ajax.url,楼主怎么看