EasyUI 開發筆記(一)

時間 2019-11-10

標籤 easyui 開發筆記简体版

原文原文鏈接

因爲某些緣由，在公司作的後臺須要改爲相似於Ext.js 形式的後臺，主要看好其中的框架佈局，以及tab開頁面和彈出式內部窗體。javascript

後來看看，改爲EasyUI，較Ext.js 庫小不少，也便於公司的初級程序員能儘快上手，只須要jquery與js的部分開發知識便可。css

目前，這塊的後臺已經開發進行一段時間了，現整理下，作個開發筆記。html

筆記就分3部分，若是看懂的話，作通常的XX管理系統，都無問題了。java

1. 頁面總體框架搭建。jquery

2. 某一個功能頁面的增刪改查。程序員

3. 一些遇到的問題解決辦法。json

界面截圖: 安全

很少說了，直接上代碼：框架

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>統一管理後臺 v2.0</title> 
    <link rel="stylesheet" type="text/css" href="/css/easyui_themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/css/easyui_themes/icon.css">
    <link href="/css/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="/js/jquery.easyui.min.js"></script> 
    <script type="text/javascript" src="/js/common.js"></script>  
    <script src="/js/My97DatePicker/WdatePicker.js" type="text/javascript"> </script>
    <link href="/js/easyrt/easyrt.css" rel="stylesheet" />
    <script src="/js/easyrt/easyui.js"></script>
    <script src="/js/easyrt/easyrt.js"></script>
    

</head>
<body id="bd" class="easyui-layout">
    <form id="form1" runat="server">
        <!-- 頭部標題面板 -->
        <div data-options="region:'north',split:true" title="統一管理後臺v2.0.0 beta version" style="height: 90px; overflow: hidden; padding: 0px;">
            <span style="float: right; padding-right: 20px;" class="head">歡迎  XXX<a href="javascript:void(0);" id="editpass" onclick="AddTab('/admin/system/UpdatePwd.aspx','icon-z_eva','修改密碼')">修改密碼</a> <a href="javascript:void(0);" id="loginOut">安全退出</a></span>
            <p></p>
        </div>
         <!-- 底部收起的面板 -->
        <div data-options="region:'south',split:true" title="South Title" style="height: 90px; padding: 0px; background: #efefef;">
            <div class="easyui-layout" data-options="fit:true" style="background: #ccc;">
                <div data-options="region:'center'"></div>
                <div data-options="region:'east',split:true" style="width: 200px;"></div>
            </div>
        </div> 
        <!-- 右側3秒收起面板 -->
        <div data-options="region:'east',iconCls:'icon-reload',split:true,title:'提醒內容'" style="width: 180px;">
                <div id="divMainLeft"></div> 
        </div> 
        <!-- 左側導航菜單 -->
        <div data-options="region:'west',split:true" title="導航菜單" style="width: 200px; padding: 1px; overflow: hidden;">
            <div class="easyui-accordion" data-options="fit:true,border:false">
               <!-- 主分類 -->
              <%=MenuStr %>
            </div>
        </div>
        <!-- 居中tab頁面 -->
        <div id="divCenter" data-options="region:'center'" style="overflow: hidden;">
            <div id="tabList" class="easyui-tabs" data-options="fit:true,border:false,tools:'#tab-tools'">
                <div title="首頁" style="padding: 20px; overflow: hidden;" data-options="closable:true" >
                    <div style="margin-top: 20px;">
                        <h3>tab首頁</h3>
                        <ul>
                             
                        </ul>
                    </div>
                </div> 
            </div>
        </div> 
         <div id="tab-tools">
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'"
                onclick="TabReload()"></a>
        </div>
    </form>
    
</body>
<script src="js/easyrt/urchin.js"></script>
<script>
    $(function () {
        // 底部收起 暫不用
        setTimeout(function () {
            $('body').layout('collapse', 'south');
        }, 0);

        // 右側收起
        setTimeout(function () {
            $('body').layout('collapse', 'east');
            // 右側標題文字 
            $($(".layout-expand > .panel-body")[1])
                .html("<span id='leftTipTitle' style='display:block;width:16px;padding-left:7px;'></span>");
        }, 2 * 1000);

        // 退出
        $('#loginOut').click(function () {
            $.messager.confirm('系統提示', '您肯定要退出本次登陸嗎?', function (r) {
                if (r) {
                    location.href = '/Login.aspx';
                }
            });
        });
 
    });

    //$('body').layout('expand','east'); 展開右側
</script>

前臺UI框架代碼

這塊就是左側導航，最簡單的方法就是，直接用後臺代碼輸出到這裏。<%= %>展現便可。固然也能夠看easyui幫助文檔，json數據綁定。ide

 protected string CreateMenu(string roleId)
    {
        UserMenuMgr bll = new UserMenuMgr();
        List<UserMenu> allList = bll.GetRoleMenuList(roleId);//先獲取該角色擁有的全部菜單
        StringBuilder sb = new StringBuilder();
        if (allList != null)
        {
            List<UserMenu> _sysMenu = allList.FindAll(m => m.ParentId == 0 && m.IsNavigation == 1);//得到全部一級菜單  
             

            // 主要功能樹
            sb.Append("<div title=\"主要功能\"  data-options=\"\"  style=\"overflow: auto; padding: 10px\"> <ul class=\"easyui-tree\">");
            foreach (var entity in _mainMenu)
            {
                ForBody(sb, entity, allList);
            }
            sb.Append(" </ul></div>");   
        }
        MenuStr = sb.ToString();
        return sb.ToString();
    }

    private static void ForBody(StringBuilder sb, UserMenu entity, List<UserMenu> allList)
    {
        if (!string.IsNullOrWhiteSpace(entity.EasyUIIcon))  //有圖標
        {
            sb.Append("<li data-options=\"state:'closed', iconCls:'" + entity.EasyUIIcon + "'\"> ");
        }
        else
        {
            sb.Append("<li data-options=\"state:'closed'\"> ");
        }
        sb.Append(string.Format("<span>{0}</span>", entity.MenuName));
        sb.Append("<ul>");
        List<UserMenu> childList = allList.FindAll(
            m => m.ParentId == entity.MenuId && m.IsNavigation == 1); //得到某個一級菜單下的全部二級菜單
        foreach (var subEntity in childList)
        {
            if (!string.IsNullOrWhiteSpace(subEntity.EasyUIIcon))  //有圖標
            {
                sb.Append("<li data-options=\"iconCls:'" + subEntity.EasyUIIcon + "'\"> ");
            }
            else
            {
                sb.Append("<li data-options=\"\"> ");
            } 
            sb.Append(
                string.Format(
                    "<span><a style='text-decoration: none;color:#000' href=\"javascript:void(0);\" onclick=\"AddTab('{0}', '{2}', '{1}')\">{1}</a></span>",
                //iconCls:'icon-v_SysModule'
                    subEntity.MenuAddress, subEntity.MenuName, subEntity.EasyUIIcon));
            sb.Append("</li>");
        }
        sb.Append("</li></ul>");
    }

後臺輸出左側導航菜單

通用js

function AddTab(url, icon, title) {
    if ($('#tabList').tabs('exists', title)) {
        $('#tabList').tabs('select', title);
        TabReload();
    } else {
        $('#tabList').tabs('add', {
            title: title,
            href: url,
            iconCls: icon,
            closable: true
        });
    }
}
 
function TabReload() {
    $('#tabList').tabs('getSelected').panel('refresh');
}

function ExitTab(title) {
    $('#tabList').tabs('close', title);
}

function getUrlParam(div, paras) { 
    var url = $('#' + div).panel("options").href;
    var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
    var paraObj = {}
    for (i = 0; j = paraString[i]; i++) {
        paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
    }
    var returnValue = paraObj[paras.toLowerCase()];
    if (typeof (returnValue) == "undefined") {
        return "";
    } else {
        return returnValue;
    }
}

function showException(msg) {
    $.messager.show({
        title: '消息提示',
        msg: msg,
        showType: 'slide',
        timeout: 1000,
        style: {
            //right: '',
            //top: document.body.scrollTop + document.documentElement.scrollTop,
            //bottom: '' 
            right: '',
            bottom: ''
        }
    });
}