Bootstrap如何从行td项传递数据

时间:2015-12-15 17:28:28

标签: html twitter-bootstrap twitter-bootstrap-3

如下所示,我想要实现的是当用户点击特定行时,将每个td值的数据显示到模态窗口中。目前我已经堆叠而且不知道如何实现这一点 - 我试图将数据ID和模态类添加到每个td,但是这个没有用,也不知道放在里面的内容JS和模态。放下你的帮助。

JS:

   $('#myModal').on('show.bs.modal', function (event) {
        var getIdFromRow = $(event.relatedTarget).attr('data-id');
        $(this).find('#orderDetails').html($('<b> Information for LP: ' + getIdFromRow + '</b>'))
    });

模态:

@<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body" id="orderDetails">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

每个循环数据都有razor :(我为每个td添加了数据ID和类模态,但它不好,你可以帮我解决)吗? :

...
     @For Each item In Model.Transports
           Dim currentItem = item
            @<tr>

        <td class="col-lg-1" data-toggle="modal" data-target="#myModal" data-id="1">@item.Lp</td>
        <td class="col-lg-1  data-toggle="modal" data-target="#myModal" data-id="2">@item.Name</td>
        <td class="col-lg-1  data-toggle="modal" data-target="#myModal" data-id="3">@item.Surname</td
....

编辑进一步讨论:

...
    @For Each item In Model.Transports
       Dim currentItem = item
          @<tr data-toggle="modal" data-target="#editinvModal">



    <td class="col-lg-1" data-id="lp">@item.Lp</td>
    <td class="col-lg-1" data-id="DataPrzyjazdu">@item.DataPrzyjazdu</td>
....

模态:

@<div class="modal fade" id="editinvModal" role="dialog">
    <div class="modal-dialog">

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                </button>
                <h4 class="modal-title custom_align" id="Heading">Selected row information</h4>
            </div>
            <div class="modal-body">
                    <!-- Lp -->
                    <div class="form-group">
                        <p class="form-control" title="Selected row's lp'" id="lp1" name="lp"></p>
                    </div>

                    <!-- Date -->
                    <div class="form-group input-group">
                        <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
                        <input readonly class="form-control form_datetime" name="date" id="date1" type="text">
                    </div>

            </div>

            <div class="modal-footer ">
                <div class="row-fluid">
                    <button name="cancel" data-dismiss="modal" class="btn btn-warning btn-lg">
                        <span class="glyphicon glyphicon-ok-sign"></span> Ok
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

JS:

   $(document).ready(function () {
        $('#editinvModal').on('shown.bs.modal', function (event) {
            var button = $(event.relatedTarget); //button that triggered the modal

            var lp = button.data('lp');
            var date = button.data('DataPrzyjazdu');

            var modal = $(this);

            modal.find('.modal-body #lp1').val(lp);
            modal.find('.modal-body #date1').val(date);
        });

        $(".form_datetime").datetimepicker({
            format: 'dd-mm-yyyy',
            minView: 2,
            pickTime: false,
            autoclose: true,
            todayBtn: true
        });
    });

1 个答案:

答案 0 :(得分:0)

编辑基于OP的评论

我真正想要的是用户点击某个特定的tr,然后modal将以模态显示所有td's数据

在HTML中

使用data属性将一个或多个值(个人测试最多15个值)传递给模态,

data-id="item.Lp1"
data-name="item.Name1"
data-surname="item.Surname1"

可以添加更多内容,但请确保每个data属性名称都是唯一的

<table>
  <tr data-id="item.Lp1" data-name="item.Name1" data-surname="item.Surname1" data-toggle="modal" data-target="#myModal">
    <td class="col-lg-1">item.Lp1</td>
    <td class="col-lg-1">item.Name1</td>
    <td class="col-lg-1">item.Surname1</td>
  </tr>
  <tr data-id="item.Lp2" data-name="item.Name2" data-surname="item.Surname2" data-toggle="modal" data-target="#myModal">
    <td class="col-lg-1">item.Lp2</td>
    <td class="col-lg-1">item.Name2</td>
    <td class="col-lg-1">item.Surname2</td>
  </tr>
  <tr data-id="item.Lp3" data-name="item.Name3" data-surname="item.Surname3" data-toggle="modal" data-target="#myModal">
    <td class="col-lg-1">item.Lp3</td>
    <td class="col-lg-1">item.Name3</td>
    <td class="col-lg-1">item.Surname3</td>
  </tr>
</table>

在JS(模态事件监听器)

$('#myModal').on('shown.bs.modal', function (e) {
    var id = $(e.relatedTarget).data('id'); //<- It's data-id value
    var name = $(e.relatedTarget).data('name'); //<- It's data-name value
});

现在,如果要将变量var值传递给输入,可以执行

$("#selector1").val(id);
$("#selector2").val(name);

或者,如果要将变量var值传递给HTML,则可以执行

$("#selector1").html(id);
$("#selector2").html(name);

最终的JS将是

$(document).ready(function() {
 $('#myModal').on('shown.bs.modal', function (e) {
    var id = $(e.relatedTarget).data('id'); //<- It's data-id value
    var name = $(e.relatedTarget).data('name'); //<- It's data-name value
     var surname = $(e.relatedTarget).data('surname'); //<- It's data-surname value  

    $("#selector1").val(id); //<- Passing to input only
    $("#selector2").html(name); //Passing to HTML only
    $("#selector3").val(surname); //Passing to Input only
 });
});

现在使用模态,添加selectors

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        To pass value to input
        <input type="text" id="selector1" name="selector1" value="">
        <br> To pas value to HTML
        <div id="selector2"></div>
        <br> To pass value to input
        <input type="text" id="selector3" name="selector3" value="">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

SideNote:请记住# Ids在整个文档中必须是唯一的

根据以上代码

提示example