Fatal编程技术网
  • javascript/
  • Javascript 引导表-行中的动态按钮

Javascript 引导表-行中的动态按钮

javascript html twitter-bootstrap-3

Javascript 引导表-行中的动态按钮,javascript,html,twitter-bootstrap-3,html-table,Javascript,Html,Twitter Bootstrap 3,Html Table,我正在使用引导v3。我试图得到如图所示的效果。我想要一个按钮，在弹出窗口中显示什么“项目名称”。但我的按钮不显示 问题是我的表的这种性质是动态的（表单JSON），这使得事情变得困难 图片： var$table=$（'#table'）； var mydata=[{ “id”：0， “名称”：“test0”， “价格”：“$0” }, { “id”：1， “名称”：“test1”， “价格”：“$1” }, { “id”：2， “名称”：“test2”， “价格”：“$2” } ]; $（函数（

我正在使用引导v3。我试图得到如图所示的效果。我想要一个按钮，在
弹出窗口中显示什么
“项目名称”
。但我的按钮不显示

问题是我的表的这种性质是动态的（表单
JSON
），这使得事情变得困难

图片：




var$table=$（'#table'）；
var mydata=[{
“id”：0，
“名称”：“test0”，
“价格”：“$0”
},
{
“id”：1，
“名称”：“test1”，
“价格”：“$1”
},
{
“id”：2，
“名称”：“test2”，
“价格”：“$2”
}
];
$（函数（）{
$（“#表”）.bootstrapTable({
数据：mydata
});
});


项目ID
项目名称
项目价格
显示名称
小按钮

希望这有帮助


    <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>




项目ID
项目名称
项目价格
显示名称
&时代；


接近
var$table=$（“#table”）；
var mydata=[{
“id”：0，
“名称”：“test0”，
“价格”：“$0”
},
{
“id”：1，
“名称”：“test1”，
“价格”：“$1”
},
{
“id”：2，
“名称”：“test2”，
“价格”：“$2”
}
];
$（函数（）{
$（“#表”）.bootstrapTable({
数据：mydata，
列：[{}，{}，{}，
{
字段：“操作”，
标题：“编辑”，
对齐：'居中'，
valign:'中间'，
单击选择：false，
格式化程序：函数（值、行、索引）{
//返回“”；
返回“编辑”；
}
}
]               
});
$（“.btn”）。单击（函数（）{
var pageDetails=$（this.attr（'pageDetails'）；
var pageName=$（this.attr（'pageName'）；
$（“.modal.modal title”）.html（页面名称）；
$（“.modal.modal body”）.html（页面详细信息）；
美元（“.modal”）.modal（“show”）；
});
});

那么，您想在单击项目名称时打开一个弹出窗口（模式）？是的，弹出窗口。但点击按钮之后。单击按钮1后显示测试0，单击按钮2后显示测试1等等，这是您需要的吗。我没有添加CSS。所以复制粘贴它：PIn静态代码，很容易做到。问题是在阅读JSON时如何做到这一点？你能解释一下你在做什么，而不是仅仅发布一个可能的答案吗？所以OP和其他人可以从您的代码中学习我添加了代码，以在数据表中添加列。格式化程序添加包含按钮的列。按钮数据属性包含要在模式中使用的信息。$。Btn click函数在单击按钮时获取数据属性，然后将其传递给模式。希望这能解释…是的，先生！这很清楚：）但这次，我问“你能解释一下你在做什么，而不是仅仅发布一个可能的答案吗？”：）好吧。。。事实上你没有做错什么。。你不仅仅是在做！！在启动引导表的函数中，我添加了代码，为每行添加了一列，添加了模式代码，并添加了jquery函数，以便在每次单击按钮时使用相关信息填充模式。这真的是我最好的解释了。。。