此文章是基於 EasyUI+Knockout實現經典表單的查看、編輯
一. 相關文件介紹
1. home.jsp：系統主界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>企業信息管理系統</title> <%@ include file="/common/basePath.jsp"%> <!--加載960CSS框架--> <link href="content/css/960/fluid/grid.css" rel="stylesheet" type="text/css" /> <!--加載主題CSS--> <link href="content/css/style.css" rel="stylesheet" type="text/css" /> <link href="content/js/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <!--加載組件CSS--> <link href="content/js/jquery-plugin/ztree/css/zTreeStyle.css" rel="stylesheet" type="text/css" /> <link href="content/js/jquery-plugin/jnotify/jquery.jnotify.css" rel="stylesheet" type="text/css" /> <link href="content/js/jquery-plugin/jqgrid/default/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" /> <!--加載樣式修正CSS--> <link href="content/css/hack/fix.css" rel="stylesheet" type="text/css" /> <!--加載圖標庫CSS--> <link href="content/images/icon/icon.css" rel="stylesheet" type="text/css" /> <!--本頁面樣式--> <link href="content/css/page/home.css" rel="stylesheet" type="text/css" /> </head> <body class="easyui-layout" fit="true" scroll="no"> <noscript> <div class="noscript"> <img src="content/images/noscript.gif" alt="抱歉，請開啟腳本支持！" /> </div> </noscript> <div region="north" class="head-north" split="true" border="false" > <div class="head head-right" > <div style="padding-top:20px;"> <a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#mm_user',iconCls:'icon-user'">當前用戶:admin</a> <div id="mm_user" style="width:150px;"> <div data-options="iconCls:'icon-edit'" class="changepwd">修改密碼</div> <div class="menu-sep"></div> <div data-options="iconCls:'icon-user_go'" class="loginOut">安全退出</div> </div> </div> </div> <span class="head-left"> 企業信息管理系統 </span> </div> <div region="west" split="true" title="導航菜單" style="width:180px;" id="west"> <div id="wnav"></div> </div> <div region="south" split="true" class="head-south"> <div class="footer">Copyright © 2016 ims, All Rights Reserved</div> </div> <div region="center" id="mainPanle" style="background: #eee; overflow-y:hidden"> <div id="tabs" class="easyui-tabs" fit="true" border="false" > <div title="我的桌面" style="overflow:hidden;" id="home"></div> </div> </div> <div id="w"></div> <div id="notity"></div> <div id="closeMenu" class="easyui-menu hide" style="width:150px;"> <div id="refresh">刷新</div> <div class="menu-sep"></div> <div id="close">關閉</div> <div id="closeall">全部關閉</div> <div id="closeother">除此之外全部關閉</div> <div class="menu-sep"></div> <div id="closeright">關閉右側標簽</div> <div id="closeleft">關閉左側標簽</div> <div class="menu-sep"></div> <div id="exit">退出</div> </div> <script type="text/html" id="password-template"> <div class="container_12" style="width:90%;margin:5%;"> <div class="grid_3 lbl">登陸名：</div> <div class="grid_9 val"><input type="text" class="txtBox readonly " name="userCode" value="admin" disabled="disabled"/></div> <div class="grid_3 lbl">原密碼：</div> <div class="grid_9 val"><input type="password" class="txtBox" /></div> <div class="grid_3 lbl">新密碼：</div> <div class="grid_9 val"><input type="password" class="txtBox" /></div> <div class="grid_3 lbl">確 認：</div> <div class="grid_9 val"><input type="password" class="txtBox" /></div> <div class="clear"></div> </div> <div style="text-align:center;" class="z-toolbar-dialog"> <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" id="pwd_confirm" >確定</a> <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" id="pwd_close">取消</a> </div> </script> <script type="text/javascript" src="content/js/jquery/jquery-1.8.1.min.js"></script> <script type="text/javascript" src="content/js/core/utils.js"></script> <script type="text/javascript" src="content/js/core/common.js"></script> <script type="text/javascript" src="content/js/core/jquery.easyui.fix.js"></script> <script type="text/javascript" src="content/js/jquery-plugin/jnotify/jquery.jnotify.js"></script> <script type="text/javascript" src="content/js/jquery-plugin/ztree/jquery.ztree.all-3.2.min.js"></script> <script type="text/javascript" src="content/js/jquery-easyui-1.3.2/jquery.easyui.min.js"></script> <script type="text/javascript" src="content/js/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="viewModel/home.js"></script> </body> </html>
2. home.js：綁定主界面的功能按鈕
var wrapper = {}; //設置 wrapper.settings = { homeTabTitle: '我的桌面', homeTabUrl: 'http://www.baidu.com', maxTabCount: 10 }; //初始化 wrapper.init = function () { com.ajax({ type: 'POST', url: rootPath+'/sys/menu!getUserMenu.do', success: wrapper.initMenu }); $('.loginOut').click(wrapper.logout); $('.changepwd').click(wrapper.changePassword); $('#notity').jnotifyInizialize({ oneAtTime: true, appendType: 'append' }).css({ 'position': 'absolute', '*top': '2px', 'left': '50%', 'margin': '20px 0px 0px -120px', '*margin': '0px 0px 0px -120px', 'width': '240px', 'z-index': '9999' }); $('#closeMenu').menu({ onClick: wrapper.rightMenuClick }); $('#tabs').tabs({ tools: [{ iconCls: 'icon-arrow_refresh', handler: wrapper.tabRefresh }, { iconCls: 'icon-screen_full', handler: wrapper.setFullScreen }, { iconCls: 'panel-tool-close', handler: wrapper.tabClose }], onContextMenu: wrapper.tabContextMenu, onClose: wrapper.setLocationHash, onSelect: wrapper.setLocationHash }); }; wrapper.initMenu = function (d) { if (!d || !d.length) { $.messager.alert("系統提示", "<font color=red><b>您沒有任何權限！請聯系管理員。</b></font>", "warning", function () { location.href = '/login'; }); return; } $('body').data('menulist', d); var visibleMenu = $.grep(d, function (row) {return row.isVisible;}); $.each(visibleMenu, function () { var urlStart = this.menuUrl.substring(0,7); if(urlStart!="#" && urlStart!="http://"){ this.menuUrl = rootPath+this.menuUrl; } }) var menus = utils.toTreeData(visibleMenu, 'id', 'parentId', 'children'); switch (wrapper.settings.navigation) { case "tree": wrapper.menuTree(menus); break; case "accordion": wrapper.menuAccordion(menus); break; default: wrapper.menuAccordion(menus); break; } wrapper.initLocationHash(d); $("#home").html(wrapper.createFrame(wrapper.settings.homeTabUrl)); }; //菜單生成 wrapper.menuAccordion = function (menus) { var $obj = $('#wnav'); $obj.accordion({ animate: false, fit: true, border: false }); $.each(menus, function () { var html = '<ul>'; var temple = '<li><div><a ref="{0}" href="javascript:void(0)" rel="{1}"><span class="icon {2}"> </span><span class="nav">{3}</span></a></div></li>'; $.each(this.children || [], function () { html += utils.formatString(temple, this.menuCode, this.menuUrl, this.iconClass, this.menuName); }); html += '</ul>'; $obj.accordion('add', { title: this.menuName, content: html, iconCls: 'icon ' + this.iconClass, border: false }); }); var panels = $obj.accordion('panels'); $obj.accordion('select', panels[0].panel('options').title); $obj.find('li').click(function () { $obj.find('li div').removeClass("selected"); $(this).children('div').addClass("selected"); var link = $(this).find('a'); var title = link.children('.nav').text(); var url = link.attr("rel"); var code = link.attr("ref"); var icon = link.children('.icon').attr('class'); wrapper.addTab(title, url, icon); }).hover(function () { $(this).children('div').addClass("hover"); }, function () { $(this).children('div').removeClass("hover"); }); }; wrapper.initLocationHash = function (data) { var subUrl = location.hash.replace('#!', ''); $.each(data, function () { var s = this.url; if (this.url && this.url != '#' && (subUrl == s || subUrl.indexOf(s + "/") > -1)) wrapper.addTab(this.menuName, subUrl, this.iconClass); }); }; wrapper.setLocationHash = function(){ try { var $obj = $('#tabs'); var src = '', tabs = $obj.data().tabs.tabs; var tab = $obj.tabs('getSelected'); var fnSrc = function (tab) { var iframe = tab.find('iframe'); return iframe.length ? iframe[0].src.replace(location.host, '').replace('http://', '') : ''; }; if (tab) { src = fnSrc(tab); if (src) window.location.hash = '!' + src; //如果src沒有，就不設置，case在f5刷新時出現 if (src == homeUrl) window.location.hash = ''; } else { src = fnSrc(tabs[tabs.length - 1]); //關閉tabs時，當前tab為空 window.location.hash = '!' + src; } } catch (e) { } } wrapper.addTab = function (subtitle, url, icon) { if (!url|| url == '#') return false; var $tab = $('#tabs'); var tabCount = $tab.tabs('tabs').length; var hasTab = $tab.tabs('exists', subtitle); if ((tabCount <= wrapper.settings.maxTabCount) || hasTab) wrapper.openTabHandler($tab, hasTab, subtitle, url, icon); else $.messager.confirm("系統提示", '<b>您當前打開了太多的頁面，如果繼續打開，會造成程序運行緩慢，無法流暢操作！</b>', function (b) { if (b) wrapper.openTabHandler($tab, hasTab, subtitle, url, icon); }); }; wrapper.openTabHandler = function ($tab,hasTab, subtitle,url,icon) { if (!hasTab) { $tab.tabs('add', {title: subtitle,content: wrapper.createFrame(url),closable: true,icon: icon}); } else { $tab.tabs('select', subtitle); wrapper.tabRefresh(url); //選擇TAB時刷新頁面 } wrapper.setLocationHash(); }; wrapper.tabRefresh = function (url) { var $tab = $("#tabs"); var currentTab = $tab.tabs('getSelected'); var src = $(currentTab.panel('options').content).attr('src'); if (src == undefined){ var fnSrc = function (tab) { var iframe = tab.find('iframe'); return iframe.length ? iframe[0].src : ''; }; src = fnSrc(currentTab); } if (typeof url === 'string') src = url; $tab.tabs('update', { tab: currentTab, options: { content: wrapper.createFrame(src) } }) }; wrapper.createFrame = function (url) { return '<iframe scrolling="auto" frameborder="0" style="width:100%;height:100%;" src="' + url + '" ></iframe>'; } //事件 wrapper.tabContextMenu = function (e, title) { $('#closeMenu').menu('show', {left: e.pageX,top: e.pageY}); $('#tabs').tabs('select', title); e.preventDefault(); }; wrapper.changePassword = function () { com.dialog({ title: " 修改密碼", iconCls: 'icon-key', width: 320, height: 195, html: "#password-template", viewModel: function (w) { w.find("#pwd_confirm").click(function () { w.dialog('close'); }); w.find("#pwd_close").click(function () { w.dialog('close'); }); } }); }; wrapper.logout = function () { $.messager.confirm('系統提示', '您確定要退出本次登錄嗎?', function (r) { if (r) location.href = 'javascript:void(0)'; }); }; wrapper.setFullScreen = function () { var that = $(this); if (that.find('.icon-screen_full').length) { that.find('.icon-screen_full').removeClass('icon-screen_full').addClass('icon-screen_actual'); $('[region=north],[region=west]').panel('close') var panels = $('body').data().layout.panels; panels.north.length = 0; panels.west.length = 0; if (panels.expandWest) { panels.expandWest.length = 0; $(panels.expandWest[0]).panel('close'); } $('body').layout('resize'); } else if ($(this).find('.icon-screen_actual').length) { that.find('.icon-screen_actual').removeClass('icon-screen_actual').addClass('icon-screen_full'); $('[region=north],[region=west]').panel('open'); var panels = $('body').data().layout.panels; panels.north.length = 1; panels.west.length = 1; if ($(panels.west[0]).panel('options').collapsed) { panels.expandWest.length = 1; $(panels.expandWest[0]).panel('open'); } $('body').layout('resize'); } }; wrapper.tabClose = function () { if (confirm('確認要關閉所有窗口嗎？')) wrapper.rightMenuClick({ id: 'closeall' }); }; wrapper.rightMenuClick = function (item) { var $tab = $('#tabs'); var currentTab = $tab.tabs('getSelected'); var titles = wrapper.getTabTitles($tab); switch (item.id) { case "refresh": var src = $(currentTab.panel('options').content).attr('src'); if (src == undefined){ var fnSrc = function (tab) { var iframe = tab.find('iframe'); return iframe.length ? iframe[0].src : ''; }; src = fnSrc(currentTab); } $tab.tabs('update', { tab: currentTab, options: { content: wrapper.createFrame(src) } }); break; case "close": var currtab_title = currentTab.panel('options').title; $tab.tabs('close', currtab_title); break; case "closeall": $.each(titles, function () { if (this != wrapper.settings.homeTabTitle) $tab.tabs('close', this); }); break; case "closeother": var currtab_title = currentTab.panel('options').title; $.each(titles, function () { if (this != currtab_title && this != wrapper.settings.homeTabTitle) $tab.tabs('close', this); }); break; case "closeright": var tabIndex = $tab.tabs('getTabIndex', currentTab); if (tabIndex == titles.length - 1) { alert('親，后邊沒有啦 ^@^!!'); return false; } $.each(titles, function (i) { if (i > tabIndex && this != wrapper.settings.homeTabTitle) $tab.tabs('close', this); }); break; case "closeleft": var tabIndex = $tab.tabs('getTabIndex', currentTab); if (tabIndex == 1) { alert('親，前邊那個上頭有人，咱惹不起哦。 ^@^!!'); return false; } $.each(titles, function (i) { if (i < tabIndex && this != wrapper.settings.homeTabTitle) $tab.tabs('close', this); }); break; case "exit": $('#closeMenu').menu('hide'); break; } }; wrapper.getTabTitles = function ($tab) { var titles = []; var tabs = $tab.tabs('tabs'); $.each(tabs, function () { titles.push($(this).panel('options').title); }); return titles; }; wrapper.menuTree = function (menus) { var settings = { data: { key: { name: "menuName"} },callback: { onClick:wrapper.treeOnClick }}; var $obj = $('#wnav').addClass("ztree"); if (menus.length > 0) menus[0].open = true; $.fn.zTree.init($obj, settings, menus); }; wrapper.treeOnClick = function(event, treeId, node){ wrapper.addTab(node.menuName, node.menuUrl, node.iconClass); }; $(wrapper.init);
二. 效果圖
1. 訪問：http://localhost:8080/ims/home.do，系統主界面
