返回首页 - Notes - 2015

在 Symfony2 中使用 DWZ 前端框架


问题描述

如果直接将 DWZ 嵌入 Symfony2 模版,你会发现切换主题不可用,这是因为 Symfony2 的资源文件尾部带有版本标识导致的


解决办法

打开 dwz.min.js,找到 setTheme 这个函数的定义处,里面会有下面这么一行:

$("head").find("link[href$='style.css']").attr("href", _themeHref.replace("#theme#", themeName));

这一行是寻找头部 CSS 文件中,以 style.css 结尾的资源,然后将其资源地址进行变更

但是如果 Symfony2 开启了资源版本号功能,则 style.css 实际是长这样的:style.css?0.2.1

这就导致了这行 JS 找不到标签,完成不了替换

so,我们修改这一行为下面这样:

$("#dwz_theme").attr("href", _themeHref.replace("#theme#", themeName));

然后找到模版文件的头部,将引入主题 CSS 资源的那一行加一个 id="dwz_theme" 的属性


Symfony2集成DWZ完整的头部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>管理后台</title>
        <link rel="shortcut icon" href="{{ asset('bundles/siteadmin/images/favicon.ico') }}" />
        <link id="dwz_theme" href="{{ asset('bundles/siteadmin/themes/default/style.css') }}" rel="stylesheet" type="text/css" media="screen"/>
        <link href="{{ asset('bundles/siteadmin/themes/css/core.css') }}" rel="stylesheet" type="text/css" media="screen"/>
        <link href="{{ asset('bundles/siteadmin/themes/css/print.css') }}" rel="stylesheet" type="text/css" media="print"/>
        <link href="{{ asset('bundles/siteadmin/uploadify/css/uploadify.css') }}" rel="stylesheet" type="text/css" media="screen"/>

        <!--[if IE]>
        <link href="{{ asset('bundles/siteadmin/themes/css/ieHack.css') }}" rel="stylesheet" type="text/css" media="screen"/>
        <![endif]-->

        <!--[if lte IE 9]>
        <script src="{{ asset('bundles/siteadmin/js/speedup.js') }}" type="text/javascript"></script>
        <![endif]-->

        <script src="{{ asset('bundles/siteadmin/js/jquery-1.7.2.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('bundles/siteadmin/js/jquery.cookie.js') }}" type="text/javascript"></script>
        <script src="{{ asset('bundles/siteadmin/js/jquery.validate.js') }}" type="text/javascript"></script>
        <script src="{{ asset('bundles/siteadmin/js/jquery.bgiframe.js') }}" type="text/javascript"></script>
        <script src="{{ asset('bundles/siteadmin/xheditor/xheditor-1.2.1.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('bundles/siteadmin/xheditor/xheditor_lang/zh-cn.js') }}" type="text/javascript"></script>
        <script src="{{ asset('bundles/siteadmin/uploadify/scripts/jquery.uploadify.js') }}" type="text/javascript"></script>

        <script src="{{ asset('bundles/siteadmin/js/dwz.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('bundles/siteadmin/js/dwz.regional.zh.js') }}" type="text/javascript"></script>

        <script src="{{ asset('bundles/siteadmin/highcharts/highcharts.js') }}" type="text/javascript"></script>

        <script type="text/javascript">
            $(function(){
                DWZ.init("{{ asset('bundles/siteadmin/dwz.frag.xml') }}", {
                    statusCode: { ok:200, error:300, timeout:301 },
                    pageInfo: { pageNum:'pageNum', numPerPage:'numPerPage', orderField:'orderField', orderDirection:'orderDirection' },
                    keys: { statusCode:'statusCode', message:'message' },
                    ui: { hideMode:'offsets' },
                    debug: false,
                    callback: function () {
                        initEnv();
                        $('#themeList').theme({themeBase:'/bundles/siteadmin/themes'});
                    }
                });
            });
        </script>
    </head>

date:2015-06-25