项目笔记之jqGrid+bootstrap实现二级表格

业务需求

项目中需要实现二级页面的展示，父级下面有多个子级列表

实现结果图：

实现步骤：

1：可以去jqGrid中文官网去找实例
网址：https://blog.mn886.net/jqGrid/
2：以下代码是我的实现过程

<script>
            $("#tb").jqGrid(
                {
                url : '${pageContext.request.contextPath}/album/findAlbum',
                datatype : "json",
                height : 290,
                colNames : [ 'ID','标题', '内容', '作者', '封面', '上架时间' ],
                colModel : [
                {name : 'id', width : 55,},
                {name : 'title',width : 90,editable:true,},
                {name : 'content',width : 100,editable:true,},
                {name : 'author',width : 80,editable:true,},
                {name : 'src',width : 80,editable:true,formatter:showPicture,edittype:'file',
                    editoptions:{enctype:"multipart/form-data"}},
                {name : 'addTime',width : 80,},
                ],
                    editurl:'${pageContext.request.contextPath}/album/edit',
                    autowidth:true,//数据表格是否自适应父容器的大小宽度
                    styleUI:"Bootstrap",
                rowNum : 3,//每页展示的页数
                rowList : [ 3, 6, 9, 12 ],
                pager : '#pg',//开启底部工具栏
                viewrecords : true,//分页展示总条数
                multiselect : true,//复选框是否展示
                subGrid : true,//开启二级表格
                caption : "章节列表",
                subGridRowExpanded : function(subgrid_id, row_id) {
                    var subgrid_table_id = subgrid_id + "_t";
                    var pager_id = "p_" + subgrid_table_id;
                    $("#" + subgrid_id).html(
                        "<table id='" + subgrid_table_id
                        + "' class='scroll'></table><div id='"
                        + pager_id + "' class='scroll'></div>");
                    $("#" + subgrid_table_id).jqGrid(
                        {
                            url : '${pageContext.request.contextPath}/chapter/findChapter?albumId='+row_id,
                            datatype : "json",
                            colNames : [ 'ID', '标题', '上架时间', '大小','播放' ],
                            colModel : [
                                {name : "id",},
                                {name : "title",editable:true,width :60},
                                {name : "addTime",},
                                {name : "size",width :50,},
                                {name : "src",editable:true,formatter:showAudio,edittype:'file',
                                    editoptions:{enctype:"multipart/form-data"}

                                }
                            ],
                            editurl:'${pageContext.request.contextPath}/chapter/edit?albumId='+row_id,
                            autowidth:true,//数据表格是否自适应父容器的大小宽度
                            multiselect : true,
                            styleUI:"Bootstrap",
                            rowNum : 3,
                            rowList : [ 3, 6, 9, 12 ],
                            pager : pager_id,
                            viewrecords : true,
                            height : 160,
                            //height : '100%'
                        });
                    $("#" + subgrid_table_id).jqGrid('navGrid',
                        "#" + pager_id, {
                            edit : true,
                            add : true,
                            del : true
                        },{
                        //修改的操作
                            closeAfterEdit:true,

                            afterSubmit:function (result) {

                                if (result.responseJSON.data=="error"){
                                    return "111";
                                };
                                console.log(result),
                                    $.ajaxFileUpload({
                                        url:'${pageContext.request.contextPath}/chapter/upload',
                                        fileElementId:'src',
                                        data:{id:result.responseJSON.data},
                                        type:'post',
                                        datatype:'json',
                                        success:function () {
                                            $("#tb").trigger("reloadGrid")
                                        }
                                    });
                                return "123";
                            }

                        },{
                        //添加的操作
                            closeAfterAdd:true,

                            afterSubmit:function (result) {
                                console.log(result),
                                    $.ajaxFileUpload({
                                        url:'${pageContext.request.contextPath}/chapter/upload',
                                        fileElementId:'src',
                                        data:{id:result.responseJSON.data},
                                        type:'post',
                                        datatype:'json',
                                        success:function () {
                                            $("#tb").trigger("reloadGrid")
                                        }
                                    });
                                return "123";
                            }


                        },{
                        //删除的操作
                            closeAfterDel:true,
                        }

                        );
                },
                    subGridRowColapsed : function(subgrid_id, row_id) {
                        // this function is called before removing the data
                        //var subgrid_table_id;
                        //subgrid_table_id = subgrid_id+"_t";
                        //jQuery("#"+subgrid_table_id).remove();
                    }
                });
                $("#tb").jqGrid('navGrid', '#pg', {
                    edit : true,
                    add : true,
                    del : true
            },{
                    //控制修改操作
                    closeAfterEdit:true,

                    afterSubmit:function (result) {
                        if (result.responseJSON.data=="error"){
                            return "111";
                        };
                        console.log(result),
                            $.ajaxFileUpload({
                                url:'${pageContext.request.contextPath}/album/upload',
                                fileElementId:'src',
                                data:{id:result.responseJSON.data},
                                type:'post',
                                datatype:'json',
                                success:function () {
                                    $("#tb").trigger("reloadGrid")
                                }
                            });
                        return "123";
                    }

                },{


                    //控制添加操作
                    closeAfterAdd:true,
                    afterSubmit:function (result) {
                        console.log(result),
                            $.ajaxFileUpload({
                                url:'${pageContext.request.contextPath}/album/upload',
                                fileElementId:'src',
                                data:{id:result.responseJSON.data},
                                type:'post',
                                datatype:'json',
                                success:function () {
                                    $("#tb").trigger("reloadGrid")
                                }
                            });
                        return "123";
                    }

                },{
                    //控制删除操作
                    closeAfterDel:true,

                }


            );

            function showPicture(cellvalue){
                return "<img src='${pageContext.request.contextPath}/img/"+cellvalue+"' height='50' width='70'/>";
            }
            function showAudio(cellvalue){
                return "<audio controls style='height: 20px;width:200px'>\n" +
                "  <source src='${pageContext.request.contextPath}/mp3/"+ cellvalue +"'  type=\"audio/mpeg\">\n" +
                "</audio>";
            }

    </script>

以上是实现过程
这是一级表格追加的div 详细教程可以参考官网