jQuery数据表行内联编辑
看看这个例子https://editor.datatables.net/examples/inline-editing/simple
它允许您在单击单元格时编辑文本。如果单击单元格，它将呈现为input标记
我的情况，我想要有点不同。每行都有一个编辑按钮，用户点击编辑按钮，然后所有输入标签将显示在该行上。
我在datatables上找不到任何演示或如何执行此操作，您能给我一些建议吗？
共有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>-
pre { white-space: pre-wrap; } 可编辑的功能是最近添加到数据网格（datagrid）的。它可以使用户添加一个新行到数据网格（datagrid）。用户也可以更新一个或多个行。 本教程向您展示如何创建一个数据网格（datagrid）和内联编辑器。 创建数据网格（DataGrid） $(function(){ $('#tt').datagrid({
-
我使用DataTables编辑器插件(https://editor.datatables.net/)用于编辑包含远程数据的表(https://datatables.net/examples/data_sources/server_side.html)在内联模式下(https://editor.datatables.net/examples/inline-editing/simple.html) 在
-
问题内容： 我有此代码（如下）。 我正在使用它将数据传递到Web服务，但是问题是其中是否有任何字符（，/？：@＆= + $＃）。我放入了一个很好的encodeURIComponent，然后在Web服务中再次将它们放回去。 我要问的是，是否有更好的方法可以做到这一点？我每次都要对字符串进行编码，然后才能通过，这似乎有点疯狂。 谢谢 问题答案： 该Web服务属于您还是您使用其他人的Web服务？Web服
-
本文向大家介绍ABAP 内联数据声明，包括了ABAP 内联数据声明的使用技巧和注意事项，需要的朋友参考一下 示例 在某些情况下，可以内联执行数据声明。
-
为了极端底层操作和性能要求，你可能希望直接控制 CPU。Rust 通过asm!宏来支持使用内联汇编。 asm!(assembly template : output operands : input operands : clobbers : options ); 任何asm的使用需要功能通道（需要在包装箱上加上#![feature(asm)]来允许使用）并且当然也
-
问题内容： 我正在与AngularJS一起显示应用程序键（应用程序标识符）表，我想使用编辑按钮在该表行中显示一个小表格。然后用户可以编辑字段并单击“保存”或“取消” 演示：http：//jsfiddle.net/Thw8n/ 我的内联表单效果很好。我单击编辑，然后出现一个表格。取消也很棒。 我的问题是 如何连接保存按钮和将对API进行$ http调用的函数 如何从该行获取数据以发送到$ http调