bootstrap增删改查

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

1.  
   @*1、Jquery组件引用*@
2.  
   <script src="~/Scripts/jquery-1.10.2.js"></script>
3.  
    
4.  
   @*2、bootstrap组件引用*@
5.  
   <script src="~/Content/bootstrap/bootstrap.js"></script>
6.  
   <link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />
7.  
    
8.  
   @*3、bootstrap table组件以及中文包的引用*@
9.  
   <script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
10.  
    <link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
11.  
    <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

2.定义一个空的table

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

3.对table 初始化的js

1.  
   $(function () {
2.  
   //1.初始化Table
3.  
   var oTable = new TableInit();
4.  
   oTable.Init();
5.  
   }
6.  
   var TableInit = function () {
7.  
   var oTableInit = new Object();
8.  
   //初始化Table
9.  
   oTableInit.Init = function () {
10.  
    $('#madArea_table').bootstrapTable('destroy');
11.  
    $('#madArea_table').bootstrapTable({
12.  
    url: path,
13.  
    method: 'post',//请求方式
14.  
    sortName: "createTime",
15.  
    sortOrder: "desc",
16.  
    striped: true, // 是否显示行间隔色
17.  
    pagination: true, // 是否分页
18.  
    search: false,
19.  
    showExport: false,
20.  
    queryParams: queryParams,//传递参数（*）
21.  
    columns: [{
22.  
    checkbox: true
23.  
    },
24.  
    {
25.  
    title: '序号',//标题 可不加
26.  
    align: "center",
27.  
    formatter: function (value, row, index) {
28.  
    return index + 1;
29.  
    }
30.  
    },
31.  
    {
32.  
    field: 'name',
33.  
    title: '名称'
34.  
    },
35.  
    {
36.  
    field: 'area',
37.  
    title: '划分'
38.  
    },
39.  
    {
40.  
    field: 'Code',
41.  
    title: '代码'
42.  
    },
43.  
    {
44.  
    field: 'createTime',
45.  
    title: '创建时间',
46.  
    sortable: true
47.  
    }]
48.  
    });
49.  
    };
50.  
     
51.  
    return oTableInit;
52.  
    };
53.  
     
54.  
    //得到查询的参数
55.  
    function queryParams(params) {
56.  
    var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
57.  
    pageNum: Math.round((params.offset + params.limit) / params.limit),
58.  
    pageSize: params.limit,
59.  
    //名称
60.  
    name: $("#input_name").val(),
61.  
    //划分
62.  
    area: $("#input_area").val(),
63.  
    };
64.  
    return temp;
65.  
    }　

4.后台controller

1.  
   /**
2.  
   * 默认进入的table页面
3.  
   *
4.  
   * @return java.lang.String
5.  
   * @author zhukaixin
6.  
   */
7.  
   @GetMapping()
8.  
   public String numberView() {
9.  
   return prefix + "/data";
10.  
    }
11.  
     
12.  
    /**
13.  
    * table 页面的数据 和 查询的数据
14.  
    *
15.  
    * @author zhukaixin
16.  
    */
17.  
    @PostMapping("/list")
18.  
    @ResponseBody
19.  
    public List list(NumberVo numberVo) {
20.  
    List<NumberVo> list = numberViewService.selectMdmAreaList(numberVo);
21.  
    return list;
22.  
    }　

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

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

1.  
   /* 点击查询事件 */
2.  
   $('#button_query').click(function () {
3.  
   var oTable = new TableInit();
4.  
   oTable.Init();
5.  
   });
6.  
    
7.  
   /* 重置按钮 */
8.  
   $('#button_reset').click(function () {
9.  
   // 清空所有的值
10.  
    var formComponent = $('form');
11.  
    formComponent.find('input:text').val('');
12.  
    });

　　

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

bootstarp-table 中的按钮操作

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

1.定义按钮的位置

1.  
   <div class="btn-group-sm hidden-xs pull-right" id="toolbar" role="group">
2.  
   <a class="btn btn-success" οnclick="add()" shiro:hasPermission="system:madareanumberview:add">
3.  
   <i class="fa fa-plus"></i> 新增
4.  
   </a>
5.  
   <a class="btn btn-primary btn-edit " οnclick="edit()" shiro:hasPermission="system:madareanumberview:edit">
6.  
   <i class="fa fa-edit"></i> 修改
7.  
   </a>
8.  
   <a class="btn btn-danger btn-del " οnclick="remove()" shiro:hasPermission="system:madareanumberview:remove">
9.  
   <i class="fa fa-remove"></i> 删除
10.  
    </a>
11.  
    <a class="btn btn-warning btn-del " οnclick="removeBatch()" shiro:hasPermission="system:madareanumberview:remove">
12.  
    <i class="fa fa-remove"></i> 批量删除
13.  
    </a>
14.  
    </div>

2.按钮的点击事件

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

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

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

1.  
   <!DOCTYPE html>
2.  
   <html xmlns:th="http://www.w3.org/1999/xhtml">
3.  
   <meta charset="utf-8">
4.  
   <title>新增</title>
5.  
   <head ></head>
6.  
   <body class="white-bg">
7.  
   <div class="wrapper wrapper-content animated fadeInRight ibox-content">
8.  
   <form class="form-horizontal m" id="form-madArea-add">
9.  
   <div class="form-group">
10.  
    <label class="col-sm-3 control-label ">代码名称：</label>
11.  
    <div class="col-sm-8">
12.  
    <input class="form-control" type="text" name="tcode" id="tcode"/>
13.  
    </div>
14.  
    </div>
15.  
    <div class="form-group">
16.  
    <label class="col-sm-3 control-label">名称：</label>
17.  
    <div class="col-sm-8">
18.  
    <input class="form-control" type="text" name="tname" id="tname">
19.  
    </div>
20.  
    </div>
21.  
    <div class="form-group">
22.  
    <label class="col-sm-3 control-label">备注：</label>
23.  
    <div class="col-sm-8">
24.  
    <input class="form-control" type="text" name="remark" id="remark">
25.  
    </div>
26.  
    </div>
27.  
    <div class="col-sm-12">
28.  
    <div class="form-group">
29.  
    <div class="pull-right">
30.  
    <button id="button_preservation" type="button" class="btn btn-success">保存</button>
31.  
    <button id="button_cancel" type="button" class="btn btn-warning">取消</button>
32.  
    </div>
33.  
    </div>
34.  
    </div>
35.  
    </form>
36.  
    </div>
37.  
    <script th:src="@{/namics/umberview.js}"></script>
38.  
    </body>
39.  
    </html>

4.确认按钮的事件

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

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

1.  
   　　}
2.  
    
3.  
   })

新增取消按钮事件：

$('#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

1.  
   /***
2.  
   * 保存新增的数据
3.  
   * @param Number
4.  
   * @param mmap
5.  
   * @author zhukaixin
6.  
   * @throws
7.  
   */
8.  
   @PostMapping("/addSubmit")
9.  
   @ResponseBody
10.  
    public int addSubmitMadareanumber(Number number) {
11.  
     
12.  
    number.setEnabled(new BigDecimal(1));
13.  
    number.setCreateBy("admin");
14.  
    number.setCreateTime(new Date());
15.  
    int i = numberService.insertNumber(number);
16.  
    return i;
17.  
     
18.  
    }

　　

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

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

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

删除一条记录的js

1.  
   //删除一条记录
2.  
   function remove() {
3.  
   var tid;// 声明一个tid
4.  
   // $("#table").bootstrapTable('getSelections');为bootstrapTable自带的，所以说一定要使用bootstrapTable显示表格,#table：为table的id
5.  
   var rows = $("#madArea_table").bootstrapTable('getSelections');
6.  
   if (rows.length == 0) {// rows 主要是为了判断是否选中，下面的else内容才是主要
7.  
   alert("请先选择要删除的记录!");
8.  
   return;
9.  
   }
10.  
    if ((rows.length >= 2)) {
11.  
    alert("请先选择一条记录!");
12.  
    return;
13.  
    } else {
14.  
    $(rows).each(function () {// 通过获得别选中的来进行遍历
15.  
    tid = this.tid;// cid为获得到的整条数据中的一列
16.  
    });
17.  
    }
18.  
    //alert(tid);
19.  
    $.ajax({
20.  
    type: "post",//方法类型
21.  
    dataType: "json",//预期服务器返回的数据类型
22.  
    url: bath?tid=' + tid,//url
23.  
    success: function (result) {
24.  
    if (result.success) {
25.  
    alert("删除成功");
26.  
    var oTable = new TableInit();
27.  
    oTable.Init();
28.  
    } else {
29.  
    alert(result.message);
30.  
    }
31.  
    }
32.  
    })
33.  
    }
34.  
     

　删除多条数据

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

删除的后台controller:

1.  
   /**
2.  
   * 删除一条数据
3.  
   *
4.  
   * @author zhukaixin
5.  
   */
6.  
   @PostMapping("/delete")
7.  
   @ResponseBody
8.  
   public int removeMadareanumber(String tid) {
9.  
    
10.  
    int i = mdmAreaNumberService.deleteMdmAreaNumberByIds(tid);
11.  
    return i;
12.  
    }

　　

1.  
   /**
2.  
   * 批量删除
3.  
   *
4.  
   * @author zhukaixin
5.  
   */
6.  
   @RequiresPermissions("system:madareanumberview:remove")
7.  
   @PostMapping("/removeBatch")
8.  
   @ResponseBody
9.  
   public int removeBatchMadareanumber(String[] tids) {
10.  
    int i = mdmAreaNumberService.deleteMdmAreaNumberByIds(tids);
11.  
    return i;
12.  
    }　　

修改与删除类似

　　修改一条数据的 js:

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

//点击当前行修改当前行
$('#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

1.  
   /**
2.  
   * 根据tid修改数据
3.  
   *
4.  
   * @return java.lang.String
5.  
   * @author zhukaixin
6.  
   */
7.  
   @RequiresPermissions("system:madareanumberview:edit")
8.  
   @GetMapping("/edit/{tid}")
9.  
   public String editMadareanumber(@PathVariable("tid") String tid, ModelMap mmap) {
10.  
    if (!StringUtils.isEmpty(tid)) {
11.  
    Number number = numberService.selectMdmAreaNumberById(BigDecimal.valueOf(Long.parseLong(tid)));
12.  
    mmap.put("number", number);
13.  
    }
14.  
    return prefix + "/edit";
15.  
    }

　跳转的页面html

1.  
   <!DOCTYPE html>
2.  
   <html xmlns:th="http://www.w3.org/1999/xhtml">
3.  
   <meta charset="utf-8">
4.  
   <title>修改</title>
5.  
   <head th:include="include :: header"></head>
6.  
   <div class="white-bg">
7.  
   <div class="wrapper wrapper-content animated fadeInRight ibox-content">
8.  
   <form class="form-horizontal m" id="form-madArea-edit" th:object="${number}">
9.  
   <input type="hidden" name="tid" id="tid" th:field="*{tid}"/>
10.  
    <div class="form-group">
11.  
    <label class="col-sm-3 control-label ">代码：</label>
12.  
    <div class="col-sm-8">
13.  
    <input class="form-control" type="text" required name="tcode" id="tcode" th:field="*{tcode}"/>
14.  
    </div>
15.  
    </div>
16.  
    <div class="form-group">
17.  
    <label class="col-sm-3 control-label">名称：</label>
18.  
    <div class="col-sm-8">
19.  
    <input class="form-control" type="text" required name="tname" id="tname" th:field="*{tname}"/>
20.  
    </div>
21.  
    </div>
22.  
    <div class="form-group">
23.  
    <label class="col-sm-3 control-label">备注：</label>
24.  
    <div class="col-sm-8">
25.  
    <input class="form-control" type="text" name="remark" id="remark" th:field="*{remark}"/>
26.  
    </div>
27.  
    </div>
28.  
    <div class="col-sm-12">
29.  
    <div class="form-group">
30.  
    <div class="pull-right">
31.  
    <button id="buttonEdit_preservation" type="button" class="btn btn-success">保存</button>
32.  
    <button id="button_cancel" type="button" class="btn btn-warning">取消</button>
33.  
    </div>
34.  
    </div>
35.  
    </div>
36.  
    </form>
37.  
    </div>
38.  
    </div>
39.  
    </body>
40.  
    </html>　　

　修改提交的js

1.  
   //修改行政区域的单行数据确认按钮
2.  
   $('#buttonEdit_preservation').click(function () {
3.  
   var url = path;
4.  
   var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
5.  
   $.ajax({
6.  
   type: "POST",//方法类型
7.  
   dataType: "json",//预期服务器返回的数据类型
8.  
   url: url,//url
9.  
   data: $('#form-madArea-edit').serialize(),
10.  
    success: function (result) {
11.  
    if (result.success) {
12.  
    parent.layer.close(index); //再执行关闭
13.  
    alert("修改成功！！！！");
14.  
    } else {
15.  
    parent.layer.close(index); //再执行关闭
16.  
    alert(result.message);
17.  
    }
18.  
    }
19.  
    })
20.  
    })
21.  
     
22.  
    })

　后台修改提交的controller

1.  
   /***
2.  
   * 保存修改的数据
3.  
   * @param mdmAreaNumber
4.  
   * @param mmap
5.  
   * @author zhukaixin
6.  
   * @throws
7.  
   */
8.  
   @PostMapping("/editSubmit")
9.  
   @ResponseBody
10.  
    public int editSubmitMadareanumber(Number number, ModelMap mmap) {
11.  
    number.setModifyTime(new Date());
12.  
    　　number.setModifiedBy("admin1");
13.  
    int i = numberService.updateMdmAreaNumber(number);
14.  
    return i;
15.  
    }

　　

　

bootstrap-table 的子表

1.  
   var TableInit = function () {
2.  
   var oTableInit = new Object();
3.  
   //初始化Table
4.  
   oTableInit.Init = function () {
5.  
   $('#madArea_table').bootstrapTable('destroy');
6.  
   $('#madArea_table').bootstrapTable({
7.  
   url: ctx + "system/madareanumberview/list",
8.  
   method: 'post',//请求方式
9.  
   sortName: "createTime",
10.  
    sortOrder: "desc",
11.  
    striped: true, // 是否显示行间隔色
12.  
    pagination: true, // 是否分页
13.  
    search: false,//搜索
14.  
    showColumns: false, // 是否显示列的按钮
15.  
    detailView: true, // 是否显示父子表
16.  
    showExport: false, // 是否显示导出
17.  
    queryParams: queryParams,//传递参数（*）
18.  
    columns: [{
19.  
    checkbox: true
20.  
    },
21.  
    {
22.  
    title: '序号',//标题 可不加
23.  
    align: "center",
24.  
    formatter: function (value, row, index) {
25.  
    return index + 1;
26.  
    }
27.  
    },
28.  
    {
29.  
    field: 'tname',
30.  
    title: '名称'
31.  
    },
32.  
    {
33.  
    field: 'areaDivision',
34.  
    title: '区域'
35.  
    }，{
36.  
    field: 'remark',
37.  
    title: '备注'
38.  
    }
39.  
    {
40.  
    field: 'createTime',
41.  
    title: '创建时间',
42.  
    sortable: true,
43.  
    formatter: function (value) {
44.  
    return CommonJS.momentFormat(value, "YYYY-MM-DD");
45.  
    }
46.  
    }],
47.  
    onExpandRow: function (index, row, $detail) { // 注册加载子表的事件。注意下这里的三个参数！
48.  
    oTableInit.initDetails(index, row, $detail);
49.  
    },
50.  
    });
51.  
    };
52.  
    // 第二层（子表）
53.  
    oTableInit.initDetails = function (index, row, $detail) {
54.  
    var cur_table = $detail.html('<table id="table_tUnitsDetails"></table>').find('table');
55.  
    $(cur_table).bootstrapTable({
56.  
    // height:400,//定义表格的高度,如果放开高度的话，宽度不可拖拽；
57.  
    url: ctx + "system/madareanumberview/selectByid",
58.  
    method: 'post',//请求方式
59.  
    sortName: "createTime",
60.  
    sortOrder: "desc",
61.  
    striped: true, // 是否显示行间隔色
62.  
    pagination: true, // 是否分页
63.  
    search: false,//搜索
64.  
    showColumns: false, // 是否显示列的按钮
65.  
    detailView: true, // 是否显示父子表
66.  
    showExport: false, // 是否显示导出
67.  
    queryParams: {'tid': row.tid},
68.  
    columns: [{
69.  
    formatter: function (value, row, index) {
70.  
    return index + 1;
71.  
    },
72.  
    align: 'center'
73.  
    }, {
74.  
    field: 'tcode',
75.  
    title: '代码',
76.  
    align: 'center',
77.  
    cellStyle: {
78.  
    css: {
79.  
    "text-align": "center !important"
80.  
    }
81.  
    }
82.  
    }, {
83.  
    field: 'tname',
84.  
    title: '名称',
85.  
    align: 'center',
86.  
    cellStyle: {
87.  
    css: {
88.  
    "text-align": "center !important"
89.  
    }
90.  
    }
91.  
    }, {
92.  
    field: 'createTime',
93.  
    title: '创建时间',
94.  
    align: 'center',
95.  
    cellStyle: {
96.  
    css: {
97.  
    "text-align": "right !important"// right
98.  
    }
99.  
    },
100.  
     formatter: function (value) {
101.  
     return CommonJS.momentFormat(value, "YYYY-MM-DD");
102.  
     }
103.  
     }, {
104.  
     field: 'modifiedBy',
105.  
     title: '修改人',
106.  
     align: 'center',
107.  
     cellStyle: {
108.  
     css: {
109.  
     "text-align": "center !important"
110.  
     }
111.  
     }
112.  
     }],
113.  
     });
114.  
     };
115.  
     return oTableInit;
116.  
     };
117.  
      
118.  
     //得到查询的参数
119.  
     function queryParams(params) {
120.  
     var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
121.  
     pageNum: Math.round((params.offset + params.limit) / params.limit),
122.  
     pageSize: params.limit,
123.  
     //名称
124.  
     tname: $("#input_tname").val(),
125.  
     //区域
126.  
     areaDivision: $("#input_areaDivision").val(),
127.  
      
128.  
     };
129.  
     return temp;
130.  
     }

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