Datatables是一款jquery表格插件，它是一个高度灵活的工具，灵活就意味着很多功能需要自己去实现，比如说行内编辑功能。

Datatables自己是没有行内编辑功能的，最简单的是通过modal弹窗增改数据实现表格数据的修改，行内编辑我是通过操作DOM实现的，话不多说，先看效果图如下：

index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <link href="bootstrap/css/bootstrap.css" rel="stylesheet">

     <link href="datatables/css/dataTables.bootstrap.min.css" rel="stylesheet">

     <style>

         body,

         html {

             margin: 0;

             padding: 0;

         }

         .gridArea {

             padding: 10px;

         }

     </style>

 </head>

 <body>

     <div class="gridArea">

         <table id="myGrid" class="nowrap table table-striped table-bordered table-hover table-condensed" cellspacing="0"

             width="100%">

             <thead>

                 <tr>

                     <th>显示名称</th>

                     <th>属性名称</th>

                     <th>可为空</th>

                     <th>关联关系</th>

                     <th>属性类型</th>

                 </tr>

             </thead>

         </table>

     </div>

     <script src="jquery/jquery-1.12.3.min.js"></script>

     <script src="datatables/js/jquery.dataTables.min.js"></script>

     <script src="datatables/js/dataTables.bootstrap.min.js"></script>

     <script src="index.js"></script>

 </body>

 </html>
index.js
 function createCombox(data) {

     var _html = '<select style="width:100%;">';

     data.forEach(function (ele, index) {

         _html += '<option>' + ele + '</option>';

     });

     _html += '</select>';

     return _html;

 }

 $(function () {

     var editTableObj;

     var comboData = {

         "2": ["是", "否"],

         "3": ["ManyToOne", "OneToMany", "无"],

         "4": ["String", "Long", "Integer", "Boolean", "Date", "当前实体"]

     };

     var setting = {

         columns: [

             { "data": "display" },

             { "data": "name" },

             { "data": "nullable" },

             { "data": "relation" },

             { "data": "type" }

         ],

         columnDefs: [{

             "targets": [0, 1],

             createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {

                 $(cell).click(function () {

                     $(this).html('<input type="text" size="16" style="width: 100%"/>');

                     var aInput = $(this).find(":input");

                     aInput.focus().val(cellData);

                 });

                 $(cell).on("blur", ":input", function () {

                     var text = $(this).val();

                     $(cell).html(text);

                     editTableObj.cell(cell).data(text)

                 })

             }

         }, {

             "targets": [2, 3, 4],

             createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {

                 var aInput;

                 $(cell).click(function () {

                     $(this).html(createCombox(comboData[colIndex]));

                     var aInput = $(this).find(":input");

                     aInput.focus().val("");

                 });

                 $(cell).on("click", ":input", function (e) {

                     e.stopPropagation();

                 });

                 $(cell).on("change", ":input", function () {

                     $(this).blur();

                 });

                 $(cell).on("blur", ":input", function () {

                     var text = $(this).find("option:selected").text();

                     editTableObj.cell(cell).data(text)

                 });

             }

         }],

         data: [{

             "display": "1",

             "name": "",

             "nullable": null,

             "relation": null,

             "type": null,

         }],

         ordering: false,

         paging: false,

         info: false,

         searching: false,

     };

     editTableObj = $("#myGrid").DataTable(setting);

 });

核心代码如上，重点是columnDefs

官网上的说明是

和 columnsOption参数很像，这个参数允许你给指定列设置选项，应用到一个或这多个列。而不像 columnsOption需要每列都要定义

这个参数是一个列定义对象数组，通过使用 columnDefs.targets选项，告诉Datatables是定义的是那一列，他可以是下列情况：

  • 0或者正整数-列从左到右是从0开始
  • 一个负数-列从右到左的索引(-1代表最后一列)
  • 一个字符串-将字符串和类名匹配列
  • 字符串"_all"-所有列

另外， targets可以同时指定多列，接受一个数组（比如 targets: [ -1, -2 ] ）

createCell可以操作指定的DOM，它的五个参数分别是：td节点，单元格里的数据，正行的数据对象，单元格的行索引，单元格的列索引。

因为序号列和单选占据了0和1所以从2开始，target为2和3的编辑形式是text，target为4/5/6的编辑形式是select，其他的编辑形式也可以。

text形式的是点击单元格的时候出现文本框并且手动让其得焦，失去焦点的时候改变单元格的数据，这个很容易理解，唯一要注意的是，改变单元格数据的时候不能直接操作dom，那样的话只是修改了页面中节点内容，获取表格数据的时候会发现表格数据还是没有变化。修改单元格的数据要用到table.cell().data()这个方法，可以获取和修改单元格的数据，cell的参数是要操作的单元格的dom节点，data不传参数是获取数据，传入参数是修改数据。

select形式遇到了一个坑，就是在点击单元格出现select下拉框后，发现下拉不下来，后来发现是因为点击select下拉框的时候触发了事件冒泡，导致又执行了一遍点击单元格的事件，所以select又重新生成了一遍导致展不开。所以给select的点击事件里加了阻止事件冒泡 e.stopPropagation()。另外本来打算点击单元格的时候出现下拉框并且自动展开，选择一项后select消失并且把数据放进去，结果发现select标签貌似不支持js展开，看了下其它网上的例子都是自己用div模拟的select来展开的，退而求其次就点击单元格后再次手动点击select让它展开，以后有需求再用模拟的方式修改。

Datatables确实功能很多，自由度非常高，但是文档很分散，以后要多多整理才能熟练起来。

最后附一下Datatables中文网链接：http://www.datatables.club/

demo已上传github：https://github.com/gaiyabing/datatable-edit-inline

预览地址：https://gaiyabing.github.io/datatable-edit-inline/index.html

datatables表格行内编辑的实现的更多相关文章

  1. vxe-table 可编辑表格 行内编辑以及验证 element-UI集成

    <vxe-table border show-overflow ref="xTable"  ----------------------------------------- ...

  2. VUE+Element UI实现简单的表格行内编辑效果

    原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 <!DOCTYPE html> <html> <head> <meta cha ...

  3. ASP.NET Aries 入门开发教程6：列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

  4. js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable

    js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...

  5. AppBoxPro - 细粒度通用权限管理框架（可控制表格行内按钮）源码提供下载

    特别声明: 提供的源代码已经包含了 AppBoxPro 的全部源代码,用 VS2012 打开项目后,直接 Ctrl+F5 可以运行起来(默认使用VS自带的LocalDB数据库). FineUIPro是 ...

  6. JS组件系列——BootstrapTable 行内编辑解决方案：x-editable

    前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...

  7. [转]JS组件系列——BootstrapTable 行内编辑解决方案：x-editable

    本文转自:http://www.cnblogs.com/landeanfen/p/5821192.html 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...

  8. jQuery EasyUI 数据网格 - 启用行内编辑（转自http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid12.html）

    可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行.本教程向您展示如何创建一个数据网格(datagrid)和内联 ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（83）-Easyui Datagrid 行内编辑扩展

    这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时 ...

随机推荐

  1. Linux Shell 1>/dev/null 2>&1 含义

    shell中可能经常能看到:echo log > /dev/null 2>&1 命令的结果可以通过%>的形式来定义输出 /dev/null :代表空设备文件>  :代表 ...

  2. 银行排队问题之单队列多窗口加VIP服务（30 分）

    银行排队问题之单队列多窗口加VIP服务(30 分) 假设银行有K个窗口提供服务,窗口前设一条黄线,所有顾客按到达时间在黄线后排成一条长龙.当有窗口空闲时,下一位顾客即去该窗口处理事务.当有多个窗口可选 ...

  3. cp -f 还是提示是否覆盖

    新做了服务器,cp覆盖时,无论加什么参数-f之类的还是提示是否覆盖,这在大量cp覆盖操作的时候是不能忍受的. 把a目录下的文件复制到b目录 以下是代码片段: cp –r a/* b 执行上面的命令时, ...

  4. 五 搭建kafka集群

    1 下载    wget http://mirrors.tuna.tsinghua.edu.cn/apache/kafka/2.0.0/kafka_2.12-2.0.0.tgz 2 tar  -zxv ...

  5. ASP.NET页面传值加号变空格解决办法

    只需要把欲传值进行编码 string EncodeId = Server.UrlEncode(id); 加号就变成了 % 2 B  (中间无空格) 然后再传出去. Request.QueryStrin ...

  6. PHP文件操作(三)-文件的写入

    fwrite()  //对文件进行写入 fwrite(file,string,length)file:必选项,需要写入的文件string:必选项,规定要写入文件的字符串length:可选项,规定要写入 ...

  7. Git 常用命令速查手册

    来源:https://www.jianshu.com/p/5ee9897b6b65 1.初始化仓库 git init 2.将文件添加到仓库 git add 文件名 # 将工作区的某个文件添加到暂存区 ...

  8. Windows访问Linux下的共享目录的配置方法

    user安全级别 第一步:安装samba3(如果已经安装就跳过这一步)  [root@rhce2 /]# yum groupinstall "CIFS file server" 第 ...

  9. Python可执行对象——exec、eval、compile

    Python提供的调用可执行对象的内建函数进行说明,涉及exec.eval.compile三个函数.exec语句用来执行存储在代码对象.字符串.文件中的Python语句,eval语句用来计算存储在代码 ...

  10. powerdesigner Oracle.sql转mysql.sql

    将要导入的库的所有表的表结构(不要表数据,只要表结构)导出成一个.sql文件. 在PowerDesinger里找到 File -->> Reverse Engineer --->&g ...