jQuery datatables row inline edit
Question
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?
1 answers
solution1
2 ACCPTED 2016-08-24 11:25:10
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.