可编辑的数据表不编辑所有列
我有13个数据列和两列用于编辑和删除 我在JS中进行了更改以处理所有13个数据列。
但是当我点击添加或编辑时，只有前4列可以编辑。
这是我的HTML
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
<thead>
<tr>
<th>EMPID</th>
<th>NAME</th>
<th>JOB TITLE</th>
<th>JOB CODE</th>
<th>EMAIL</th>
<th>BAND</th>
<th>LOCATION</th>
<th>MANAGER</th>
<th>SCHOOL</th>
<th>MAJOR</th>
<th>YEARS EXP</th>
<th>EDUCATION</th>
<th>SKILLS</th>
<th>EDIT</th>
<th>DELETE</th>
</tr>
</thead>
<tbody>
<c:forEach var="user" items="${listUsers.rows}">
<tr>
<td><c:out value="${user.EMPID}" /></td>
<td><c:out value="${user.NAME}" /></td>
<td><c:out value="${user.JOB_TITLE}" /></td>
<td><c:out value="${user.JOB_CODE}" /></td>
<td><c:out value="${user.EMAIL}" /></td>
<td><c:out value="${user.BAND}" /></td>
<td><c:out value="${user.LOCATION}" /></td>
<td><c:out value="${user.MANAGER}" /></td>
<td><c:out value="${user.SCHOOL}" /></td>
<td><c:out value="${user.MAJOR}" /></td>
<td><c:out value="${user.YEARS_EXP}" /></td>
<td><c:out value="${user.EDUCATION}" /></td>
<td><c:out value="${user.SKILLS}" /></td>
<td><a class="edit" href="javascript:;"> Edit </a></td>
<td><a class="delete" href="javascript:;"> Delete </a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
更新的JS是
var TableDatatablesEditable = function () {
var handleTable = function () {
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}
oTable.fnDraw();
}
function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[4] + '">';
jqTds[5].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[5] + '">';
jqTds[6].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[6] + '">';
jqTds[7].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[7] + '">';
jqTds[8].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[8] + '">';
jqTds[9].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[9] + '">';
jqTds[10].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[10] + '">';
jqTds[11].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[11] + '">';
jqTds[12].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[12] + '">';
jqTds[13].innerHTML = '<a class="edit" href="">Save</a>';
jqTds[14].innerHTML = '<a class="cancel" href="">Cancel</a>';
}
function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
oTable.fnUpdate(jqInputs[5].value, nRow, 5, false);
oTable.fnUpdate(jqInputs[6].value, nRow, 6, false);
oTable.fnUpdate(jqInputs[7].value, nRow, 7, false);
oTable.fnUpdate(jqInputs[8].value, nRow, 8, false);
oTable.fnUpdate(jqInputs[9].value, nRow, 9, false);
oTable.fnUpdate(jqInputs[10].value, nRow, 10, false);
oTable.fnUpdate(jqInputs[11].value, nRow, 11, false);
oTable.fnUpdate(jqInputs[12].value, nRow, 12, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 13, false);
oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 14, false);
oTable.fnDraw();
}
function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
oTable.fnUpdate(jqInputs[5].value, nRow, 5, false);
oTable.fnUpdate(jqInputs[6].value, nRow, 6, false);
oTable.fnUpdate(jqInputs[7].value, nRow, 7, false);
oTable.fnUpdate(jqInputs[8].value, nRow, 8, false);
oTable.fnUpdate(jqInputs[9].value, nRow, 9, false);
oTable.fnUpdate(jqInputs[10].value, nRow, 10, false);
oTable.fnUpdate(jqInputs[11].value, nRow, 11, false);
oTable.fnUpdate(jqInputs[12].value, nRow, 12, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 13, false);
oTable.fnDraw();
}
var table = $('#sample_editable_1');
var oTable = table.dataTable({
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
// set the initial value
"pageLength": 20,
"language": {
"lengthMenu": " _MENU_ records"
},
"columnDefs": [{ // set default column settings
'orderable': true,
'targets': [0]
}, {
"searchable": true,
"targets": [0]
}],
"order": [
[0, "asc"]
] // set first column as a default sort by asc
});
var tableWrapper = $("#sample_editable_1_wrapper");
var nEditing = null;
var nNew = false;
$('#sample_editable_1_new').click(function (e) {
e.preventDefault();
if (nNew && nEditing) {
if (confirm("Previose row not saved. Do you want to save it ?")) {
saveRow(oTable, nEditing); // save
$(nEditing).find("td:first").html("Untitled");
nEditing = null;
nNew = false;
} else {
oTable.fnDeleteRow(nEditing); // cancel
nEditing = null;
nNew = false;
return;
}
}
var aiNew = oTable.fnAddData(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '']);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow);
nEditing = nRow;
nNew = true;
});
table.on('click', '.delete', function (e) {
e.preventDefault();
if (confirm("Are you sure to delete this row ?") == false) {
return;
}
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
alert("Deleted! Do not forget to do some ajax to sync with backend :)");
});
table.on('click', '.cancel', function (e) {
e.preventDefault();
if (nNew) {
oTable.fnDeleteRow(nEditing);
nEditing = null;
nNew = false;
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});
table.on('click', '.edit', function (e) {
e.preventDefault();
nNew = false;
/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];
if (nEditing !== null && nEditing != nRow) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") {
/* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;
alert("Updated! Do not forget to do some ajax to sync with backend :)");
} else {
/* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
}
return {
//main function to initiate the module
init: function () {
handleTable();
}
};
}();
jQuery(document).ready(function() {
TableDatatablesEditable.init();
});
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？