Question

查看此示例https://editor.datatables.net/examples/inline-editing/simple

如果单击单元格，则允许您编辑文本。如果您单击该单元格 - 它将呈现为input标记

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

我无法在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.switch UI和行数据，如angularjs双向数据绑定

花一个小时参加这个演示：

＆＃13;

<!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>

＆＃13;

jQuery数据表行内联编辑

1 个答案: