jQuery Bootgrid插件(二)

项目中示例 :

    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>