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 Samba目录服务搭建与Java客户端访问

    前言: 本文比较简略,只求快速入门,若要了解详情,推荐一篇文章:http://www.cnblogs.com/mchina/archive/2012/12/18/2816717.html 1,安装sa ...

  2. golang动态调用方法

    package main import ( "fmt" "reflect" ) type YourT1 struct { } func (y *YourT1) ...

  3. Mac电脑Tomcat下载及安装(详细)

    下载Tomcat 1.打开Apache Tomcat官网,选择你需要的版本进行下载: 地址http://tomcat.apache.org/download-70.cgi   2.解压apache-t ...

  4. Oracle redo与undo

    Undo and redo Oracle最重要的两部分数据,undo 与redo,redo(重做信息)是oracle在线(或归档)重做日志文件中记录的信息,可以利用redo重放事务信息,undo(撤销 ...

  5. zabbix 在linux上安装以及一些配置

    本文章将演示zabbix 3.2版本的安装,供有需要的伙伴们参考: 网络也有很多关于zabbix的安装文档,甚至每一步的配置都有详细的截图,我这里就不演示截图了,多配置几次自然就熟练了.多折腾. 楼主 ...

  6. 代码说明call和apply方法的区别 (咱们这方面讲解的少，这样的题有变式，需要举例讲解一下)

    这两个都是函数的方法,可以改变this的指向,fn.call(obj,param1,param2,…) call传入单个参数 fn.apply(obj,[param1,param2,...]) app ...

  7. Linux - 文件合并

    >:左边命令的结果覆盖右边文件的内容 cat 命令,把文件的内容覆盖另一个文件中的内容 把两个文件的内容合并到一个文件中 echo 命令 whoami 命令 >>:把左边命令执行的结 ...

  8. spark集群配置以及java操作spark小demo

    spark 安装 配置 使用java来操作spark spark 安装 tar -zxvf spark-2.4.0-bin-hadoop2.7.tgz rm spark-2.4.0-bin-hadoo ...

  9. java成神之——Stream和Optional

    Stream流 基本使用 流关闭 平行流 流重用 iterator转换成流 分组计数 无限流 流转集合 压缩流 统计数值流 集合转换流遍历 流拼接 reduce 使用流生成随机字符串 流的包装流 几种 ...

  10. springboot成神之——basic auth和JWT验证结合

    本文介绍basic auth和JWT验证结合 目录结构 依赖 config配置文件WebSecurityConfig filter过滤器JWTLoginFilter filter过滤器JWTAuthe ...