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'/>";
}

posted @ 2019-08-16 17:04  我是一名搬运工  阅读(481)  评论(0编辑  收藏  举报