jqgrid 多级表格 文件上传 音频播放

$(function () {

    albumShow();

})

function albumShow(){
    //初始化数据表格
    $('#albumtable').jqGrid({
        styleUI:'Bootstrap',
        url:'${pageContext.request.contextPath}/album/findByPage',
        datatype:'json',
        colNames: ['ID','名称','封面','作者','播音','集数','分数','简介','状态','创建日期'],
        //开启表格编辑模式
        //cellEdit: true,
        //表单编辑提交路径
        editurl: '${pageContext.request.contextPath}/album/operAlbum',
        colModel:[
            {name:'id',align:'center'},
            {name:'title',align:'center',editable: true},
            {name:'cover',align:'center',width:200 ,editable: true,formatter:showPicture,edittype:'file',
                editoptions:{enctype:"multipart/form-data"}},
            {name:'author',align:'center',editable: true},
            {name:'broadcast',align:'center',editable: true},
            {name:'count',align:'center'},
            {name:'score',align:'center',editable: true},
            {name:'detail',align:'center',editable: true},
            {name:'status',align:'center',editable: true,edittype:'select',editoptions:{value:{'正常':'正常','隐藏':'隐藏'}}},
            {name:'createDate',align:'center'}
        ],
        autowidth: true,  //自适应父容器大小宽度
        pager:'#pager',    //分页工具栏
        rowList:[5,10,15,20,50],
        rowNum:5,
        page:1,
        viewrecords:true,   //是否展示总记录条数
        rownumbers:true,    //第一列展示行号
        height:400,
        hidegrid: true,
        subGrid : true,
        caption : "专辑详细信息",

        subGridRowExpanded : function(subgrid_id, id) {
            console.log(id);  // 父表 id
            console.log(subgrid_id);   // albumtable_父表 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/findByAlbumId?albumId=" + id,
                    //表单编辑提交路径
                    editurl: '${pageContext.request.contextPath}/chapter/operChapter?albumId='+id,
                    datatype: "json",
                    colNames: ['ID', '章节名称', '章节大小','播放时长','在线试听','创建时间'],
                    colModel: [
                        {name: "id",align:'center'},
                        {name: "title",align:'center',editable: true},
                        {name: "size",align:'center'},
                        {name: "duration",align:'center'},
                        {name: "audio",align:'center',width:300 ,editable: true,edittype:'file',formatter:function (value,option,rows) {
                                return "<audio controls loop preload='auto'>\n" +
                                    "<source src='${pageContext.request.contextPath}/audio/"+value+"' type='audio/mpeg'>\n"+
                                    "<source src='${pageContext.request.contextPath}/audio/"+value+"' type='audio/ogg'>\n"+
                                    "</audio>";
                            }},
                        {name: "createDate",align:'center'}
                    ],
                    autowidth: true,
                    rowNum: 5,
                    rowList:[5,10,15,20,50],
                    page:1,
                    viewrecords:true,
                    rownumbers:true,
                    pager: pager_id,
                    height: '250px',
                    styleUI:'Bootstrap',
                    autowidth:true,
                }).navGrid("#" + pager_id, {edit: true, add: true, del: true},
                {
                    //控制修改操作
                    closeAfterEdit:true,
                    afterSubmit:function (response) {
                       //alert("上传");
                        var id = response.responseJSON.id;
                        console.log(id);
                        var status = response.responseJSON.status;
                        console.log(status);
                        var upload = response.responseJSON.upload;
                        console.log(upload);
                        var subgrid_table_id = response.responseJSON.subgrid_table_id;
                        console.log(subgrid_table_id);
                        if (status == "ok"&&upload=="ok"){
                            $.ajaxFileUpload( {
                                url : "${pageContext.request.contextPath}/chapter/upload",//用于文件上传的服务器端请求地址
                                fileElementId : 'audio',    //文件上传空间的id属性  <input type="file" id="file" name="file" />
                                // dataType : 'json',
                                data:{id:id},
                                success : function() {
                                    $("#" + subgrid_table_id).trigger("reloadGrid");
                        }
                            })
                            return "456657";
                        }
                    }
                }, {
                    //控制添加操作
                    closeAfterAdd:true,
                    afterSubmit:function (response) {
                        //alert("上传");
                        var id = response.responseJSON.id;
                        console.log(id);
                        var status = response.responseJSON.status;
                        console.log(status);
                        var subgrid_table_id = response.responseJSON.subgrid_table_id;
                        console.log(subgrid_table_id);
                        if (status == "ok"){
                            $.ajaxFileUpload( {
                                url : "${pageContext.request.contextPath}/chapter/upload",//用于文件上传的服务器端请求地址
                                fileElementId : 'audio',    //文件上传空间的id属性  <input type="file" id="file" name="file" />
                                // dataType : 'json',
                                data:{id:id},
                                success : function() {
                                    $("#" + subgrid_table_id).trigger("reloadGrid");
                                    //$('#albumtable').trigger("reloadGrid");
                                }
                            })
                            return "456657";
                        }
                    }
                }

            );
        }

    }).navGrid('#pager',{'edit':true,'add':true,'del':true},
        {
            //控制修改操作
            closeAfterEdit:true,
            afterSubmit:function (response) {
                //alert("上传");
                var id = response.responseJSON.id;
                console.log(id);
                var status = response.responseJSON.status;
                console.log(status);
                var upload = response.responseJSON.upload;
                console.log(upload);
                if (status == "ok"&&upload=="ok"){
                    $.ajaxFileUpload( {
                        url : "${pageContext.request.contextPath}/album/upload",//用于文件上传的服务器端请求地址
                        fileElementId : 'cover',    //文件上传空间的id属性  <input type="file" id="file" name="file" />
                        // dataType : 'json',
                        data:{id:id},
                        success : function() {
                            $("#albumtable").trigger("reloadGrid");
                        }
                    })
                    return "456657";
                }
            }
        }, {
            //控制添加操作
        closeAfterAdd:true,
        afterSubmit:function (response) {
          //  alert("上传");
            var id = response.responseJSON.id;
            console.log(id);
            var status = response.responseJSON.status;
            console.log(status);
            if (status == "ok"){
                $.ajaxFileUpload( {
                    url : "${pageContext.request.contextPath}/album/upload",//用于文件上传的服务器端请求地址
                    fileElementId : 'cover',    //文件上传空间的id属性  <input type="file" id="file" name="file" />
                   // dataType : 'json',
                    data:{id:id},
                    success : function() {
                        $("#albumtable").trigger("reloadGrid");
                    }
                })
                return "456657";
            }
        }

        });
}

function showPicture(cellvalue){
    return "<img src='${pageContext.request.contextPath}/img/" +cellvalue  + "' height='100' width='100'/>";
}

转载于:https://www.cnblogs.com/jia-0112/p/11365053.html