我已将DataTables Editable添加到我的表中,以便能够添加和删除某些行。 添加部分效果很好,但我在删除部分时遇到了一些问题,因为我无法选择行。
通过我在示例中看到的,我要做的就是添加删除URL,如下所示:
.makeEditable({sDeleteURL:“/ DeleteURL”});
但是那个剂量使我的行可以选择,所以我可以删除anthing。
我的完整代码是:
$(function () {
var oTable = $('.table-@Model.Numero').dataTable(
{
"oLanguage": { "sUrl": "/LanguageURL" },
"bProcessing": true,
"bFilter": false,
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"bLengthChange": false,
"aoColumnDefs": [{ "sClass": "center-col", "aTargets": ['align-center-col'] },
{ "sClass": "read_only", "aTargets": ['read-only-col'] },
{ "sClass": "small-width-col", "aTargets": ['small-col'] }],
"aaSorting": [[0, "desc"]],
"bScrollCollapse": true,
"bServerSide": true,
"sAjaxSource": '/DataURL',
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({ "name": "Numero", "value": $(this).find("#Numero").val() });
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
}).makeEditable({
sAddNewRowFormId: 'form-@Model.Numero',
sAddNewRowButtonId: 'btn-@Model.Numero',
btnDeleteRow: 'btn-del-@Model.Numero',
sAddURL: "/AddURL",
sDeleteURL: "/DeleteURL"
});
});
答案 0 :(得分:3)
我个人一直在努力让数据表删除功能适用于我的一个项目。
我发现我需要在文档的头部包含jquery-ui.js
脚本。
我还发现你需要像这样格式化你的表行。 <tr id="1">
以便数据表可以自动从所选行中获取正确的id#并将其传递到您的php页面以进行进一步处理。
数据表可以通过使用DT_RowId
特殊属性自动为每个表行添加一个id。
如果您已设置数据表以使用服务器端实现,则可以在服务器返回的JSON数据中包含DT_RowId
以响应ajax请求。
例如JSON格式:
{
"sEcho": 1,
"iTotalRecords": "1",
"iTotalDisplayRecords": "1",
"aaData": [
{
"DT_RowId": "1",
"engine": "Trident",
"browser": "Internet Explorer 4.0",
"platform": "Win 95+",
"version": "4",
"grade": "X"
}
]
}
这是我的示例模型代码。服务器端实现不包含在此示例中我只是使用示例的source objects.txt作为示例附带数据表。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="datatables/media/js/jquery.dataTables.js"></script>
<script src="examples/examples_support/jquery.jeditable.js"></script>
<script src="http://jquery-datatables-editable.googlecode.com/svn/trunk/media/js/jquery-ui.js"></script>
<script src="datatables/media/js/jquery.datatables.editable.js"></script>
<style type="text/css">
@import "datatables/media/css/demo_table.css";
@import "datatables/media/css/demo_table_jui.css";
@import "examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
</style>
<script>
$(document).ready(function() {
var anOpen = [];
var sImageUrl = "/datatables/examples/examples_support/";
var oTable = $('#example').dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bProcessing": true,
"sAjaxSource": "/datatables/examples/ajax/sources/objects.txt",
"aoColumns":
[
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": '<img src="'+sImageUrl+'details_open.png'+'">'
},
{ "mDataProp": "engine" },
{ "mDataProp": "browser" },
{ "mDataProp": "grade" }
]
}).makeEditable({
sDeleteURL: "DeleteData.php",
//Converts to JQuery UI button (full list of options on http://jqueryui.com/demos/button)
oDeleteRowButtonOptions:
{
label: "Remove",
icons: {primary:'ui-icon-trash'}
},
//Additional Paramaters can be sent for processing...
oDeleteParameters:
{
action:"delete_dt_projects_record",
dtSecurity:"9999999999"
}
});
//For Expandable Collapsible Rows
$('#example td.control').live( 'click', function () {
var nTr = this.parentNode;
//var projID = $(this).closest("td").next().text();
//console.log(projID);
//console.log(anOpen);
//console.log(nTr);
var i = $.inArray( nTr, anOpen );
//console.log(i);
if ( i === -1 )
{
$('img', this).attr( 'src', sImageUrl+"details_close.png" );
var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push( nTr );
}
else
{
$('img', this).attr( 'src', sImageUrl+"details_open.png" );
$('div.innerDetails', $(nTr).next()[0]).slideUp( function ()
{
oTable.fnClose( nTr );
anOpen.splice( i, 1 );
});
}
});
function fnFormatDetails( oTable, nTr )
{
var oData = oTable.fnGetData( nTr );
var sOut =
'<div class="innerDetails">'+
'<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr><td>Rendering engine:</td><td>'+oData.engine+'</td></tr>'+
'<tr><td>Browser:</td><td>'+oData.browser+'</td></tr>'+
'<tr><td>Platform:</td><td>'+oData.platform+'</td></tr>'+
'<tr><td>Version:</td><td>'+oData.version+'</td></tr>'+
'<tr><td>Grade:</td><td>'+oData.grade+'</td></tr>'+
'</table>'+
'</div>';
return sOut;
}
});
</script>
</head>
<body>
<div style="width:900px">
<div class="add_delete_toolbar">
<button id="btnDeleteRow">Delete</button>
</div>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th></th>
<th>Rendering engine</th>
<th>Browser</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</body>
</html>
注意您可能需要将脚本和样式URL路径更改为您所在的位置,以便查看工作示例。
更新:您还需要手动将其包含在HTML源代码中的任何位置。
<button id="btnDeleteRow">Delete</button>