我试图做以下事情。 当您单击任意一行时，打开包含line信息的模态和包含来自另一个表的信息的ComboBox，并将其插入数据库中的新表。 我的问题是，可以通过模态做到这一点吗？怎么样？
谢谢。 关注我的来源。
<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 Whith Modal ....
好的，现在的问题是：如何从我的数据库中添加包含信息的ComboBox？
"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>
答案 0 :(得分：0)
你要做的事情可以通过在循环数据的每个语句中克隆模型并将其附加到某个部分来完成我还建议添加类以便使用jQuery find（）更容易找到功能
$。each（datAarray，function（index，value）{ ComboBox = $（modal）.clone（）
ComboBox.find('.rowName').append(value);
}）
答案 1 :(得分：0)
为有疑问的人发帖。 问题解决了。
... JavaScrit
<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.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];
var arm = oTable.fnGetData($(this).parents('tr')[0])[1];
var city = oTable.fnGetData($(this).parents('tr')[0])[2];
dialog = $( "#users-contain" ).dialog({
autoOpen: false,
height: 500,
width: 900,
title: "Info Arm",
modal: true,
open: function( event, ui ) {
$( "#users tbody" ).append( "<tr>" +
"<td>" + id + "</td>" +
"<td>" + arm + "</td>" +
"<td>" + city + "</td>" +
"</tr>" );
$.ajax({
url:'Tec_combo.php',
type:'POST',
data:'clust=' + city,
dataType: 'json',
success: function( json ) {
$.each(json, function(i, value) {
$('<option></option>', {text:value}).attr('value', value).appendTo('#names');
});
}
});
},
close: function( event, ui ) {
$("#users tbody").empty();
$("#names").empty();
},
buttons: {
"OK": function(){
dialog.dialog( "close" );
},
Cancel: function() {
dialog.dialog( "close" );
}
}
});
dialog.dialog("open");
} );
}
});
);
</script>
HTML code ...
<div id="users-contain">
<table id="users">
<thead>
<tr>
<th>Id</th>
<th>Arm</th>
<th>City</th>
<select id="names"></select>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
...谢谢 问题，我有空......