-1
をクリックする前に、私はこのようなテーブルを持っている：は編集
私は編集ボタンをクリックしたときに、私が正しく動作field.Itステータスフィールドとアクションを編集することができます。 しかし問題は、編集ボタンをクリックする前にステータスとアクションの値を変更できることです。無効にしたいです。
私が<input type="checkbox" disabled="disabled">を使用している場合、私は編集ボタンに行くときに値を変更することはできません。
私のhtmlページ：
<table class="table table-striped table-hover table-bordered" id="editable-sample">
<thead>
<tr>
<th>Username</th>
<th>emailId</th>
<th>status</th>
<th>action</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr class="">
<td>{{ item.username }}</td>
<td>{{ item.email }}</td>
<td><input type="checkbox" name="status" ></td>
<td><input type="checkbox" name="action"></td>
<td><a class="edit" href="javascript:;">Edit</a></td>
</tr>
{% endfor %}
</table>
編集]ボタンをクリックしたときに実行私のjavascriptのコードは次のとおりです。
var EditableTable = function() {
return {
//main function to initiate the module
init: 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[2].innerHTML = '<input type="checkbox" class="form-control small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="checkbox" class="form-control small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<a class="edit" href="">Save</a>';
}
function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
oTable.fnDraw();
}
function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
oTable.fnDraw();
}
var oTable = $('#editable-sample').dataTable({
"aLengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"iDisplayLength": 5,
"sDom": "<'row'<'col-lg-6'l><'col-lg-6'f>r>t<'row'<'col-lg-6'i><'col-lg-6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}
]
});
jQuery('#editable-sample_wrapper .dataTables_filter input').addClass("form-control medium"); // modify table search input
jQuery('#editable-sample_wrapper .dataTables_length select').addClass("form-control xsmall"); // modify table per page dropdown
var nEditing = null;
$('#editable-sample_new').click(function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData(['', '', '', '',
'<a class="edit" href="">Edit</a>', '<a class="cancel" data-mode="new" href="">Cancel</a>'
]);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow);
nEditing = nRow;
});
$('#editable-sample a.edit').live('click', function (e) {
e.preventDefault();
/* 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;
}
});
}
};
}();