Bootstrap 增删改查

最新推荐文章于 2024-06-10 21:49:02 发布

atlasGS

最新推荐文章于 2024-06-10 21:49:02 发布

阅读量3.3k

点赞数 1

分类专栏： web 前端 asp.net 文章标签： bootstrap bootstrap增删改查 BeyondAdmin

本文链接：https://blog.csdn.net/tsqgw2001/article/details/69560608

版权

web 前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

asp.net

1 篇文章 0 订阅

订阅专栏

var InitiateEditableDataTable = function () {

return {
init: function () {
//Datatable Initiating
var oTable = $('#editabledatatable').dataTable({
"aLengthMenu": [
[5, 15, 20, 100, -1],
[5, 15, 20, 100, "All"]
],
"iDisplayLength": 5,
"sPaginationType": "bootstrap",
"sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
"oTableTools": {
"aButtons": [
"copy",
"print",
{
"sExtends": "collection",
"sButtonText": "Save <i class=\"fa fa-angle-down\"></i>",
"aButtons": ["csv", "xls", "pdf"]
}],
"sSwfPath": "assets/swf/copy_csv_xls_pdf.swf"
},
"language": {
"search": "",
"sLengthMenu": "_MENU_",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumns": [
null,
null,
null,
null,
{ "bSortable": false }
]
});

var isEditing = null;

//Add New Row
$('#editabledatatable_new').click(function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData(['', '', '', '',
'<a href="#" class="btn btn-success btn-xs save"><i class="fa fa-edit"></i> Save</a> <a href="#" class="btn btn-warning btn-xs cancel"><i class="fa fa-times"></i> Cancel</a>'
]);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow);
isEditing = nRow;
});

//Delete an Existing Row
$('#editabledatatable').on("click", 'a.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("Row Has Been Deleted!");
});

//Cancel Editing or Adding a Row
$('#editabledatatable').on("click", 'a.cancel', function (e) {
e.preventDefault();
if ($(this).attr("data-mode") == "new") {
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
} else {
restoreRow(oTable, isEditing);
isEditing = null;
}
});

//Edit A Row
$('#editabledatatable').on("click", 'a.edit', function (e) {
e.preventDefault();

var nRow = $(this).parents('tr')[0];

if (isEditing !== null && isEditing != nRow) {
restoreRow(oTable, isEditing);
editRow(oTable, nRow);
isEditing = nRow;
} else {
editRow(oTable, nRow);
isEditing = nRow;
}
});

//Save an Editing Row
$('#editabledatatable').on("click", 'a.save', function (e) {
e.preventDefault();
if (this.innerHTML.indexOf("Save") >= 0) {
saveRow(oTable, isEditing);
isEditing = null;
//Some Code to Highlight Updated Row
}
});

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 = '<select id="e1" style="width:50%;"><option value="'+ aData[3] +'" />Alabama</select>';
jqTds[4].innerHTML = '<a href="#" class="btn btn-success btn-xs save"><i class="fa fa-save"></i> Save</a> <a href="#" class="btn btn-warning btn-xs cancel"><i class="fa fa-times"></i> 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('<a href="#" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i> Edit</a> <a href="#" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i> Delete</a>', nRow, 4, 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('<a href="#" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i> Edit</a> <a href="#" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i> Delete</a>', nRow, 4, false);
oTable.fnDraw();
}
}

};
}();