jQuery数据表行内联编辑

Question

看这个例子https://editor.datatables.net/examples/inline-editing/simple

如果单击该单元格，则可以编辑文本。 如果单击该单元格，则它将呈现为input标签

我的情况，我想有所不同。 每行都有一个“编辑”按钮，用户单击“编辑”按钮，然后所有输入标签将显示在该行上。

我无法找到任何演示或如何做到这一点的datatables ，你可以咨询？

Answer 1

当单击td渲染成这样的输入代码时：

$td.click(function () {
        var OriginalContent = $(this).text();

        $(this).addClass("cellEditing");
        $(this).html('<input type="text" value="'+ OriginalContent + '"  style="width: 100%"/>');
        $(this).children().first().focus();

        $(this).children().first().keypress(function (e) {
            if (e.which == 13) {
                var newContent = $(this).val();
                $(this).parent().text(newContent);
                $(this).parent().removeClass("cellEditing");
            }
        });

        $(this).children().first().blur(function(){
            $(this).parent().text(OriginalContent);
            $(this).parent().removeClass("cellEditing");
        });
    });

单击“编辑”按钮，然后所有输入标签将显示在该行上：
1.行数据在内存中
2.单击按钮时，找到该行的td配置（要呈现的UI：输入，选择，广播...。）
3.切换UI和行数据，例如angularjs双向数据绑定

花费一个小时进行此演示：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> </head> <body> <div id="newGrid"></div> <script> function Grid(){ this.config = { id:"newGrid", data:[ {name:"alert",age:"18"}, {name:"Jone",age:"28"} ] }; this.rows = []; } Grid.prototype.render =function(){ var html = '<table class="table table-bordered">' + '<tr>' + '<th>Name</th>' + '<th>age</th>' + '<th></th>' + '</tr>' + '</table>'; var $table = $(html); for(var i= 0,item;item=this.config.data[i++];){ var newRow = new Row(); this.rows.push(newRow); var rowDom = newRow.render(item); $table.append(rowDom); } $("#"+this.config.id).append($table); }; function Row(){ this.cells = {}; } Row.prototype.render = function(row){ var _this = this; var nameCell= new Cell(row.name); var ageCell = new Cell(row.age); this.cells = { name:nameCell, age:ageCell }; var $editBtn= $("<button>Edit</button>").click(function(){ _this.editRow(); }); var $saveBtn= $("<button>Save</button>").click(function(){ _this.saveRow(); }); return $("<tr></tr>") .append($("<td></td>").append(nameCell.$Dom)) .append($("<td></td>").append(ageCell.$Dom)) .append($("<td></td>").append($editBtn).append($saveBtn)); }; Row.prototype.editRow = function(){ for(var key in this.cells){ this.cells[key].editorCell(); } }; Row.prototype.saveRow = function(){ var data = {}; for(var key in this.cells){ //console.log(key+"="+this.cells[key].editor.getValue()); data[key] = this.cells[key].editor.getValue() } alert(JSON.stringify(data)) }; function Cell(value){ this.$Dom = $("<td></td>"); this.editor = null; this.render(value); } Cell.prototype.render = function(value){ this.editor = new Forms["Span"](value); return this.$Dom.append(this.editor.$Dom); }; Cell.prototype.editorCell = function(){ this.editor = new Forms["Input"](this.editor.getValue()); this.$Dom.html(this.editor.$Dom) }; var Forms = {}; //Span Object Forms.Span = function(value){ this.$Dom = $('<span>'+ value +'</span>'); }; Forms.Span.prototype.setValue = function(value){ this.$Dom.text(value); }; Forms.Span.prototype.getValue = function(){ return this.$Dom.text(); }; //Input Object Forms.Input = function(value){ this.$Dom = $('<input type="text" style="width:100%">'); this.setValue(value); }; Forms.Input.prototype.setValue = function(value){ this.$Dom.val(value); }; Forms.Input.prototype.getValue = function(){ return this.$Dom.val(); }; //Init Grid $(document).ready(function(){ new Grid().render(); }) </script> </body> </html>

jQuery数据表行内联编辑

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-08-24 11:25:10

jQuery数据表行内联编辑

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-08-24 11:25:10

解决方案1
2 已采纳 2016-08-24 11:25:10