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