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" onclick="add()" shiro:hasPermission="system:madareanumberview:add">
          <i class="fa fa-plus"></i> 新增
        </a>
        <a class="btn btn-primary btn-edit " onclick="edit()" shiro:hasPermission="system:madareanumberview:edit">
          <i class="fa fa-edit"></i> 修改
        </a>
        <a class="btn btn-danger btn-del " onclick="remove()" shiro:hasPermission="system:madareanumberview:remove">
          <i class="fa fa-remove"></i> 删除
        </a>
        <a class="btn btn-warning btn-del " onclick="removeBatch()" shiro:hasPermission="system:madareanumberview:remove">
          <i class="fa fa-remove"></i> 批量删除
        </a>
      </div>

2.按钮的点击事件

js:
//添加一条新的记录跳转的路径
function add() {
  var contentUrl = bath; // 跳转链接
  layer.open({
    type: 2,
    title: ['添加信息'],
    area: ['70%', '90%'],
    content: contentUrl, // 跳转链接
  });
}　　

controller:

/**
 * 新增页面
 *
 * @return java.lang.String
 * @author zhukaixin
 */
@GetMapping("/add")
public String addNumber() {
  return prefix + "/add";
}

3.跳转的添加页面(就是一个html文件)

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<title>新增</title>
<head ></head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
  <form class="form-horizontal m" id="form-madArea-add">
    <div class="form-group">
      <label class="col-sm-3 control-label ">代码名称：</label>
      <div class="col-sm-8">
        <input class="form-control"  type="text" name="tcode" id="tcode"/>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">名称：</label>
      <div class="col-sm-8">
        <input class="form-control"  type="text" name="tname" id="tname">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">备注：</label>
      <div class="col-sm-8">
        <input class="form-control" type="text" name="remark" id="remark">
      </div>
    </div>
    <div class="col-sm-12">
      <div class="form-group">
        <div class="pull-right">
          <button id="button_preservation" type="button" class="btn btn-success">保存</button>
          <button id="button_cancel" type="button" class="btn btn-warning">取消</button>
        </div>
      </div>
    </div>
  </form>
</div>
<script th:src="@{/namics/umberview.js}"></script>
</body>
</html>

4.确认按钮的事件

　　//新增确认按钮
  $('#button_preservation').click(function () {
    var url = path;
    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
　　if(validform("id).form){

　　 $.ajax({
     　　 type: "POST",//方法类型
     　　 dataType: "json",//预期服务器返回的数据类型
     　　 url: url,//url
      　　data: $('#form-madArea-add').serialize(),
      　　success: function (result) {
       　　 if (result.success) {
        　　  parent.layer.close(index); //再执行关闭
         　　 alert("添加成功！！！！");
       　　 } else {
       　　   parent.layer.close(index); //再执行关闭
        　　  alert(result.message);
        }
      }
    })

　　}
   
  })

新增取消按钮事件：

$('#button_cancel').click(function () {
  var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  parent.layer.close(index); //再执行关闭
})

表单的效验:

function validform(id) {
  return $("#"+id).validate({
    rules: {
      tname: {
        required: true,
      },
      tcode: {
        required: true,
      }
    }
  })
}

5.后台controller

/***
   * 保存新增的数据
   * @param Number
   * @param mmap
   * @author zhukaixin
   * @throws
   */
  @PostMapping("/addSubmit")
  @ResponseBody
  public int addSubmitMadareanumber(Number number) {
   
      number.setEnabled(new BigDecimal(1));
      number.setCreateBy("admin");
      number.setCreateTime(new Date());
      int i = numberService.insertNumber(number);
      return i;
    
  }

　　

删除和修改bootstrap-table 的一条数据时 ，需要获取到这条数据的id ，

获取bootstrap-table的一条数据的id 方法

 // $("#table").bootstrapTable('getSelections');为bootstrapTable自带的，所以说一定要使用bootstrapTable显示表格,#table：为table的id
    //获取这条数据
  var rows = $("#madArea_table").bootstrapTable('getSelections');
    //获取这条命数据的id
    var id = rows.id;

删除一条记录的js

//删除一条记录
function remove() {
  var tid;// 声明一个tid
  // $("#table").bootstrapTable('getSelections');为bootstrapTable自带的，所以说一定要使用bootstrapTable显示表格,#table：为table的id
  var rows = $("#madArea_table").bootstrapTable('getSelections');
  if (rows.length == 0) {// rows 主要是为了判断是否选中，下面的else内容才是主要
    alert("请先选择要删除的记录!");
    return;
  }
  if ((rows.length >= 2)) {
    alert("请先选择一条记录!");
    return;
  } else {
    $(rows).each(function () {// 通过获得别选中的来进行遍历
      tid = this.tid;// cid为获得到的整条数据中的一列
    });
  }
  //alert(tid);
  $.ajax({
    type: "post",//方法类型
    dataType: "json",//预期服务器返回的数据类型
    url: bath?tid=' + tid,//url
    success: function (result) {
      if (result.success) {
        alert("删除成功");
        var oTable = new TableInit();
        oTable.Init();
      } else {
        alert(result.message);
      }
    }
  })
}

　删除多条数据

//批量删除
function removeBatch() {
  var tids;
  // $("#table").bootstrapTable('getSelections');为bootstrapTable自带的，所以说一定要使用bootstrapTable显示表格,#table：为table的id
  var rows = $("#madArea_table").bootstrapTable('getSelections');
  if (rows.length == 0) {// rows 主要是为了判断是否选中，下面的else内容才是主要
    alert("请至少选择一条要删除的记录!");
    return;
  } else {
    var arrays = new Array();// 声明一个数组
    $(rows).each(function () {// 通过获得别选中的来进行遍历
      arrays.push(this.tid);// cid为获得到的整条数据中的一列
    });
    tids = arrays.join(','); // 获得要删除的id
  }
  $.ajax({
    type: "post",//方法类型
    dataType: "json",//预期服务器返回的数据类型
    url: ctx + 'system/madareanumberview/removeBatch?tids=' + tids,//url
    success: function (result) {
      if (result.success) {
        alert("删除成功");
        var oTable = new TableInit();
        oTable.Init();
      } else {
        alert(result.message);
      }
    }
  })
}

删除的后台controller:

/**
   * 删除一条数据
   *
   * @author zhukaixin
   */
  @PostMapping("/delete")
  @ResponseBody
  public int removeMadareanumber(String tid) {
    
      int i = mdmAreaNumberService.deleteMdmAreaNumberByIds(tid);
      return i;
  }

　　

/**
   * 批量删除
   *
   * @author zhukaixin
   */
  @RequiresPermissions("system:madareanumberview:remove")
  @PostMapping("/removeBatch")
  @ResponseBody
  public int removeBatchMadareanumber(String[] tids) {
      int i = mdmAreaNumberService.deleteMdmAreaNumberByIds(tids);
      return i;
  }　　

修改与删除类似

　　修改一条数据的 js:

//修改一条区域信息数据(绑定事件修改)
function edit(row) {
  var tid;
  // $("#table").bootstrapTable('getSelections');为bootstrapTable自带的，所以说一定要使用bootstrapTable显示表格,#table：为table的id
  var rows = $("#madArea_table").bootstrapTable('getSelections');
  if (rows.length == 0) {// rows 主要是为了判断是否选中，下面的else内容才是主要
    alert("请先选择要修改的记录!");
    return;
  }
  if ((rows.length >= 2)) {
    alert("请选择一条进行修改!");
    return;
  } else {
    $(rows).each(function () {// 通过获得别选中的来进行遍历
      tid = this.tid;
    });
  }
  layer.open({
    type: 2,
    title: ['修改信息'],
    area: ['90%', '90%'],
    content: path + tid, // 跳转链接 为一个修改的页面 html
  });
}　　

//点击当前行修改

//点击当前行修改当前行
$('#madArea_table').on("click-row.bs.table", function (e, row, ele) {
  var contentUrl = path + row.tid; // 跳转链接
  layer.open({
    type: 2,
    title: ['修改信息'],
    area: ['70%', '90%'],
    content: contentUrl, // 跳转链接
  });

});

　修改后台controller

/**
   * 根据tid修改数据
   *
   * @return java.lang.String
   * @author zhukaixin
   */
  @RequiresPermissions("system:madareanumberview:edit")
  @GetMapping("/edit/{tid}")
  public String editMadareanumber(@PathVariable("tid") String tid, ModelMap mmap) {
    if (!StringUtils.isEmpty(tid)) {
     Number number = numberService.selectMdmAreaNumberById(BigDecimal.valueOf(Long.parseLong(tid)));
      mmap.put("number", number);
    }
    return prefix + "/edit";
  }

　跳转的页面html

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<title>修改</title>
<head th:include="include :: header"></head>
<div class="white-bg">
  <div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-madArea-edit" th:object="${number}">
      <input  type="hidden" name="tid" id="tid" th:field="*{tid}"/>
      <div class="form-group">
        <label class="col-sm-3 control-label ">代码：</label>
        <div class="col-sm-8">
          <input class="form-control" type="text" required name="tcode" id="tcode" th:field="*{tcode}"/>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">名称：</label>
        <div class="col-sm-8">
          <input class="form-control" type="text" required name="tname" id="tname" th:field="*{tname}"/>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">备注：</label>
        <div class="col-sm-8">
          <input class="form-control" type="text" name="remark" id="remark" th:field="*{remark}"/>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="form-group">
          <div class="pull-right">
            <button id="buttonEdit_preservation" type="button" class="btn btn-success">保存</button>
            <button id="button_cancel" type="button" class="btn btn-warning">取消</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
</body>
</html>　　

　修改提交的js

//修改行政区域的单行数据确认按钮
  $('#buttonEdit_preservation').click(function () {
    var url = path;
    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    $.ajax({
      type: "POST",//方法类型
      dataType: "json",//预期服务器返回的数据类型
      url: url,//url
      data: $('#form-madArea-edit').serialize(),
      success: function (result) {
        if (result.success) {
          parent.layer.close(index); //再执行关闭
          alert("修改成功！！！！");
        } else {
          parent.layer.close(index); //再执行关闭
          alert(result.message);
        }
      }
    })
  })

})

　后台修改提交的controller

 /***
   * 保存修改的数据
   * @param mdmAreaNumber
   * @param mmap
   * @author zhukaixin
   * @throws
   */
  @PostMapping("/editSubmit")
  @ResponseBody
  public int editSubmitMadareanumber(Number number, ModelMap mmap) {
      number.setModifyTime(new Date());
     　　number.setModifiedBy("admin1");
      int i = numberService.updateMdmAreaNumber(number);
      return i;
  }

　　

　

bootstrap-table 的子表

var TableInit = function () {
  var oTableInit = new Object();
  //初始化Table
  oTableInit.Init = function () {
    $('#madArea_table').bootstrapTable('destroy');
    $('#madArea_table').bootstrapTable({
      url: ctx + "system/madareanumberview/list",
      method: 'post',//请求方式
      sortName: "createTime",
      sortOrder: "desc",
      striped: true, // 是否显示行间隔色
      pagination: true, // 是否分页
      search: false,//搜索
      showColumns: false, // 是否显示列的按钮
      detailView: true, // 是否显示父子表
      showExport: false, // 是否显示导出
      queryParams: queryParams,//传递参数（*）
      columns: [{
        checkbox: true
      },
        {
          title: '序号',//标题  可不加
          align: "center",
          formatter: function (value, row, index) {
            return index + 1;
          }
        },
        {
          field: 'tname',
          title: '名称'
        },
        {
          field: 'areaDivision',
          title: '区域'
        }，{
           field: 'remark',
           title: '备注'
         }
        {
          field: 'createTime',
          title: '创建时间',
          sortable: true,
          formatter: function (value) {
            return CommonJS.momentFormat(value, "YYYY-MM-DD");
          }
        }],
      onExpandRow: function (index, row, $detail) { // 注册加载子表的事件。注意下这里的三个参数！
        oTableInit.initDetails(index, row, $detail);
      },
    });
  };
  // 第二层（子表）
  oTableInit.initDetails = function (index, row, $detail) {
    var cur_table = $detail.html('<table id="table_tUnitsDetails"></table>').find('table');
    $(cur_table).bootstrapTable({
      // height:400,//定义表格的高度,如果放开高度的话，宽度不可拖拽；
      url: ctx + "system/madareanumberview/selectByid",
      method: 'post',//请求方式
      sortName: "createTime",
      sortOrder: "desc",
      striped: true, // 是否显示行间隔色
      pagination: true, // 是否分页
      search: false,//搜索
      showColumns: false, // 是否显示列的按钮
      detailView: true, // 是否显示父子表
      showExport: false, // 是否显示导出
      queryParams: {'tid': row.tid},
      columns: [{
        formatter: function (value, row, index) {
          return index + 1;
        },
        align: 'center'
      }, {
        field: 'tcode',
        title: '代码',
        align: 'center',
        cellStyle: {
          css: {
            "text-align": "center !important"
          }
        }
      }, {
        field: 'tname',
        title: '名称',
        align: 'center',
        cellStyle: {
          css: {
            "text-align": "center !important"
          }
        }
      }, {
        field: 'createTime',
        title: '创建时间',
        align: 'center',
        cellStyle: {
          css: {
            "text-align": "right !important"// right
          }
        },
        formatter: function (value) {
          return CommonJS.momentFormat(value, "YYYY-MM-DD");
        }
      }, {
        field: 'modifiedBy',
        title: '修改人',
        align: 'center',
        cellStyle: {
          css: {
            "text-align": "center !important"
          }
        }
      }],
    });
  };
  return oTableInit;
};

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

感悟：在返回路径的时候后台返回值是string 就可以，在返回数据的时候必须加@ResponseBody 注解，