jqGrid结合ajaxFileUpload插件进行音频上传+音频文件获取时长和文件获取大小+jqGrid二级表格+jqGrid操作完成后的操作

• 项目背景:

项目开发需要使用jqGrid生成表格并在表格中生成音频并可在线听歌,并实现从用户本地上传音频至服务器,如下图所示

基本方法与jqGrid结合ajaxFileUpload插件进行图片上传相似,这里只写部分不同的地方

• 代码实现

• 前台代码
• 注意需要导js文件,ajaxFileUpload的js和jqGrid和BootStrap的js

$('#tt').jqGrid({
                url:'${pageContext.request.contextPath}/album/queryAll',
                datatype:'json',
                //引入bootstrap的UI样式
                styleUI:'Bootstrap',
                colNames:['ID','标题','评分','简介','播音','封面','作者','集数','发布日期'],
                cellEdit:false,
                editurl:'${pageContext.request.contextPath}/album/operation',
                colModel:[
                    {name:'id'},
                    {name:'title',editable:true},
                    {name:'score',editable:true},
                    {name:'detail',editable:true},
                    {name:'broadcast',editable:true},
                    {
                        name: 'cover',
                        editable: true,
                        edittype: 'file',
                        editoptions:{enctype:"multipart/form-data"},
                        //渲染静态数据
                        // editoptions:{value:"1:研发部;2:教学部"},
                        // 加载远程数据渲染下拉列表,要求响应的是一段html元素内容
                        <%--editoptions: {dataUrl: '${pageContext.request.contextPath}/dept/queryAllDept'},--%>
                        formatter: function (value, options, row) {
                            /**
                                           * value : 在远程匹配到的数据
                                           * options: 当前单元格操作属性对象
                             4.带分页功能的数据表格
                                           * row : 当前行的数据对象
                                           */