小说管理分析
1.点击小说管理会根据headId跳转页面tspace/listPage.html获取查询到的数据进行展示
前台默认加载方法：
<#include "/common/head.html"/> ----引入头
默认加载调用方法 com.busi.controller.ClawBookUrlController#listData
默认加载时有个hea.html的头部，里面有common.js为共用。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>tspace</title> <link rel="icon" type="image/x-icon" href="${basePath}/res/images/tspace/favicon.ico"> <link rel="stylesheet" type="text/css" href="${basePath}/res/js/jquery-easyui/themes/gray/easyui.css"> <link rel="stylesheet" type="text/css" href="${basePath}/res/js/jquery-easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="${basePath}/res/js/jquery-easyui/themes/color.css"> <link rel="stylesheet" type="text/css" href="${basePath}/res/css/common.css"> <link rel="stylesheet" type="text/css" href="${basePath}/res/css/icon.css"> <link rel="stylesheet" type="text/css" href="${basePath}/res/css/default.css"> <script type="text/javascript"> var basePath ='${basePath}'; var noAuthBtn = '${noAuthBtn!}'; var authField = '${authField!}'; console.log("common.js当前路径basePath:"+basePath); console.log("common.js当前路径basePath:"+basePath); console.log("common.js当前路径basePath:"+basePath); </script> <script type="text/javascript" src="${basePath}/res/js/jquery-easyui/jquery.min.js"></script> <script type="text/javascript" src="${basePath}/res/js/jquery-easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="${basePath}/res/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="${basePath}/res/js/common.js"></script> </head> <body style="visibility: hidden;">
common.js
var subPage = {}; //用于弹窗，如增删改查页面 var popup = {}; //用于弹层 $(function() { //去掉加载页面时，遮挡的div $("body").css("visibility", "visible"); //回车刷新 if(!/login$/.test(location.href) && !/main/.test(location.href) && window.datagrid && $(".pagination-num:focus").length == 0) { document.onkeydown = function() { if(event.keyCode==13) { if(window.tspaceSearch) { tspaceSearch(); } return true; } } } //列表页面，如果没有搜索条件，则隐藏搜索按钮 if($("#tb .wrap_search .search_item").size() == 0) { $("#tb #searchBtnWrap").hide(); } }); function log(obj) { if(console) { console.log(obj); } } /** * 显示消息 */ function showMsg(msg) { top.window.$.messager.show({ title: '消息', msg:'<div style="padding-top: 10px;">' + msg||"消息内容！" + '</div>', timeout: 3000, showType: 'slide' }); } /** * 显示警告消息 */ function showWarnMsg(msg) { top.window.$.messager.show({ title: '错误消息', msg: '<div class="messager-icon messager-warning"></div><div style="padding-top: 10px;">' + (msg || "消息内容！") + "</div>", timeout: 3000, showType: 'slide' }); } /** * 确认消息 */ function confirmMsg(msg, successFunc){ top.window.$.messager.confirm('请确认', '<div style="padding-top: 10px;">' + (msg || 'Are you confirm this?') + "</div>", function(r){ if(r) { if($.isFunction(successFunc)) { successFunc(); } } }); } /** * 打开弹出窗 * @param title 标题 * @param url iframe地址 * @param options 可选参数 */ function openWindow(title, url, options) { options = options || {}; if(options.size && options.size.indexOf("x") >= 0) { options.width = options.size.split("x")[0]; options.height = options.size.split("x")[1]; } $("#dialogWindow iframe").attr("src", url); $("#dialogWindow").window({ closed:false, modal:true, title: title || '增加', width: options.width || 700, height: options.height || 450, onClose: function() { $("#dialogWindow iframe").removeAttr("src"); //关闭popup try { $("#popupWindow").window("close"); } catch(err) { //没有弹层 } } }); $("#dialogWindow").window("center"); } /** * 打开一个弹层，用于选择一些信息（如城市等） * @param ipt 需要弹层的input或其它元素 * @param title 弹层标题 * @param url 页面ulr * @param options 其它参数（参考easyui-window） */ function openPopup(ipt, title, url, options) { ipt = $(ipt); popup.ipt = ipt; var os1 = $("#dialogWindow").offset(); var os2 = ipt.offset(); if(!url || popup.currUrl != url) { $("#popupWindow iframe").attr("src", url); } if(!options) { options = {}; } options.title = title || "popup"; options.top = os1.top + os2.top + ipt.outerHeight(); options.left = os1.left + os2.left; options.onClose = function() { //回调关闭事件 if(top.window.popup.close) { top.window.popup.close(); } } //回调显示事件 if(top.window.popup.show) { top.window.popup.show(); } $("#popupWindow").window(options); popup.currUrl = url; } /** * 关闭弹层 **/ function closePopup() { $("#popupWindow").window("close"); } /** * 关闭弹出窗口 */ function closeWindow() { $("#dialogWindow").window("close"); } /** * 刷新页面 */ function flushPage() { location.replace(location); } /** * 根据对象属性从集合中获得对象 * @param list * @param attrName * @param attrValue * @returns 匹配到的第一个对象 */ function getObjFromList(list, attrName, attrValue) { if($.isArray(list)) { for (var i = 0; i < list.length; i++) { var item = list[i]; if(item[attrName] == attrValue) { return item; } } } return null; } function getInputValue(inputName) { var inputObj = $(":input[name='" + inputName + "']"); var result = ""; if(inputObj.attr("type") == "file") { result = $("#" + inputName).attr("data"); //如果文件，从文件的显示框架读取 }else { inputObj.each(function(i, item) { result += "," + $(item).val(); }); } return result.replace(",", ""); } /** * 如：当前页面为stockHistoryLog/listPage，则getCurrUrl(addPage)返回stockHistoryLog/addPage */ function getCurrUrl(method) { return window.location.pathname.replace(/\w+$/, method); } /** * 使combobox变为多选 * @param inputIds 单个id或者数组 */ function changeComboboxToMult(inputIds) { if(!$.isArray(inputIds)) { inputIds = [inputIds]; } $.each(inputIds, function(i, item) { var iptObj = $("#" + item); iptObj. combobox({multiple:true}); }); } //扩展easyui-datagrid的edit模式 $.extend($.fn.datagrid.defaults.editors, { //支持checkbox checkbox: { init: function(container, options){ var align = "center"; if(options && options.align) { align = options.align; } container.attr("align", align); var input = $('<input type="checkbox" class="datagrid-editable-checkbox">').appendTo(container); return input; }, destroy: function(target){ $(target).remove(); }, getValue: function(target){ return $(target).is(":checked") ? 1 : 0; }, setValue: function(target, value){ if(value == 1) { $(target).click(); } }, resize: function(target, width){ //$(target)._outerWidth(width); } } }); //全局ajax事件处理 $(window).ajaxError(function(handler){ showWarnMsg("操作失败，服务器出现错误！"); }); $(window).ajaxSuccess(function(evt, request, settings){ var s = request.responseText; if(s && s.indexOf('{"result":"fail"') != -1) { eval("result = " + s); showWarnMsg(result.msg); } }); //删除页面没有权限的按钮 $(function() { if(noAuthBtn) { $.each(noAuthBtn.split(","), function(i, item) { $("." + item).remove(); }); } }); /** * 处理页面没有【数据权限】的按钮 */ function handleAuthDataRule() { if(authField) { $.each(authField.split(","), function(i, item) { //$("#" + item + ",#_start_" + item + ",#_end_" + item).textbox({disabled:true}); $("#" + item + ",#_start_" + item + ",#_end_" + item).parents(".search_item:first").remove(); }); } } //extend the 'equals' rule $.extend($.fn.validatebox.defaults.rules, { equals: { validator: function(value,param){ return value == $(param[0]).val(); }, message: '两次输入不一致.' } }); /** * 上传文件，用于easyui-filebox异步上传 * @param fileIptId 文件输入框id */ function uploadFile(fileIptId) { if(window.FormData) { var fileObj = $(":input[name='" + fileIptId + "']"); var files = fileObj.get(0).files; var imgObj = $("#" + fileIptId + "Img"); $("#" + fileIptId).attr("data", ""); if(files.length > 0) { if(files[0].size / 1024 / 1025 > 5) { showWarnMsg("上传图片不能大于5M"); return; } var formData = new FormData(); // 建立一个upload表单项，值为上传的文件 formData.append('upload', fileObj.get(0).files[0]); var xhr = new XMLHttpRequest(); xhr.open('POST', basePath + "/common/uploadFile"); // 定义上传完成后的回调函数 xhr.onload = function () { if (xhr.status === 200) { $("#" + fileIptId).attr("data", xhr.response); //显示图片 imgObj.attr("src", basePath + xhr.response).parent().show(); } else { showWarnMsg("上传图片失败") } } xhr.send(formData); }else { //隐藏图片 imgObj.attr("src", "").parent().hide(); } }else { alert("该浏览器不支持文件上传，请用chrome或firefox浏览器~"); } } /** * 格式化图片（用于datagrid） * @param url */ function formatterDgImage(url) { return url ? "<img class='dg_img' src='" + basePath + url + "' />" : ""; }
引入的界面：
<#include "/common/dialogWindow.html"/>
<div id="dialogWindow" data-options="border:'thin',collapsible:false,minimizable: false,shadow:false"> <div class="easyui-layout" data-options="fit:true,border:false"> <div data-options="region:'center',border:false" style="padding:0px;"> <iframe src="" class="easyui-panel" data-options="fit:true,border:false" frameborder="0"></iframe> </div> <div data-options="region:'south',border:false" style="text-align:right;padding:12px 12px;border-top:0px solid #ddd;"> <a class="easyui-linkbutton color1" href="javascript:void(0)" onclick="javascript:subPage.save();" style="width:80px">保存</a> <a class="easyui-linkbutton color2" href="javascript:void(0)" onclick="javascript:closeWindow()" style="width:80px">取消</a> </div> </div> </div> <div id="popupWindow" data-options="width:500,height:300,border:'thin',cls:'c9',collapsible:false,shadow:false,minimizable: false,maximizable: false" style="display: none;"> <iframe src="" class="easyui-panel" data-options="fit:true, border:false" frameborder="0"></iframe> </div>
<#include "/common/foot.html"/>
<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?96bb51056dd3bece3de02a351f072069"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>
com.tspace.controller.TspaceController#listData
//列表数据 public void listData() { //获取headId int headId = getHeadId(); //JFinal的一个增强的方法Duang.duang TspaceService tspaceService = Duang.duang(TspaceService.class); //获取数据 TspaceMeta metaData = DbMetaTool.getMetaData(headId); //获取head信息 TspaceHead head = metaData.getHead(); //定义queryParams properties symbols values Object[] queryParams = getQueryParams(); String[] properties = (String[]) queryParams[0];//table_name String[] symbols = (String[]) queryParams[1];//id_field Object[] values = (Object[]) queryParams[2];//db_source //定义orderBy String orderBy = getOrderBy(); if(StringUtil.isEmpty(orderBy)) { orderBy = head.getIdField() + " desc"; } //返回数据给前台 renderDatagrid( TspaceTool.replaceDict(metaData, DBTool.findByMultPropertiesDbSource(head.getDbSource(), head.getTableName(), properties, symbols, values, orderBy, getPager())), DBTool.countByMultPropertiesDbSource(head.getDbSource(), head.getTableName(), properties, symbols, values), tspaceService.getFooter(metaData, properties, symbols, values)); }在线表单设置按钮。