bootstrap table实例

最新推荐文章于 2024-08-17 01:00:00 发布

fengcai0123

最新推荐文章于 2024-08-17 01:00:00 发布

阅读量2k

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/fengcai0123/article/details/79637324

版权

本文介绍了如何使用Bootstrap Table创建最简单的实例，并详细讲解了如何实现点击表格行获取数据并弹窗显示编辑功能，为网页表格操作提供交互体验。

摘要由CSDN通过智能技术生成

一、bootstrap table 最简单实例
二、bootstrap table 获取点击行数据+弹窗显示编辑

<script type="text/javascript">
$(function () {
 $('#table1').bootstrapTable({
    url: '/sell/managerSellJson?pageNum=1',
     cache:false,
     striped:true,
     pagination: true, // 在表格底部显示分页组件，默认false
     contentType: "application/x-www-form-urlencoded",//请求内容格式 默认是 application/json 自己根据格式自行服务端处理
     dataType: "json",//期待返回数据类型
     method:"post",
     columns: [{
         field: 'id',
         title: 'Item ID'
     },  {
         field: 'name',
         title: 'Item Name'
     }, {
         field: 'contact',
         title: 'Item Name'
     }, {
         field: 'phone',
         title: 'Item Price'
     }, {
         field: 'twitter',
         title: 'Item Name'
     }, {
         field: 'address',
         title: 'Item Price'
     },
     ]
     });
 }）；
 <body>
    <div id="table1" class="table table-bordered table-hover"></div>
</body>

//后端controller
@RequestMapping(value = "/managerSellJson",method = RequestMethod.POST)
  @ResponseBody
   public List<Goods> managerModelJson(Model model,@RequestParam(defaultValue ="1") String pageNum ){ 
     List<Goods> goodsList=new ArrayList<Goods>();
     Page<Goods> pages=goodsService.findGoodsNoCriteria(Integer.parseInt(pageNum),20,"commentNum");
     for(Goods g:pages){
         goodsList.add(g);
     } 
     return goodsList;
   }

//实体类Goods 的属性跟前端js中 columns: [{  field: 'id',....}] 的field一一对应即可

bootstrap table 获取点击行数据+弹窗显示编辑】

//js：
// edit method 
 $("#btn_edit").click(function () {
          var a = $.map($("#table1").bootstrapTable('getSelections'), function (row) {
              /*alert("选中行==" + row.id)*/
              $("#edit_name").val(row.name);
              $("#edit_sn").val(row.sn);