Datatables 行内编辑,获取鼠标点击的当前单元格

Datatables 行内编辑,获取鼠标点击的当前单元格
首先需要引入,重点在 columnDefs:

<link href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

html代码:

<table id="editable">
</table>

js代码:

   var oTable;
    oTable = $('#editable').DataTable({
            ajax: {
                url: "/keyword/keywordAjax",
                type: "post",
                data: function (d) {
                  //d 是原始的发送给服务器的数据,默认很长,这里是我自己封装过的,你使用自己的方式传输data就可以了。
                }
            },
            searching: false,//关闭搜索框
            serverSide: true,//服务器分页
            processing: true,
            paging: true,
            bSort: true,
            ordering: true,
            autoWidth: true,
            scrollCollapse: false,
            stateSave: true,//开启记录上次翻页
            info:true,
            createdRow: function (row, data, index) {
                /* 设置表格中的内容居中 */
                $('td', row).attr("class", "text-center");
                $('th').attr("class", "text-center");
            },
            columns: [
                {
                    title: "ID",
                    data: "id"
                } ,{
                    title:"中文名称",
                    data:"displayvaluezh"
                } ,{
                    title:"操作列",
                    render:function (data,type,full,callback) {
                        return `<a  title="编辑" onclick="#">编辑</a>;
                    }
                }
            ],
           columnDefs: [{
        "targets": [3, 4, 5, 7], //设置你要给哪一列开启行内编辑
        fnCreatedCell: function(cell, cellData, rowData, rowIndex, colIndex) {
            var trow = null;
            $(cell).click(function() {
                $(this).html('<input type="text" value="请输入" size="16" style="width: 100%"/>');
                var aInput = $(this).find(":input");
                aInput.focus().val(cellData);
                //在用户点击某一单元格的时候,获取当前单元格的信息( trow ),以便后面修改和使用。
                trow = oTable.row($(this)).data();
            });
            $(cell).on("blur", ":input", function() {
                var text = $(this).val();
                $(cell).html(text);
                oTable.cell(cell).data(text);
                console.info("当前修改行:" + JSON.stringify(trow));
                //现在你就可以将获取到当前行的json发送到后台进行修改了
            });
        })
                }]
            }
        });

datatables的API 和文档教程太散了,大家如果有其他需求可以去看看:http://datatables.club/blog/listall.html
最后感谢来自:(https://www.cnblogs.com/GaiaBing/p/9317702.html)提供的帮助

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前端知识结构https://github.com/JacksonTian/fks Web前端开发大系概览https...
    柴东啊阅读 1,102评论 0 10
  • 1-------- 走进前端 2-------- jQuery 3-------- CSS 4-------- A...
    依依玖玥阅读 2,372评论 0 34
  • http://datatables.net/release-datatables/examples/api/sel...
    yxCassiel阅读 441评论 0 0
  • 在明斯克吃饭不算贵也不算便宜,在外面吃比较贵,在土耳其餐厅买一个300克的土耳其鸡肉卷就要十七八元人民币;在宿舍煮...
    学海无涯168阅读 1,329评论 0 1
  • 1 我害怕鬼…… 从来不敢看任何有关鬼的恐怖片。 晚上起来去厕所要鼓足很大的勇气。 一个人的时候,晚上会把所有的卧...
    亿小灰阅读 314评论 0 0