Datatables实现表格行内编辑功能

表格行内编辑功能通过操作DOM来实现，最终实现效果如下代代码

html

<table class="table table-striped table-bordered table-hover tb_listTable" id="apply_listTable"><thead><tr>
{#            <th>编号</th>#}<th>系统名称</th><th>申请人</th><th>申请人联系方式</th><th>申请人单位</th><th>申请时间</th><th>推荐人</th><th>授权状态</th><th>授权截止日期</th>
{#            <th>最后一次登录时间</th>#}<th>操作</th></tr></thead><tbody></tbody></table>

columnDefs: [{"targets": 7,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);$(cell).attr('dead_time',text)editTableObj.cell(cell).data(text);// $("#permission_time").val(text)})}}
]

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

text形式的是点击单元格的时候出现文本框并且手动让其得焦，失去焦点的时候改变单元格的数据，

以下为修改一整行行的信息

trow就是修改的当前行的信息

Datatables实现表格行内编辑功能相关推荐

datatables表格行内编辑的实现
Datatables是一款jquery表格插件,它是一个高度灵活的工具,灵活就意味着很多功能需要自己去实现,比如说行内编辑功能. Datatables自己是没有行内编辑功能的,最简单的是通过modal ...
JQuery Datatables editor 行内编辑功能
背景 ERP软件中,能进行行内编辑的表单是常用功能,行内编辑功能能让用户在表格中自己填写.修改.删除数据或者选择数据,可以说表格控件是ERP软件的核心控件,而行内编辑功能是核心中的关键. 本文会继续接 ...
bootstrap table 表格支持shirt 多选_bootstrap-table 表格行内编辑实现
这篇文章向大家介绍一下如何使用bootstrap table插件实现表格的行内编辑功能. 我的web前端学习交流群点击进入1045267283,欢迎加入! 先放一张效果图: 应用场景之前的项目也是采 ...
python测试开发django-173.bootstrap实现table表格行内编辑
前言网上看了很多基于bootstrap的table表格行内编辑,需要基于bootstrap-table,bootstrap-table-edit,x-editable等插件,写的很复杂. 我想实现的 ...
fastadmin框架里基于x-editable实现的表格无刷新行内编辑功能的插件的‘datetime‘时间类型无法使用的解决方法
问题描述: 当editable中的参数type设为为datetime的时候会出现以下报错. Uncaught TypeError: Cannot read property 'DPGlobal' of ...
表格行内编辑增删改查
前言最近在做一个OA系统,需要将大量excel中的数据录入,并且希望以后新建数据时,也能像excel那样方便.并且这个后台系统有非常多这样的表单.因此需要做一个内敛的表单控件. 上网找到一款编辑起来 ...
editable组件_表格行内编辑事件
1.简介 x-editable组件是一个适用于bootstrap(目前只更新到bootstrap3),jquery,jquery UI三种风格样式的弹出框编辑插件.本文根据项目需求主要介绍它在boot ...
bootstrap表格行编辑状态_JS表格组件BootstrapTable行内编辑解决方案x-editable
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
bootstrap表格行编辑状态_JS组件系列——BootstrapTable 行内编辑解决方案：x-editable...
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...

Datatables实现表格行内编辑功能

Datatables实现表格行内编辑功能相关推荐

最新文章

热门文章