Bootstrap-table 增删改查

1.引入bootstarp-table 系类的js/css文件

    @*1、Jquery组件引用*@
    <script src="~/Scripts/jquery-1.10.2.js"></script>

    @*2、bootstrap组件引用*@
    <script src="~/Content/bootstrap/bootstrap.js"></script>
    <link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />
    
    @*3、bootstrap table组件以及中文包的引用*@
    <script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
    <link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
    <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

2.定义一个空的table

<table id="madArea_table"></table>

3.对table 初始化的js

$(function () {
  //1.初始化Table
  var oTable = new TableInit();
  oTable.Init();
}
var TableInit = function () {
  var oTableInit = new Object();
  //初始化Table
  oTableInit.Init = function () {
    $('#madArea_table').bootstrapTable('destroy');
    $('#madArea_table').bootstrapTable({
      url: path,
      method: 'post',//请求方式
      sortName: "createTime",
      sortOrder: "desc",
      striped: true, // 是否显示行间隔色
      pagination: true, // 是否分页
      search: false,
      showExport: false,
      queryParams: queryParams,//传递参数（*）
      columns: [{
        checkbox: true
      },
        {
          title: '序号',//标题  可不加
          align: "center",
          formatter: function (value, row, index) {
            return index + 1;
          }
        },
        {
          field: 'name',
          title: '名称'
        },
        {
          field: 'area',
          title: '划分'
        },
        {
          field: 'Code',
          title: '代码'
        },
        {
          field: 'createTime',
          title: '创建时间',
          sortable: true
        }]
    });
  };

  return oTableInit;
};

//得到查询的参数
function queryParams(params) {
  var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
    pageNum: Math.round((params.offset + params.limit) / params.limit),
    pageSize: params.limit,
    //名称
    name: $("#input_name").val(),
    //划分
    area: $("#input_area").val(),
  };
  return temp;
}　

4.后台controller

/**
   * 默认进入的table页面
   *
   * @return java.lang.String
   * @author zhukaixin
   */
  @GetMapping()
  public String numberView() {
    return prefix + "/data";
  }

  /**
   * table 页面的数据 和 查询的数据
   *
   * @author zhukaixin
   */
  @PostMapping("/list")
  @ResponseBody
  public List list(NumberVo numberVo) {
      List<NumberVo> list = numberViewService.selectMdmAreaList(numberVo);
      return list;
  }　

总结：bootstarp-table 的使用主要就是分为四部:
　　1.引入需要的js/css文件
　　2.定义一个空的table 标签
　　3.js中初始化这个table
　　4.controller中返回需要的list数据（一般的项目都会封装这个List 成为table 需要的格式数据/rows /total）

 

页面的查询按钮 和  取消按钮 事件

/* 点击查询事件 */
$('#button_query').click(function () {
  var oTable = new TableInit();
  oTable.Init();
});

/* 重置按钮 */
$('#button_reset').click(function () {
  // 清空所有的值
  var formComponent = $('form');
  formComponent.find('input:text').val('');
});

　　

------------------------------------------------------------------------------------------------------　　

bootstarp-table 中的按钮操作

这个需要绑定按钮点击的事件

 

 

1.定义按钮的位置

 

<div class="btn-group-sm hidden-xs pull-right" id="toolbar" role="group">
        <a class="btn btn-success