0
我正在嘗試以下操作。 單擊任意一行時，使用行和組合框的信息打開一個模式，其中包含來自另一個表的信息，並將其插入到數據庫中的新表中。 我的問題是，可以通過模態來做到這一點？怎麼樣？jQuery Datatable Modal - 添加信息
謝謝。 請關注我的來源。
<script type="text/javascript">
$(document).ready(function() {
var oTable = $('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
"aButtons": [{
"sExtends": "copy",
"sButtonText": "Copy"
}, {
"sExtends": "print",
"sButtonText": "Print"
}, {
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": ["csv", "pdf"]
}]
},
"autoWidth": true,
"sAjaxSource": "Load_Arm_tec.php",
"aoColumns": [{
"sClass": "readonly",
"sTitle": "ID",
"aTargets": [0]
}, {
"sClass": "readonly",
"sTitle": "arm",
"aTargets": [1]
}, {
"sClass": "readonly",
"sTitle": "City",
"aTargets": [2]
}, {
"sClass": "readonly",
"sTitle": "reg",
"aTargets": [3]
}, {
"sClass": "readonly",
"sTitle": "QNTD",
"aTargets": [4]
}, {
"sClass": "readonly",
"sTitle": "Size",
"aTargets": [5]
}, {
"sClass": "readonly",
"sTitle": "DT_start",
"aTargets": [6]
}, {
"sClass": "readonly",
"sTitle": "DT_end",
"aTargets": [7],
"type": "date"
}, {
"sClass": "readonly",
"sTitle": "Days",
"aTargets": [8]
}],
"fnDrawCallback": function() {
$('td.readonly').on('click', function(e) {
var id = oTable.fnGetData($(this).parents('tr')[0])[0];
//MODAL HERE.... HOW?
});
}
});
});
</script>
而我的HTML源..
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display"
id="example">
<thead>
<tr>
<th>ID</th>
<th>ARM</th>
<th>CITY</th>
<th>REG</th>
<th>QNTD</th>
<th>SIZE</th>
<th>DT_START</th>
<th>DT_END</th>
<th>DAYS</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">Loading..</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>ID</th>
<th>ARM</th>
<th>CITY</th>
<th>REG</th>
<th>QNTD</th>
<th>SIZE</th>
<th>DT_START</th>
<th>DT_END</th>
<th>DAYS</th>
</tr>
</tfoot>
</table>
</div>
UPDATE：fnDrawCallback蒙山莫代爾....
好了，現在的問題是：如何做我添加的組合框來自我的數據庫的信息??
"fnDrawCallback" : function() {
$('td.readonly').on('click', function (e) {
var id_armario = oTable.fnGetData($(this).parents('tr')[0])[0];
var armario = oTable.fnGetData($(this).parents('tr')[0])[1];
var cidade = oTable.fnGetData($(this).parents('tr')[0])[2];
dialog = $("#users-contain").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
open: function(event, ui) {
$("#users tbody").append("<tr>" +
"<td>" + id + "</td>" +
"<td>" + arm + "</td>" +
"<td>" + city + "</td>" +
"</tr>");
},
close: function(event, ui) {
$("#users tbody").empty();
},
buttons: {
"OK": function(){
dialog.dialog("close");
},
Cancel: function() {
dialog.dialog("close");
}
}
});
和HTML模態...
<div id="users-contain">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Id</th>
<th>Arm</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
可以使用例如jQuery的對話方法帶參數模態：true。 '變種對話框= $（ 「＃示例」）.dialog（{ 的AutoOpen：假的， 高度：300， 寬度：350， 模式：真， 按鈕：{ 「提交」：提交， 取消：函數（）{ dialog.dialog（ 「關閉」）;} } ， 關閉：函數（）{} }）;' – Greenonion 2014-09-02 14:32:48
@Greenonion好。我需要在提交權限中綁定一個表單？填寫行的信息並添加組合框。 – 2014-09-02 14:47:55
請看這裏 - http://jqueryui.com/dialog/#modal-form 告訴我，如果你有任何問題。 – Greenonion 2014-09-02 14:57:28