Bootstrap表格-行内动态按钮

Question

Bootstrap表格-行内动态按钮

javascripthtmltwitter-bootstrap-3html-table

4

我正在使用 bootstrap v3。我试图获得如图片所示的效果。我想要一个按钮，在 popup 中显示 "Item Name"。但是我的按钮没有显示。

问题在于我的表格的性质是动态的（来自 JSON 表单），这使得事情变得困难。 图片:

var $table = $('#table');
var mydata = [{
    "id": 0,
    "name": "test0",
    "price": "$0"
  },
  {
    "id": 1,
    "name": "test1",
    "price": "$1"
  },
  {
    "id": 2,
    "name": "test2",
    "price": "$2"
  }
];

$(function() {
  $('#table').bootstrapTable({
    data: mydata
  });
});

<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflarenter code heree.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
</head>

<body>
  <div class="container">
    <table id="table" data-search="true">
      <thead>
        <tr>
          <th data-field="id" data-sortable="true">Item ID</th>
          <th data-field="name" data-sortable="true">Item Name</th>
          <th data-field="price" data-sortable="true">Item Price</th>
          <th>Show Name</th>
        </tr>
      </thead>
      <tbody>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr>
          <td>
            <button type="button" class="btn btn-primary btn-sm">Small button</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

我将非常感谢您的帮助。

- user3794273

所以，您想在单击项目名称时打开一个弹出窗口（模态框）？ - Ronnie Oosting

是的，弹出窗口。但是在按钮点击后。点击按钮后首先显示test0，然后点击按钮2显示test1，依此类推。 - user3794273

你好，这是你需要的吗？https://jsfiddle.net/tmyfssw2/. 我没有添加CSS，所以请复制粘贴它。 :P - Ronnie Oosting

在静态代码中，这很容易实现。问题是如何在从JSON读取时实现？ - user3794273

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.Shah · Accepted Answer

希望这有所帮助……

    <html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
</head>

<body>
  <div class="container">
    <table id="table" data-search="true">
      <thead>
        <tr>
          <th data-field="id" data-sortable="true">Item ID</th>
          <th data-field="name" data-sortable="true">Item Name</th>
          <th data-field="price" data-sortable="true">Item Price</th>
          <th>Show Name</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </div>

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"></h4>
          </div>
          <div class="modal-body">
            <p></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>


    <script>


            var $table = $('#table');
            var mydata = [{
                "id": 0,
                "name": "test0",
                "price": "$0"
              },
              {
                "id": 1,
                "name": "test1",
                "price": "$1"
              },
              {
                "id": 2,
                "name": "test2",
                "price": "$2"
              }
            ];

            $(function() {
              $('#table').bootstrapTable({
                data: mydata,
                columns: [ {},{},{},  
                {
                  field: 'operate',
                  title: 'Edit',
                  align: 'center',
                  valign: 'middle',
                  clickToSelect: false,
                  formatter : function(value,row,index) {
                    //return '<input name="elementname"  value="'+value+'"/>';
                    return '<button class=\'btn btn-primary \' pageName="'+row.name+'" pageDetails="'+row.price+'"  >Edit</button> ';
                  }
                }
              ]               
              });


            $(".btn").click(function(){
                var pageDetails = $(this).attr('pageDetails');
                var pageName = $(this).attr('pageName');
                $(".modal .modal-title").html(pageName);
                $(".modal .modal-body").html(pageDetails);
                $(".modal").modal("show");

            });

            });




    </script>




</body>

</html>