项目中示例 :
var grid = $("#grid-data").bootgrid({
$(document).ready(function () {
//1. 调用 id.bootgrid({***});
var grid = $("#grid-data").bootgrid({
// 是否发生异步请求(必须true)
ajax:true,
// 传递的参数
post:function () {
return {
id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
};
},
// 请求的url 返回json格式数据
url:"/stu/stuList",
// html中与data-data-formatter相连
formatters:{
// 其中column是每列的列名, row是java返回值得每行数据
"commands":function (column, row) {
//在操作这一列显示的东西----data-row-id为自定义属性------row.id中的id为java返回行中的一个属性值id
// 类command-edit 和 command-delete 所在位置
return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\">编辑<span class=\"fa fa-pencil\"></span></button> "+
"<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\">删除<span class=\"fa fa-trash-o\"></span></button>";
}
}
//延迟加载
}).on("loaded.rs.jquery.bootgrid",function () {
// 2.修改页面 点击class(.command-edit)按钮
grid.find(".command-edit").on("click", function (e) {
// 2.调用class(.stumodal).modal()
$(".stumodal").modal();
// post() 方法通过Http post请求从服务器载入数据 url, data, success
$.post("/stu/getStuInfo",{id:$(this).data("row-id")}, function (str) {
// 赋值给id为id2
$("#id2").val(str.id);
$("#stu_id2").val(str.stu_id);
$("#stu_name2").val(str.stu_name);
$("#stu_age2").val(str.stu_age);
$("#stu_major2").val(str.stu_major);
});
// 3.删除按钮 点击class(.command-delete)
}).end().find(".command-delete").on("click", function (e) {
var r = confirm("你确定要删除编号为 " + $(this).data("row-id") + " 的学生信息吗?");
if(r){
$.post("/stu/delStu", {id:$(this).data("row-id")}, function () {
alert("删除成功!");
$("#grid-data").bootgrid("reload");
});
};
});
});
});
<table id="grid-data" class="table table-condensed table-hover table-striped">
<%--1. id="grid-data" 所在位置--%>
<table id="grid-data" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<%--数据显示来源(根据data-column-**)--%>
<th data-column-id="id" data-identifier="true" data-type="numeric">编号</th>
<th data-column-id="stu_id">学号</th>
<th data-column-id="stu_name">姓名</th>
<th data-column-id="stu_age">年龄</th>
<th data-column-id="stu_major">科目</th>
<th data-column-id="commands" data-formatter="commands" data-sortable="false">操作</th>
</tr>
</thead>
</table>