<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!--[if lt IE 9]> <script type="text/javascript" src="${ctx}/assets/lib/html5.js"></script> <script type="text/javascript" src="${ctx}/assets/lib/respond.min.js"></script> <script type="text/javascript" src="${ctx}/assets/lib/PIE_IE678.js"></script> <![endif]--> <link rel="stylesheet" type="text/css" href="${ctx}/assets/static/h-ui/css/H-ui.min.css" /> <link rel="stylesheet" type="text/css" href="${ctx}/assets/static/h-ui.admin/css/H-ui.admin.css" /> <link rel="stylesheet" type="text/css" href="${ctx}/assets/lib/Hui-iconfont/1.0.7/iconfont.css" /> <link rel="stylesheet" type="text/css" href="${ctx}/assets/lib/icheck/icheck.css" /> <link rel="stylesheet" type="text/css" href="${ctx}/assets/static/h-ui.admin/skin/default/skin.css" id="skin" /> <link rel="stylesheet" type="text/css" href="${ctx}/assets/static/h-ui.admin/css/style.css" /> <script type="text/ecmascript" src="${ctx}/assets/lib/jquery/1.9.1/jquery.js"></script> <script type="text/javascript" src="${ctx}/assets/static/h-ui/js/H-ui.js"></script> <script type="text/javascript" src="${ctx}/assets/lib/layer/3.0.3/layer.js"></script> <link type="text/css" href="${ctx}/assets/lib/codemirror/lib/codemirror.css" rel="stylesheet" /> <script type="text/javascript" src="${ctx}/assets/lib/codemirror/lib/codemirror.js"></script> <script src="${ctx}/assets/lib/codemirror/mode/xml/xml.js"></script> <link rel="stylesheet" type="text/css" href="${ctx}/assets/lib/webuploader/0.1.5/webuploader.css"> <script type="text/javascript" src="${ctx}/assets/lib/webuploader/0.1.5/webuploader.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="${ctx}/assets/lib/jqueryui/jquery-ui.css" /> <link rel="stylesheet" type="text/css" media="screen" href="${ctx}/assets/lib/jqgrid/css/ui.jqgrid.css" /> <script type="text/ecmascript" src="${ctx}/assets/lib/jqueryui/jquery-ui.js"></script> <script type="text/ecmascript" src="${ctx}/assets/lib/jqgrid/js/i18n/grid.locale-cn.js"></script> <script type="text/ecmascript" src="${ctx}/assets/lib/jqgrid/js/jquery.jqGrid.min.js"></script> <script type="text/javascript" src="${ctx}/assets/js/base.js"></script> <!--[if IE 6]> <script type="text/javascript" src="${ctx}/assets/lib/DD_belatedPNG_0.0.8a-min.js" ></script> <script>DD_belatedPNG.fix('*');</script> <![endif]--> <style type="text/css"> .CodeMirror { border: 1px solid #eee; height: auto; } </style> <script type="text/javascript"> $(function() { $(window).resize(function(){ $("#jqGridGroup").setGridWidth($(window).width()-40); $("#jqGrid").setGridWidth($(window).width()-40); $("#jqGridSkin").setGridWidth($(window).width()-40); $("#jqGridCss").setGridWidth($(window).width()-40); }); $("#jqGridGroup").jqGrid({ url : '${ctx}/myconsole/templategroup/getByPage', editurl:"${ctx}/myconsole/templategroup/saveOrUpdate2", mtype : "POST", datatype : "json", caption:'模板组管理', prmNames : { id: "keyid", oper:"oper", addoper:"add", editoper:"edit", deloper:"del" }, colModel : [ { label : '模板组编号', name : 'keyid', hidden : true, editable: false, key : true, width : 80 },{ label : '模板组编号', name : 'templategroupid', editable: false, width : 80 }, { label : '模板组名称', name : 'templategroupname', editable: true, width : 80, formoptions:{ elmsuffix:'*' }, editoptions: { maxlength: 15 }, editrules:{required:true} }, { label : '模板组描述', name : 'templategroupdesc', editable: true, width : 80, edittype : "textarea", editoptions: { size:50, maxlength: 500, rows:"5", cols:"40" } }, { label : '更新时间', name : 'updatetime', editable: false, width : 80 },{ label : '操作', name:'operMod', index:'operMod', align:"center", width:"40", formatter: function (cellvalue, options, rowdata) { var html = '<div><div class="filePicker">上传</div></div>'; return html; } }], rownumbers : true,//添加左侧行号 viewrecords : true,//是否在浏览导航栏显示记录总数 rowNum : 10,//每页显示记录数 rowList : [10,15,20,30,40,50 ],//用于改变显示行数的下拉列表框的元素数组。 autowidth : true, height : 'auto', onSelectRow : function( rowid ) { if(rowid.length>10){ var row = $(this).getRowData(rowid); $("#jqGrid").setColProp('templategroupkeyid',{editoptions:{value:row.templategroupid+":a"}}); $("#jqGridSkin").setColProp('templategroupkeyid',{editoptions:{value:row.templategroupid+":a"}}); $("#jqGridCss").setColProp('templategroupkeyid',{editoptions:{value:row.templategroupid+":a"}}); $("#jqGrid").setCaption("模板管理--"+row.templategroupname); $("#jqGrid").jqGrid('setGridParam',{url: "${ctx}/myconsole/template/getByPage?templateGroupKeyID="+row.templategroupid}); $("#jqGrid").trigger("reloadGrid"); $("#jqGridSkin").jqGrid('setGridParam',{url: "${ctx}/myconsole/skin/getByPage?templateGroupKeyID="+row.templategroupid}); $("#jqGridSkin").trigger("reloadGrid"); $("#jqGridCss").jqGrid('setGridParam',{url: "${ctx}/myconsole/skin/getByPageCss?templateGroupKeyID="+row.templategroupid}); $("#jqGridCss").trigger("reloadGrid"); uploader.options.formData.templateGroupKeyID= row.templategroupid; } }, loadComplete: function(){ uploader = WebUploader.create({ // 选完文件后,是否自动上传。 auto: true, // swf文件路径 swf: '${ctx}/assets/lib/webuploader/0.1.5/Uploader.swf', // 文件接收服务端。 server: '${ctx}/myconsole/template/upload', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '.filePicker', duplicate: true,//可重复上传 // 只允许选择图片文件。 accept: { title: 'zips', extensions: 'zip', mimeTypes: '.zip' } }); uploader.on('uploadSuccess', function( file ) { alert("上传成功"); $("#jqGrid").trigger('reloadGrid'); $("#jqGridSkin").trigger('reloadGrid'); $("#jqGridCss").trigger('reloadGrid'); }); uploader.on('uploadError', function( file ) { alert("上传失败"); }); }, pager : "#jqGridPagerGroup" }); $('#jqGridGroup').navGrid('#jqGridPagerGroup', // the buttons to appear on the toolbar of the grid { edit : true, add : true, del : true, search : true, refresh : true, view : false, position : "left", cloneToTop : true }, // options for the Edit Dialog { recreateForm : true, checkOnUpdate : true, checkOnSubmit : true, closeAfterEdit : true, onInitializeForm:function(formid) { }, serializeEditData: function(postdata) { //myconsole.log(postdata); $.each(postdata,function (index, value) { //myconsole.log(index); if(index!="jqGrid_id" && index!="oper" && index!="id"){ modifyJosnKey(postdata,index,"templateGroup."+index); } if(index=="id"){ postdata["templateGroup."+index]=value; } }) //myconsole.log(postdata); return postdata; }, afterSubmit: function(r, data) { var messageString = r.responseText; var mesObj = eval('(' + messageString + ')'); return [mesObj.state, mesObj.msg]; }, errorTextFormat : function(data) { return 'Error: ' + data.responseText; } }, // options for the Add Dialog { closeAfterAdd : true, recreateForm : true, beforeSubmit: function(postdata, formid){ $.each(postdata,function (index, value) { if(index!="jqGrid_id" && index!="oper"){ modifyJosnKey(postdata,index,"templateGroup."+index); } }) return[true,'']; }, afterSubmit: function(r, data) { var messageString = r.responseText; var mesObj = eval('(' + messageString + ')'); return [mesObj.state, mesObj.msg]; }, errorTextFormat : function(data) { return 'Error: ' + data.responseText; } }, // options for the Delete Dailog { errorTextFormat : function(data) { return 'Error: ' + data.responseText; } },{ // search options 这里支持多条件查询 multipleSearch: true, sopt:['eq','ne','cn','nc','lt','le','gt','ge'], afterSubmit: function(r, data) { var messageString = r.responseText; var mesObj = eval('(' + messageString + ')'); return [mesObj.state, mesObj.message]; } } ); /////////////////////////////////////////// $("#jqGrid").jqGrid({ url : '${ctx}/myconsole/template/getByPage', editurl:"${ctx}/myconsole/template/saveOrUpdate", mtype : "POST", datatype : "json", caption:'模板管理', prmNames : { id: "keyid", oper:"oper", addoper:"add", editoper:"edit", deloper:"del" }, colModel : [ { label : '模板编号', name : 'keyid', hidden : true, key : true, width : 50 }, { label : '模板组编号', name : 'templategroupkeyid', hidden : true, editable : true, edittype :"select", editoptions:{value:"a:a"} }, { label : '文件名称', name : 'filename', editable: true, width : 80, formoptions:{ elmsuffix:'* 必须以.html结尾' }, editoptions: { maxlength: 15 }, editrules:{ custom:true, custom_func:function (value, colname) { var strEnglishOrNum = /^([0-9a-zA-Z.-_]+)?$/; if(!strEnglishOrNum.test(value)) return [false, colname+"应该为英文字母或者数字"]; else if (value=='') return [false,colname+" 不允许为空"]; else if(!value.endsWith(".html")) return [false,colname+" 必须以.html结尾"]; else return [true,""]; } } }, { label : '模板名称', name : 'templatename', editable: true, width : 80, formoptions:{ elmsuffix:'*' }, editoptions: { maxlength: 15 }, editrules:{required:true} }, { label : '模板类型', name : 'templatetype', editable: true, formatter:"select", edittype: "select", editoptions: { value: "首页:首页;列表:列表;内容:内容" }, stype:"select", searchoptions:{ value: "首页:首页;列表:列表;内容:内容" }, width : 80, }, { label : '内容区域宽度', name : 'contentwidth', editable: true, width : 80, formoptions:{ elmsuffix:'像素整数' }, editrules:{ integer:true } }, { label : '更新时间', name : 'updatetime', editable: false, width : 80 },{ label : '操作', name:'operMod', index:'operMod', align:"center", width:"80", formatter: function (cellvalue, options, rowdata) { var html = "<button class='btn btn-success radius size-S' onclick=edit('"+rowdata.keyid+"')>编辑</button>"; html += " <button class='btn btn-success radius size-S' onclick=dynamic('"+rowdata.keyid+"')>动态化</button>"; //html += " <button class='btn btn-success radius size-S' onclick=design('"+rowdata.filename+"')>设计</button>"; return html; } }], rownumbers : true,//添加左侧行号 viewrecords : true,//是否在浏览导航栏显示记录总数 rowNum : 10,//每页显示记录数 rowList : [10,15,20,30,40,50 ],//用于改变显示行数的下拉列表框的元素数组。 autowidth : true, height : 'auto', pager : "#jqGridPager" }); $('#jqGrid').navGrid('#jqGridPager', //the buttons to appear on the toolbar of the grid { edit : true, add : true, del : true, search : true, refresh : true, view : false, position : "left", cloneToTop : true }, //options for the Edit Dialog { recreateForm : true, checkOnUpdate : true, checkOnSubmit : true, closeAfterEdit : true, onInitializeForm:function(formid) { }, serializeEditData: function(postdata) { //myconsole.log(postdata); $.each(postdata,function (index, value) { //myconsole.log(index); if(index!="jqGrid_id" && index!="oper" && index!="id"){ modifyJosnKey(postdata,index,"template."+index); } if(index=="id"){ postdata["template."+index]=value; } }) //myconsole.log(postdata); return postdata; }, afterSubmit: function(r, data) { var messageString = r.responseText; var mesObj = eval('(' + messageString + ')'); return [mesObj.state, mesObj.msg]; }, errorTextFormat : function(data) { return 'Error: ' + data.responseText; } }, //options for the Add Dialog { closeAfterAdd : true, recreateForm : true, beforeSubmit: function(postdata, formid){ $.each(postdata,function (index, value) { if(index!="jqGrid_id" && index!="oper"){ modifyJosnKey(postdata,index,"template."+index); } }) return[true,'']; }, afterSubmit: function(r, data) { var messageString = r.responseText; var mesObj = eval('(' + messageString + ')'); return [mesObj.state, mesObj.msg]; }, errorTextFormat : function(data) { return 'Error: ' + data.responseText; } }, //options for the Delete Dailog { errorTextFormat : function(data) { return 'Error: ' + data.responseText; } },{ // search options 这里支持多条件查询 multipleSearch: true, sopt:['eq','ne','cn','nc','lt','le','gt','ge'], afterSubmit: function(r, data) { var messageString = r.responseText; var mesObj = eval('(' + messageString + ')'); return [mesObj.state, mesObj.message]; } } ); /////////////////////////////////////////// $("#jqGridCss").jqGrid({ url : '${ctx}/myconsole/skin/getByPageCss', editurl:"${ctx}/myconsole/skin/saveOrUpdate", mtype : "POST", datatype : "json", caption:'样式管理', prmNames : { id: "keyid", oper:"oper", addoper:"add", editoper:"edit", deloper:"del" }, colModel : [ { label : '模板编号', name : 'keyid', hidden : true, key : true, width : 50 }, { label : '模板组编号', name : 'templategroupkeyid', hidden : true, editable : true, edittype :"select" , editoptions:{value:"a:a"} }, { label : '文件名称', name : 'filename', editable: true, width : 80, formoptions:{ elmsuffix:'* 必须以.css结尾' }, editoptions: { maxlength: 15 }, editrules:{ custom:true, custom_func:function (value, colname) { var strEnglishOrNum = /^([0-9a-zA-Z.]+)?$/; if(!strEnglishOrNum.test(value)) return [false, colname+"应该为英文字母或者数字"]; else if (value=='') return [false,colname+" 不允许为空"]; else if(!value.endsWith(".css")) return [false,colname+" 必须以.css结尾"]; else return [true,""]; } } }, { label : '样式名称', name : 'templatename', editable: true, width : 80, formoptions:{ elmsuffix:'*' }, editoptions: { maxlength: 15 }, editrules:{required:true} }, { label : '说明 ', name : 'readme', editable: true, width : 180, edittype : "textarea", editoptions: { maxlength: 1000 } } , { label : '更新时间', name : 'updatetime', editable: false, width : 80 } ,{ label : '操作', name:'operMod', index:'operMod', align:"center", width:"80", formatter: function (cellvalue, options, rowdata) { var html = "<button class='btn btn-success radius size-S' onclick=editCss('"+rowdata.keyid+"','css')>编辑</button>"; return html; } }], rownumbers : true,//添加左侧行号 viewrecords : true,//是否在浏览导航栏显示记录总数 rowNum : 10,//每页显示记录数 rowList : [10,15,20,30,40,50 ],//用于改变显示行数的下拉列表框的元素数组。 autowidth : true, height : 'auto', pager : "#jqGridPagerCss" }); $('#jqGridCss').navGrid('#jqGridPagerCss', // the buttons to appear on the toolbar of the grid { edit : true, add : true, del : true, search : true, refresh : true, view : true, position : "left", cloneToTop : true }, // options for the Edit Dialog { recreateForm : true, checkOnUpdate : true, checkOnSubmit : true, closeAfterEdit : true, onInitializeForm:function(formid) { }, serializeEditData: function(postdata) { //myconsole.log(postdata); $.each(postdata,function (index, value) { //myconsole.log(index); if(index!="jqGrid_id" && index!="oper" && index!="keyid"){ modifyJosnKey(postdata,index,"skin."+index); } if(index=="keyid"){ postdata["skin."+index]=value } }) //myconsole.log(postdata); return postdata; }, afterSubmit: function (response, postdata) { // console.log(response); var res=eval('(' + response.responseText + ')'); //layer.msg(res.msg); return [res.state,res.msg,'']; }, errorTextFormat : function(data) { return 'Error: ' + data.responseText } }, // options for the Add Dialog { closeAfterAdd : true, recreateForm : true, beforeSubmit: function(postdata, formid){ $.each(postdata,function (index, value) { if(index!="jqGrid_id" && index!="oper"){ modifyJosnKey(postdata,index,"skin."+index); } }) return[true,'']; }, afterSubmit: function (response, postdata) { // console.log(response); var res=eval('(' + response.responseText + ')'); return [res.state,res.msg,'']; }, errorTextFormat : function(data) { return 'Error: ' + data.responseText } }, // options for the Delete Dailog { errorTextFormat : function(data) { return 'Error: ' + data.responseText } },{ // search options 这里支持多条件查询 multipleSearch: true, sopt:['eq','ne','cn','nc','lt','le','gt','ge'], afterSubmit: function(r, data) { var messageString = r.responseText; var mesObj = eval('(' + messageString + ')'); return [mesObj.state, mesObj.message]; } } ); /////////////////////////////////////////// $("#jqGridSkin").jqGrid({ url : '${ctx}/myconsole/skin/getByPage', editurl:"${ctx}/myconsole/skin/saveOrUpdate", mtype : "POST", datatype : "json", caption:'换肤样式管理', prmNames : { id: "keyid", oper:"oper", addoper:"add", editoper:"edit", deloper:"del" }, colModel : [ { label : '模板编号', name : 'keyid', hidden : true, key : true, width : 50 }, { label : '模板组编号', name : 'templategroupkeyid', hidden : true, editable : true, edittype :"select" , editoptions:{value:"a:a"} }, { label : '文件名称', name : 'filename', editable: true, width : 80, formoptions:{ elmsuffix:'* 必须以.css结尾' }, editoptions: { maxlength: 15 }, editrules:{ custom:true, custom_func:function (value, colname) { var strEnglishOrNum = /^([0-9a-zA-Z.]+)?$/; if(!strEnglishOrNum.test(value)) return [false, colname+"应该为英文字母或者数字"]; else if (value=='') return [false,colname+" 不允许为空"]; else if(!value.endsWith(".css")) return [false,colname+" 必须以.css结尾"]; else return [true,""]; } } }, { label : '样式名称', name : 'templatename', editable: true, width : 80, formoptions:{ elmsuffix:'*' }, editoptions: { maxlength: 15 }, editrules:{required:true} }, { label : '说明 ', name : 'readme', editable: true, width : 180, edittype : "textarea", editoptions: { maxlength: 1000 } } , { label : '更新时间', name : 'updatetime', editable: false, width : 80 } ,{ label : '操作', name:'operMod', index:'operMod', align:"center", width:"80", formatter: function (cellvalue, options, rowdata) { var html = "<button class='btn btn-success radius size-S' onclick=editCss('"+rowdata.keyid+"','skin')>编辑</button>"; return html; } }], rownumbers : true,//添加左侧行号 viewrecords : true,//是否在浏览导航栏显示记录总数 rowNum : 10,//每页显示记录数 rowList : [10,15,20,30,40,50 ],//用于改变显示行数的下拉列表框的元素数组。 autowidth : true, height : 'auto', pager : "#jqGridPagerSkin" }); $('#jqGridSkin').navGrid('#jqGridPagerSkin', // the buttons to appear on the toolbar of the grid { edit : true, add : true, del : true, search : true, refresh : true, view : true, position : "left", cloneToTop : true }, // options for the Edit Dialog { recreateForm : true, checkOnUpdate : true, checkOnSubmit : true, closeAfterEdit : true, onInitializeForm:function(formid) { }, serializeEditData: function(postdata) { //myconsole.log(postdata); $.each(postdata,function (index, value) { //myconsole.log(index); if(index!="jqGrid_id" && index!="oper" && index!="keyid"){ modifyJosnKey(postdata,index,"skin."+index); } if(index=="keyid"){ postdata["skin."+index]=value } }) //myconsole.log(postdata); return postdata; }, afterSubmit: function (response, postdata) { // console.log(response); var res=eval('(' + response.responseText + ')'); //layer.msg(res.msg); return [res.state,res.msg,'']; }, errorTextFormat : function(data) { return 'Error: ' + data.responseText } }, // options for the Add Dialog { closeAfterAdd : true, recreateForm : true, beforeSubmit: function(postdata, formid){ $.each(postdata,function (index, value) { if(index!="jqGrid_id" && index!="oper"){ modifyJosnKey(postdata,index,"skin."+index); } }) return[true,'']; }, afterSubmit: function (response, postdata) { // console.log(response); var res=eval('(' + response.responseText + ')'); return [res.state,res.msg,'']; }, errorTextFormat : function(data) { return 'Error: ' + data.responseText } }, // options for the Delete Dailog { errorTextFormat : function(data) { return 'Error: ' + data.responseText } },{ // search options 这里支持多条件查询 multipleSearch: true, sopt:['eq','ne','cn','nc','lt','le','gt','ge'], afterSubmit: function(r, data) { var messageString = r.responseText; var mesObj = eval('(' + messageString + ')'); return [mesObj.state, mesObj.message]; } } ); }) function edit(tempID){ $.post("${ctx}/myconsole/template/edit",{"tempID":tempID},function(data){ var index=layer.open({ type: 1, title: '编辑模板', btn: ['保存','取消'], yes:function(index, layero){ $.post("${ctx}/myconsole/template/save",{"tempID":tempID,"tempContent":editor.getValue()},function(data){ layer.close(index); layer.msg(data); }) }, // skin: 'layui-layer-rim', //加上边框 area: ['90%', '90%'], //宽高 content: '<textarea id="code">'+data+'</textarea>', success:function(layero, index){ window.editor = CodeMirror.fromTextArea(document.getElementById('code'), { mode: "text/html", styleActiveLine: true, //line选择是是否加亮 lineNumbers: true, //是否显示行数 lineWrapping: true //是否自动换行 }); $(".CodeMirror-gutter-wrapper").css("left","-35px"); } }); }) } function editCss(skinID,type){ $.post("${ctx}/myconsole/skin/edit",{"skinID":skinID,"type":type},function(data){ var index=layer.open({ type: 1, title: '编辑模板', btn: ['保存','取消'], yes:function(index, layero){ $.post("${ctx}/myconsole/skin/save",{"skinID":skinID,"type":type,"tempContent":editor.getValue()},function(data){ layer.close(index); layer.msg(data); }) }, // skin: 'layui-layer-rim', //加上边框 area: ['90%', '90%'], //宽高 content: '<textarea id="code">'+data+'</textarea>', success:function(layero, index){ window.editor = CodeMirror.fromTextArea(document.getElementById('code'), { mode: "text/html", styleActiveLine: true, //line选择是是否加亮 lineNumbers: true, //是否显示行数 lineWrapping: true //是否自动换行 }); $(".CodeMirror-gutter-wrapper").css("left","-35px"); } }); }) } function dynamic(tempID){ $.post("${ctx}/myconsole/template/query",{"tempID":tempID},function(data){ if(data=="NO"){ alert("请设置模板类型"); }else{ window.open("${ctx}/myconsole/dynamic?tempID="+tempID); } }) } function design(tmpFile){ window.open("${ctx}/myconsole/design?tmpFile="+tmpFile); } </script> <title>我的桌面</title> </head> <body> <div class="page-container"> <table id="jqGridGroup"></table> <div id="jqGridPagerGroup"></div> <div> </div> <table id="jqGrid"></table> <div id="jqGridPager"></div> <div> </div> <table id="jqGridCss"></table> <div id="jqGridPagerCss"></div> <div> </div> <table id="jqGridSkin"></table> <div id="jqGridPagerSkin"></div> </div> <footer class="footer mt-20"> <div class="container"> <p></p> </div> </footer> </body> </html>