CODEWITHSUNDEEP
javascriptjquerydatatabledatatables
I'll-Be-Back
I'll-Be-Back

Reputation: 10828

jQuery datatables row inline edit

Looking at this example https://editor.datatables.net/examples/inline-editing/simple

It allow you edit the text if you click on the cell. If you click on the cell - it will then render into input tag

My case, I want a bit different. Each row have a Edit button, user click on the Edit button then all input tags will be displayed on that row.

I am unable to find any demo or how to do this on datatables, can you advice?

Upvotes: 0

Views: 5706

Answers (1)

Ying Yi
Ying Yi

Reputation: 782

when click td render into input code like this:

$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");
        });
    });

click on the Edit button then all input tags will be displayed on that row:
1.row data in memory
2.when click button,find this row's td config (which UI to render:input,select,radio....)
3.switch UI and row data like angularjs two-way Data Binding

Spend one hour for this Demo:

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

Upvotes: 4

Related Questions