<!---------------------------------------- BEGIN动态表相关 ----------------------------------------><script src="/Assets/global/plugins/datatables/media/js/jquery.dataTables.min.js"></script><script src="/Assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js"></script><!--设置动态table的js--><script>var TableEditable = 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 = '<a class="edit" href="">Save</a>';jqTds[3].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('<a class="edit" href="">Edit</a>', nRow, 2, false);oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 3, 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('<a class="edit" href="">Edit</a>', nRow, 2, 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>>","sort": false,//排序关闭"paginate": false,//分页关闭"filter":false,"search":false,"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": 10,"language": {"lengthMenu": " _MENU_ records","info": ""//去除底部的信息显示},"columnDefs": [{ // set default column settings'orderable': false,'targets': [0]}, {"searchable": false,"targets": [0]}],"order": [[0, "asc"]] // set first column as a default sort by asc});var tableWrapper = $("#sample_editable_1_wrapper");tableWrapper.find(".dataTables_length select").select2({showSearchInput: true //hide search box with special css class}); // initialize select2 dropdownvar 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); // cancelnEditing = 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();/* 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 moduleinit: function () {handleTable();}};}();</script><!--初始化动态表--><script>jQuery(document).ready(function () {TableEditable.init();});</script><!----------------------------------------- END动态表相关 ---------------------------------------->