jQueryのDataTableの完全変更可能なデータテーブル
-
13-09-2019 - |
質問
私は、現時点ではjQueryのDataTableのプラグインと完全に修正可能なデータテーブルを作成しようとしています。完全に修正可能なテーブルによって、私は、ユーザーが編集、削除、更新、テーブルの上に列を追加することができますを意味します。例に基づいて、現在、私は次のJavaScriptコードをしようとしています:
function var_dump(obj) {
if(typeof obj == "object") {
return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;
} else {
return "Type: "+typeof(obj)+"\nValue: "+obj;
}
}//end function var_dump
var oTable;
var giRedraw = false;
var giCount=11;
$(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
$("#example tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
/* Add a click handler for the delete row */
$('#delete').click( function() {
var anSelected = fnGetSelected( oTable );
var iRow = oTable.fnGetPosition( anSelected[0] );
oTable.fnDeleteRow( iRow );
} );
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "lib/server_processing.php",
"fnDrawCallback": function () {
$('#example tbody td').editable( 'lib/editable_ajax.php', {
"callback": function( sValue, y ) {
alert(sValue);
/* Redraw the table from the new data on the server */
oTable.fnDraw();
},
"height": "14px"
} );
}
} );
} );
function fnClickAddRow() {
oTable.fnAddData( [
giCount+".1",
giCount+".2",
giCount+".3",
giCount+".4",
giCount+".5", ]
);
giCount++;
}
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();
for ( var i=0 ; i<aTrs.length ; i++ )
{
if ( $(aTrs[i]).hasClass('row_selected') )
{
aReturn.push( aTrs[i] );
}
}
return aReturn;
}
これは、ユーザーインターフェイスで正常に動作しますが、私は、サーバー側に列情報を送信する方法については考えています。 [OK]を私はserver_ajaxスクリプトに列の新しい値を送信することができますが、どのように私は、データベース内の編集済みの列の一意のIDなどの列に関するその他の関連情報を送信することができます。
解決
それについての記事であるjQueryのDataTableの<のhref =「http://www.codeproject.com/KB/aspnet/MVC-CRUD-DataTable.aspx」とCRUDの機能を実装する方法を示していますrel = "nofollowを"> http://www.codeproject.com/KB/aspnet/MVC-CRUD-DataTable.aspxする すべての必要な機能はDataTableのプラグインの上にCRUDの機能を追加jquery.datatables.editable.jsプラグインに配置されます。
他のヒント
申し訳ありませんが、これは直接あなたの質問に答えていない場合、またはあなたはすでに、このオプションを見てしまった場合。 jqGridのプラグインは、はるかに少ないコード(と思う)に...あなたは今述べたすべてのものを可能にし、そして3.6のようあなたは(私はあなたにも言及したと考えている)表示する列を選択することができます。キー部分は、それはあなたのためのすべてのAJAXを扱うということで、あなたは少しだけJSONを解析し、サーバ側で構造化データを処理する必要はあります。