Question

我在MVC4中使用数据表js。我想在使用数据填充创建表时在每行创建时生成模态弹出窗口，并在每个单选按钮单击时打开每个模态弹出窗口。

 $('#Hotel').dataTable({
                            bDestroy: true,
                            bProcessing: true,
                            sAjaxSource: '@Url.Action("SelectHotel_TripInfo", "CL_Invoices")',
                            aoColumnDefs: [
                           {
                               aTargets: [0],  
                               "mRender": function (data, type, full) { 
                                   NewHotel(full[0]);  
                                   return "<input id='btnResp' type='radio' class='open-AddRespDialog btn btn-primary' data-toggle='modal' data-target='#exampleModal1' data-whatever='' data-id=" + data + ">";
                               }
                           }],                         
                            fnServerParams: function (aoData) {
                              aoData.push(
                                { name: "Trip_No", value: $("#txtTripNo").val() }
                                );
                            }
                        });

我的弹出功能：

function NewHotel(i) { 

        var items = '';

        items += "<div class='modal fade' id='exampleModal1"+i+"' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel'>"+
                              "<div class='modal-dialog' role='document'>"+
                               " <div class='modal-content'>"+
                                 " <div class='modal-header'>"+
                                 "   <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>"+
                                "  </div>"+
                                 " <div class='modal-body'>"+
                                  "  <form>"+
                                    "  <div class='form-group'>"+
                                     "      <div class='box-body'>"+
                                           "   <div class='row'>"+
                                              "    <input  name='Item2.HI_Rm_Tariff' class='form-control textDecor abc' type='text' value="+i+"/>"+
                                               "   </div>"+
                                             "  </div> "+                                     
                                    "  </div>           "+                            
                                  "  </form>"+
                                "  </div>"+

                               " </div>"+
                             " </div>"+
                            "</div>";
        $('#rData').append(items);
        items = '';
    }

Answer 1

在单选按钮中添加一个类，例如“ .exampleModal1“ + i +””，然后模型代码添加这样的模型属性代码，并从您的.net文件中动态监听“ i”。

function NewHotel(i) { 

    var items = '';

    items += "<div class='modal fade' id='exampleModal1"+i+"' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' data-target='.exampleModal1"+i+"'>"+
                          "<div class='modal-dialog' role='document'>"+
                           " <div class='modal-content'>"+
                             " <div class='modal-header'>"+
                             "   <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>"+
                            "  </div>"+
                             " <div class='modal-body'>"+
                              "  <form>"+
                                "  <div class='form-group'>"+
                                 "      <div class='box-body'>"+
                                       "   <div class='row'>"+
                                          "    <input  name='Item2.HI_Rm_Tariff' class='form-control textDecor abc' type='text' value="+i+"/>"+
                                           "   </div>"+
                                         "  </div> "+                                     
                                "  </div>           "+                            
                              "  </form>"+
                            "  </div>"+

                           " </div>"+
                         " </div>"+
                        "</div>";
    $('#rData').append(items);
    items = '';
}

如何使用datatable js生成每行创建的模态弹出窗口

1 个答案: