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 注解，

巴特西

Bootstrap-table 增删改查

最新文章

热门文章