Javascript 没有编辑器插件的数据表内联编辑
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31856961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datatable inline editing without editor plugin
提问by Futuregeek
I was using 'editor' plugin for data table and following was the code:
我正在为数据表使用“编辑器”插件，以下是代码：
Data table editor defined as:
数据表编辑器定义为：
editor = new $.fn.dataTable.Editor( {
ajax: '/contact/' + Contact.id,
table: "#contact-datatable",
fields: [ {
name: "id",
}, {
name: "category",
type: "check",
options: [
{ label: 'Science', value: "Science" },
{ label: 'Maths', value: 'Maths' },
{ label: 'Economics', value: 'Economics' },
]
}
................
]
});
.....
.....
$('#contact-datatable').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this, { submitOnBlur: true } );
} );
Attaching the page with this: When we click on Category, it shows a dropdown for editing (using editor plugin).
用这个附加页面：当我们点击类别时，它会显示一个用于编辑的下拉列表（使用编辑器插件）。
But the problem is datatables' editor plugin is not opensource and my project doesn't allow a payable plugin at all.
但问题是数据表的编辑器插件不是开源的，我的项目根本不允许付费插件。
Can anyone please help me for inline editing in datatables with out 'editor' plugin?
任何人都可以帮助我在没有“编辑器”插件的情况下在数据表中进行内联编辑吗？
Following is the code I wrote without editor :
以下是我在没有编辑器的情况下编写的代码：
Contact.dataTable = $('#contact-datatable').dataTable( {
"ajax": {
"url" : '/Contact/list/' + Contact.id,
"dataSrc": function(check) {
check.id = Contact.id;
return json.check;
},
},
"responsive": true,
"order": [],
"columns": [
{ "data": "id"},
{ "data": "category" },
{ "data": "course" },
]
} );
Category and Course will be a dropdown - and this has to be edit inline. Below attached a page example.
类别和课程将是一个下拉列表 - 这必须是内联编辑。下面附上一个页面示例。
I need 'Category' as an inline editor dropdown and then there will be a button to save 
我需要“类别”作为内联编辑器下拉菜单，然后会有一个按钮来保存
回答by annoyingmouse
Datatables rock! And SpryMedia let us play with it for free! I'm not 100% sure I've used the Editor Plugin despite buying it but I am pleased that I've contributed to its development in some way. One of the main reasons I've not used the plugin is because I was too skint to afford it for a while so wrote my own versions and that's really not that difficult. The steps are quite simple:
数据表摇滚！SpryMedia 让我们免费玩它！尽管购买了编辑器插件，但我不能 100% 确定我是否使用过它，但我很高兴我以某种方式为它的开发做出了贡献。我没有使用该插件的主要原因之一是因为我有一段时间负担不起它，所以编写了自己的版本，这真的没有那么难。步骤非常简单：
- Detect click on row (you've already done this)
- Get the data from the row (not at all hard)
- Populate a form with that data (probably within a modal)
- Update the server with the new values once the form is submitted
- Update the row once the server has been updated
- 检测点击行（你已经这样做了）
- 从行中获取数据（一点也不难）
- 使用该数据填充表单（可能在模态内）
- 提交表单后使用新值更新服务器
- 服务器更新后更新行
The plugin makes all that easy and allows you to figure out the backend as well. The steps above aren't all that difficult but I've not come across something that does it all for you except for the Editor Plugin. Work through the steps and you'll get there.
该插件使这一切变得简单，并允许您找出后端。上面的步骤并不是那么困难，但除了编辑器插件之外，我还没有遇到过可以为您完成所有工作的东西。完成这些步骤，你就会到达那里。
回答by shubham
I wrote my own code for editing inline and made it such that you can edit complete row and define the columns you want to be editable by user.
我编写了自己的内联编辑代码，并使其可以编辑完整的行并定义要由用户编辑的列。
here : https://github.com/sinhashubh/datatable-examples
这里：https: //github.com/sinhashubh/datatable-examples
Steps to do this:
执行此操作的步骤：
Handle click even on the clicked row/cell.
$("#dtexample tbody").on('click', 'tr td', function (e) { RoweditMode($(this).parent()); }); function RoweditMode(rowid) { var prevRow; var rowIndexVlaue = parseInt(rowid.attr("indexv")); if (editIndexTable == -1) { saveRowIntoArray(rowid); rowid.attr("editState", "editState"); editIndexTable = rowid.rowIndex; setEditStateValue(rowid, rowIndexVlaue + 2); } else { prevRow = $("[editState=editState]"); prevRow.attr("editState", ""); rowid.attr("editState", "editState"); editIndexTable = rowIndexVlaue; saveArrayIntoRow(prevRow); saveRowIntoArray(rowid); setEditStateValue(rowid, rowIndexVlaue + 2); } } function saveRowIntoArray(cureentCells) { $.each(ColumnData, function (index, element) { if (element.Editable == true) { var htmlVal = $($(cureentCells).children('.' + element.Name)[0]).html(); EditRowData[element.Name] = htmlVal; } }); } function setEditStateValue(td1, indexRow) { for (var k in EditRowData) { $($(td1).children('.' + k)[0]).html('<input value="' + EditRowData[k] + '" class="userinput" style="width: 99% " />'); } }On pressing Enter after inputting anything, bind enter input (You can change it to maybe a save button as you like.
$("#dtexample tbody").on('keyup', 'input.userinput', function (e) { if (e.keyCode == 13) { updateRowData(this.parentNode.parentNode); } });Update function to make call to server with parameters.
function updateRowData(currentCells) { var table = $("#dtexample").DataTable(); var row = table.row(currentCells); rowid = currentCells.getAttribute('id'); var UpdateRowData = []; $.each(ColumnData, function (index, element) { if (element.Editable==true) { UpdateRowData.push({ 'pname': element.Name , 'pvalue': $($($(currentCells).children('.' + element.Name)).children('input')[0]).val() }); } }); console.log(UpdateRowData); UpdateRowData.push({ 'pname': 'rowid', 'pvalue': rowid }); var parameter = ""; for (i = 0; i < UpdateRowData.length; i++) { if (i == UpdateRowData.length - 1) parameter = parameter + UpdateRowData[i].pname + "=" + UpdateRowData[i].pvalue; else parameter = parameter + UpdateRowData[i].pname + "=" + UpdateRowData[i].pvalue + "&"; } $.ajax({ type: 'POST', url: '/WebService.asmx/UpdateTableData', data: parameter, success: function (data) { var table = $('#dtexample').DataTable(); table.draw('page'); } }); }
即使在单击的行/单元格上也处理单击。
$("#dtexample tbody").on('click', 'tr td', function (e) { RoweditMode($(this).parent()); }); function RoweditMode(rowid) { var prevRow; var rowIndexVlaue = parseInt(rowid.attr("indexv")); if (editIndexTable == -1) { saveRowIntoArray(rowid); rowid.attr("editState", "editState"); editIndexTable = rowid.rowIndex; setEditStateValue(rowid, rowIndexVlaue + 2); } else { prevRow = $("[editState=editState]"); prevRow.attr("editState", ""); rowid.attr("editState", "editState"); editIndexTable = rowIndexVlaue; saveArrayIntoRow(prevRow); saveRowIntoArray(rowid); setEditStateValue(rowid, rowIndexVlaue + 2); } } function saveRowIntoArray(cureentCells) { $.each(ColumnData, function (index, element) { if (element.Editable == true) { var htmlVal = $($(cureentCells).children('.' + element.Name)[0]).html(); EditRowData[element.Name] = htmlVal; } }); } function setEditStateValue(td1, indexRow) { for (var k in EditRowData) { $($(td1).children('.' + k)[0]).html('<input value="' + EditRowData[k] + '" class="userinput" style="width: 99% " />'); } }输入任何内容后按 Enter 键，绑定输入（您可以根据需要将其更改为保存按钮。
$("#dtexample tbody").on('keyup', 'input.userinput', function (e) { if (e.keyCode == 13) { updateRowData(this.parentNode.parentNode); } });更新函数以使用参数调用服务器。
function updateRowData(currentCells) { var table = $("#dtexample").DataTable(); var row = table.row(currentCells); rowid = currentCells.getAttribute('id'); var UpdateRowData = []; $.each(ColumnData, function (index, element) { if (element.Editable==true) { UpdateRowData.push({ 'pname': element.Name , 'pvalue': $($($(currentCells).children('.' + element.Name)).children('input')[0]).val() }); } }); console.log(UpdateRowData); UpdateRowData.push({ 'pname': 'rowid', 'pvalue': rowid }); var parameter = ""; for (i = 0; i < UpdateRowData.length; i++) { if (i == UpdateRowData.length - 1) parameter = parameter + UpdateRowData[i].pname + "=" + UpdateRowData[i].pvalue; else parameter = parameter + UpdateRowData[i].pname + "=" + UpdateRowData[i].pvalue + "&"; } $.ajax({ type: 'POST', url: '/WebService.asmx/UpdateTableData', data: parameter, success: function (data) { var table = $('#dtexample').DataTable(); table.draw('page'); } }); }
