bootstrap 获取表格修改的结果_Bootstrap-table 增删改查

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

@*1、Jquery组件引用*@

@*2、bootstrap组件引用*@

@*3、bootstrap table组件以及中文包的引用*@

2.定义一个空的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 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.定义按钮的位置

新增

修改

删除

批量删除

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文件)

新增

代码名称：

名称：

备注：

保存

取消

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

修改

代码：

名称：

备注：

保存

取消