datatables表格行内编辑的实现
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表格行内编辑的实现的更多相关文章
- vxe-table 可编辑表格 行内编辑以及验证 element-UI集成
<vxe-table border show-overflow ref="xTable" ----------------------------------------- ...
- VUE+Element UI实现简单的表格行内编辑效果
原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 <!DOCTYPE html> <html> <head> <meta cha ...
- ASP.NET Aries 入门开发教程6：列表数据表格的格式化处理及行内编辑
前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...
- js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...
- AppBoxPro - 细粒度通用权限管理框架（可控制表格行内按钮）源码提供下载
特别声明: 提供的源代码已经包含了 AppBoxPro 的全部源代码,用 VS2012 打开项目后,直接 Ctrl+F5 可以运行起来(默认使用VS自带的LocalDB数据库). FineUIPro是 ...
- JS组件系列——BootstrapTable 行内编辑解决方案：x-editable
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
- [转]JS组件系列——BootstrapTable 行内编辑解决方案：x-editable
本文转自:http://www.cnblogs.com/landeanfen/p/5821192.html 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...
- jQuery EasyUI 数据网格 - 启用行内编辑（转自http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid12.html）
可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行.本教程向您展示如何创建一个数据网格(datagrid)和内联 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（83）-Easyui Datagrid 行内编辑扩展
这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时 ...
随机推荐
- python开发函数进阶：命名空间，作用域，函数的本质，闭包，作用域方法（globales）
一,命名空间 #局部命名空间#全局命名空间#内置命名空间 #三者的顺序#加载顺序 内置命名空间(程序运行前加载)->全局命名空间(程序运行中:从上到下加载)->局部命名空间(程 ...
- Java之IO输入输出
首先介绍File类: 我们直接上代码: package com.learn.chap10.sec02; import java.io.File; import java.io.IOException; ...
- MySQL OSC(在线更改表结构)原理
1 OSC介绍 在我们的数据库操作中,更改表结构是一个常见的操作,而当我们的表数据量非常大时,我们更改表结构的时间是非 常的长,并且在跟改期间,会生成一个互斥锁,阻塞对整个表的所有操作,这样,对于我们 ...
- 异常：java.lang.IllegalStateException: Ambiguous handler methods mapped for HTTP path '/app/userInfoMaint/getProvince.do'
调试代码时出现异常:java.lang.IllegalStateException: Ambiguous handler methods mapped for HTTP path '/app/user ...
- oracle:RETURNING 子句
RETURNING 自己通常结合DML 语句使用.(INSERT UPDATE DELETE) 使用方法: UPDATE table_name SET expr1 RETURNING column_n ...
- 动态规划——最长不下降子序列（LIS）
最长不降子序列是这样一个问题: 下面介绍动态规划的做法. 令 dp[i] 表示以 A[i] 结尾的最长不下降序列长度.这样对 A[i] 来说就会有两种可能: 如果存在 A[i] 之前的元素 A[j] ...
- Eclipse中建立Maven项目后，Java Resources资源文件下没有src/main/java文件夹
当建立好一个Maven项目后,在Java Resources资源文件夹下没有看到src/main/java文件夹,然后手动去创建Source Folder时,提示该文件已存在,如图: 有一个解决办法: ...
- String类的内存分配
首先说一下Java内存分配.物理的内存是线性结构,并不存在拥有不同功能的不同区域,编译器(或者JVM)为了更高效地处理数据,会用不同的算法把内存分为各种区域,不同的区域拥有各自的特性,Java中,内存 ...
- uboot启动完成，kernel启动时lcd屏…
先说说开发环境吧: 1 内核:linux2.6.xx 2 uboot:买开发板带的 注释:在最后我又添加了问题得到完美解决的办法. 问题:uboot启动完成,kernel启动时lcd屏幕出现杂色(比如 ...
- 【原】Coursera—Andrew Ng机器学习—Week 4 习题—Neural Networks 神经网络
[1] Answer:C [2] Answer:D 第二层要输出四个元素a1 a2 a3 a4.输入x有两个,加一个x0是三个.所以是4 * 3 [3] Answer:C [4] Answer:C [ ...