- 浏览: 116726 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
jaimyjie:
能发份源码?谢谢,32166920@qq.com
DataTables实现增删改查(1.10版本) -
liq123:
很不错的博客,受益良多。
事务和原子性的一些思考 -
liq123:
事务和原子性的一些思考 -
西蜀石兰:
<div class="quote_title ...
DataTables实现增删改查(1.10版本) -
唯我独赞mo:
datatable editor的ajax如何进行再次加载呢, ...
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数据的重新封装,即可,以下是个人的封装方法:
经过这样的封装,参数类型如下:
这样后台就方便拿参数进行操作了。
解决了数据流向问题,在看页面本身的问题,表格列名如何与数据源匹配,这个比较简单,代码如下:
columns集合中的顺序,对应表格列的顺序,data的值,对应json数据源中的键;
以下是表格的实际图形:
编辑操作有自己的操作对象,也就是上面buttons栏引用的,代码如下:
fields集合中,label值是模态窗口对应的名称,细心的同学可以看到加了冒号,name对应向后台传入参数的键名。
下面是该模态的实际图片,再次强调,这玩意是自动生成的!
当然第一次使用,自然有相当多的问题还没有解决,欢迎玩过的同学过来指教。
可以重写ajax方法,这几天有时间我把这个整理下。
先看一下插件的页面效果:
对于一款前端插件,要考虑这样一个问题,相比不用插件和其他插件,这款插件的优势值不值得自己花精力去学习并掌握这个插件。
如果仅仅作为表格的载体,其实有很多插件可以选择。我更看重的是它的编辑功能,后台为维护更多的是对单跳数据进行操作,具体场景是客服和客户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
能发份源码?谢谢,32166920@qq.com
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,楼主怎么看
发表评论
-
关于org.apache.commons.httpclient源码的一些跟进
2017-05-09 16:21 641最近想要把一个比较小的文件存到数据库中,网上搜了一大堆乱七八糟 ... -
dataTables后台分页功能的实现
2016-11-14 19:35 2568表格数据量如果很大,超过5000行的话,建议使用后台分页功能。 ... -
关于解决JQuery无法获取初始化时js生成的html标签
2016-11-01 17:30 738今天遇到这个问题,页面的一些div需要由js生成,而后需要对生 ... -
css+js实现进度条
2016-10-19 20:10 1399说一下思路,这里用到的js方法需要有一个类似java的调度器, ... -
CSS+JS写折叠下拉菜单
2016-10-18 14:36 3097看到别人通过id和增加的属性来对应父子关系,觉得麻烦,想着能不 ... -
折叠菜单的两种实现
2016-10-10 11:03 0两种实现方式,一种是纯css实现,效果是鼠标经过时展开,移出后 ... -
tomcat知识点整理
2016-09-19 16:21 0整理下自己在使用tomcat时遇到的一些知识点 1.zip\ ... -
使用maven搭建servlet3.0的web项目
2016-09-19 15:42 0需求: 1.运维根据pom.xml文件进行自动部署 2.存在心 ... -
dataTable重新异步加载表格数据
2016-09-01 20:55 15786如果表格的数据不是固定的,譬如需要根据时间等参数变化,那么不可 ... -
dataTables整理
2016-09-01 20:39 745使用dataTable很久了,最近想整理下这个插件的一些常用内 ... -
dataTable-表格调色
2016-08-10 19:17 783国际惯例贴下效果图,大红真心丑,无耐看的人是三四十岁的大叔,理 ... -
dataTable-editor的设置(2)
2016-08-10 18:56 2970--2016-12-30补充 这几天使用checkbox这个属 ... -
dataTables未解决问题
2016-05-23 18:31 5971.集成bootstrap的datetimepicker失败, ... -
DataTable之Editor个性化设置
2016-05-23 18:18 57451.如何设置增删改查按钮的位置以及是否显示? table ... -
checkbox获取选中元素的值
2016-02-17 17:49 738使用input标签时,页面修改内容在debug模式下不会跟着变 ... -
使用bootstrap搭建查询框(2)
2016-01-28 11:04 705上午接着折腾,总算做出个能看的了,实际效果如下: 先说一 ... -
使用bootstrap搭建查询框
2016-01-27 18:16 1403最近在研究项目JSP页面用到的一些标签,有些标签确实好用,不过 ... -
Echart--tooltip
2015-09-08 16:07 2595这就是一个提示信息,当鼠标经过某一个区域时,有一个信息框 用 ... -
Echart-title
2015-09-08 15:44 1025这个其实没有太多的内容,这是一个对象,这个对象本身有一些参数: ... -
echart使用初级篇
2015-09-08 15:36 780还好今年刚开始接触代码,所以很自然的用到了百度的Echarts ...
相关推荐
datatables增删改查,行内编辑等官方源码实例 冒泡编辑,多行编辑、删除,例子超多,官方的实现代码非常精简,可直接引用 datatables.dll,减少了非常多的页面脚本 带数据库SQL文件 vs2015工程
主要介绍了jQuery+datatables插件实现ajax加载数据与增删改查功能,涉及jQuery结合datatables插件针对页面表格实现数据加载及增删改查等相关操作技巧,需要的朋友可以参考下
Maven项目,bootstrap3+datatables+servlet+sqlite3后台分页增删改查DEMO
异步的增删改查DEMO, 其中应用了一些开发中常用的jquery插件,例如表格插件datatables, jquery ui插件用来处理一些常用的tab或者dialog, jquery validate用来进行异步的表单验证, 欢迎大家下载, 有问题请发送至邮箱...
python中用django框架做的一个简单的入门实例-对用户信息的增删改
利用各种常用的jquery插件做的一个异步刷新的增删改查demo,
datatables1.10向上兼容。日常情况下使用前端插件进行分页,通过后端解析datatables请求来的参数进行request参数解析(demo中对通过datatable包中对datatables发送过来的参数进行一个解析器的操作)通过控制器action...
sqlalchemy-datatables是一个框架不可知的库,它提供jQuery > = 1.10的集成,并帮助您管理应用程序中的服务器端请求。 安装 要通过pip安装: 的Python 3 $ pip3 install sqlalchemy-datatables 要从源代码安装:...
jquery.datatables1.10
datatables Editor-NET-1.6.5 .net 版本,放在.net环境就能跑. editor做增删改查一流
Datatables实现多选框与AJAX返回数据 JAVA版
DataTables-1.9.4 + 1.10.12 两个版本
赠送jar包:datatables-1.9.4.jar; 赠送原API文档:datatables-1.9.4-javadoc.jar; 赠送Maven依赖信息文件:datatables-1.9.4.pom; 包含翻译后的API文档:datatables-1.9.4-javadoc-API文档-中文(简体)版.zip; ...
datatables插件资源免积分贡献下载。
datatables Editor-PHP-1.6.5 .net 版本,放在php环境就能跑. editor做增删改查一流
[感谢网友纠错] 线上突然提示过期,我勒个去。。。看了下源码,修改注释了部分代码,可以用了、、、 JQueryDataTables Editor 1.8.1 版本解除了使用时间限制
手写的datatable购物车,实现增删改查各种功能,并附带有经典冒泡程序
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
datatables+springmvc+bootstrap实现分页,包含数据库 Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。 分页,即时搜索和排序 几乎支持任何数据源:DOM, ...