<%@page isELIgnored="false" contentType="text/html; UTF-8" pageEncoding="UTF-8" %><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><c:set value="${pageContext.request.contextPath}" var="path"/><script> $(function () { $("#banner-table").jqGrid({ url : '${path}/img/selectAll', //url : '${path}/statics/json/banner.json', type:'post', datatype : "json",//指定渲染格式 //cellEdit:true,//单元格内编辑 colNames : [ 'ID','标题','封面','创建日期','末了修正日期','状态'], colModel : [ {name : 'id',width : 20}, {name : 'title',editable:true,width : 50}, //editable:true 指定可编辑 {name : 'cover',editable:true,width : 100,edittype:"file",//编辑类型 改为文件类型 formatter:function (cellvalue,options,rowObject){ //cellvalue：当前字段的名字 console.log(cellvalue); //options：表格所有的信息 console.log(options) //rowObject：当前行的所有信息 console.log(rowObject) return "<img style='width:100px; height:70px'src='${path}/img/"+cellvalue+"'></img>" } }, {name : 'createDate',width : 80}, {name : 'lastUpdate',width : 80}, {name : 'status',editable:true,width : 30} ], styleUI:'Bootstrap', // 引入bootstrap样式 autowidth:true,//自适应父容器宽度 height:330, //高度 pager : '#banner-pager', //引入分页栏 引到第表格下的div上 page:1, //默认展示第几页 rowNum : 4, //每页几条 rowList : [4, 10, 20, 30 ],//默认条数 multiselect:true, //添加多选框 viewrecords : true, //右下角展示总页数 caption : "轮播图详情", //表标题 右上角可收起 editurl : "${path}/img/edit" //点击提交走的url }).jqGrid('navGrid','#banner-pager',//navGrib : 固定的 ，第二个参数 分页栏的id { //处理按钮的展示与否或者样式 edit : true,add : true,del : true },{ //编辑工具润色 在编辑之前或之后进行的额外操作 如之前: beforShowForm:function(){alert(555)}, closeAfterEdit:true, //提交或取消后关闭 afterSubmit:function (response) {// 上次要求结束后的相应信息 // 得到返回的id 通过id传给controller 修正文件名 var bid = response.responseJSON.data; if (bid!=null){ $.ajaxFileUpload( { url: '${path}/img/upload', //用于文件上传的做事器端要求地址 secureuri: false, //是否须要安全协议，一样平常设置为false fileElementId: 'cover', //文件上传域的ID 上传字段的name 默认name便是id dataType: 'json', //返回值类型 一样平常设置为json 指定与否效果相同 async:true, //是否是异步 data:{bid:bid}, success: function (data) //做事器成功相应处理函数 { console.log(111111); $("#banner-table").trigger("reloadGrid") //刷新页面 }, error: function (data)//做事器相应失落败处理函数 { console.log(22222); // alert(e); $("#banner-table").trigger("reloadGrid") //刷新页面 } }) } return "sss"; //函数须要返回值 任意字符串 //console.log(response.responseJSON.data) } },{ // 添加工具的润色 closeAfterAdd:true, afterSubmit:function (response) {// 上次要求结束后的相应信息 // 得到返回的id 通过id传给controller 修正文件名 var bid = response.responseJSON.data; $.ajaxFileUpload( { url: '${path}/img/upload', //用于文件上传的做事器端要求地址 secureuri: false, //是否须要安全协议，一样平常设置为false fileElementId: 'cover', //文件上传域的ID 上传字段的name 默认name便是id dataType: 'json', //返回值类型 一样平常设置为json 指定与否效果相同 async:true, //是否是异步 data:{bid:bid}, success: function (data) //做事器成功相应处理函数 { $("#banner-table").trigger("reloadGrid") }, error: function (data, status, e)//做事器相应失落败处理函数 { //alert(e); $("#banner-table").trigger("reloadGrid") } }); return "sss"; //函数须要返回值 任意字符串 //console.log(response.responseJSON.data) } },{ // 删除工具的润色 }) })</script><table id="banner-table"></table><div id="banner-pager"></div>
