VS-DMZ框架--关于dwz.min.js替代的问题

前言：

  刚接触.net和后台程序的编写，也是初次使用DMZ框架，出现了不少问题，记录之

项目引用DMZ步骤：

1.下载DMZ框架源码：https://github.com/dwzteam/dwz_jui

2解压之后，将文件夹重命名放入你的项目中，位置自己定义。我是放到了Content文件夹中

  

3.找到index.html文件，将里面的内容复制粘贴到你自己的Index.cshtml中，

4.改文件的引用路径：

         （1）注意改变一个js的引用路径，拿我自己的举例，我的就是~Content/dwz/js/XX;

         （2）有的是引用的是文件，就是/Content/dwz/xx/xx;

       

遇到的问题：

问题一：

    窗体显示不正常，布局乱了，按钮点击无响应：

我发现的解决方法是，加上layout = null的属性：

@{
    ViewBag.Title = "Test";
    Layout = null;<!--这个要加上-->
}

问题二：

    需要引入好多js文件，大概有30多个，先看下体会一下~真的太长了：

    <script src="~/Content/dwz/js/jquery-2.1.4.min.js" type="text/javascript"></script><!--<![endif]-->

    <script src="~/Content/dwz/js/jquery.cookie.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/jquery.validate.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/jquery.bgiframe.js" type="text/javascript"></script>
    <script src="~/Content/dwz/xheditor/xheditor-1.2.2.min.js" type="text/javascript"></script>
    <script src="~/Content/dwz/xheditor/xheditor_lang/zh-cn.js" type="text/javascript"></script>
    <script src="~/Content/dwz/uploadify/scripts/jquery.uploadify.js" type="text/javascript"></script>

    <!-- svg图表  supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ -->
    <script type="text/javascript" src="~/Content/dwz/chart/raphael.js"></script>
    <script type="text/javascript" src="~/Content/dwz/chart/g.raphael.js"></script>
    <script type="text/javascript" src="~/Content/dwz/chart/g.bar.js"></script>
    <script type="text/javascript" src="~/Content/dwz/chart/g.line.js"></script>
    <script type="text/javascript" src="~/Content/dwz/chart/g.pie.js"></script>
    <script type="text/javascript" src="~/Content/dwz/chart/g.dot.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6PYkS1eDz5pMnyfO0jvBNE0F"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>


    <script src="~/Content/dwz/js/dwz.core.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.ui.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.contextmenu.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.navTab.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.accordion.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.tree.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.barDrag.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.theme.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.util.date.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.validate.method.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.drag.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.switchEnv.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.alertMsg.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.tab.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.resize.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.dialog.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.dialogDrag.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.sortDrag.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.cssTable.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.stable.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.taskBar.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.ajax.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.pagination.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.database.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.datepicker.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.effects.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.panel.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.checkbox.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.history.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.combox.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.file.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.print.js" type="text/javascript"></script>
    <!-- 可以用dwz.min.js替换前面全部dwz.*.js (注意：替换时下面dwz.regional.zh.js还需要引入)
        <script src="bin/dwz.min.js" type="text/javascript"></script> -->
    <script src="~/Content/dwz/js/dwz.regional.zh.js" type="text/javascript"></script>

但是注意到上面有句注释说明：

<!-- 可以用dwz.min.js替换前面全部dwz.*.js (注意：替换时下面dwz.regional.zh.js还需要引入)
<script src="bin/dwz.min.js" type="text/javascript"></script>
-->

于是我改成这样了,要注意content/dwz/bin文件下的gzjs-esc.bat文件下的默认路径要改下：

这是改之后的js引用：

    <script src="~/Content/dwz/js/jquery-2.1.4.min.js" type="text/javascript"></script><!--<![endif]-->

    <script src="~/Content/dwz/js/jquery.cookie.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/jquery.validate.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/jquery.bgiframe.js" type="text/javascript"></script>
    <script src="~/Content/dwz/xheditor/xheditor-1.2.2.min.js" type="text/javascript"></script>
    <script src="~/Content/dwz/xheditor/xheditor_lang/zh-cn.js" type="text/javascript"></script>
    <script src="~/Content/dwz/uploadify/scripts/jquery.uploadify.js" type="text/javascript"></script>

    <!-- svg图表  supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ -->
    <script type="text/javascript" src="~/Content/dwz/chart/raphael.js"></script>
    <script type="text/javascript" src="~/Content/dwz/chart/g.raphael.js"></script>
    <script type="text/javascript" src="~/Content/dwz/chart/g.bar.js"></script>
    <script type="text/javascript" src="~/Content/dwz/chart/g.line.js"></script>
    <script type="text/javascript" src="~/Content/dwz/chart/g.pie.js"></script>
    <script type="text/javascript" src="~/Content/dwz/chart/g.dot.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6PYkS1eDz5pMnyfO0jvBNE0F"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

    <!-- 可以用dwz.min.js替换前面全部dwz.*.js (注意：替换时下面dwz.regional.zh.js还需要引入)  -->
    <script src="~/Content/dwz/bin/dwz.min.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.regional.zh.js" type="text/javascript"></script>

然而并没有什么用，好像并没有替换成功，于是我专门一个个注释对比，发现是有几个js,使用dwz.mini.js是替代不了的，于是我保留了这几个js,其余的注释或者删除掉，之后能保证正常显示。最终精简过的头部js引用如下所示：

@{
    ViewBag.Title = "Index";
    Layout = null;
}

<!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>点石bug </title>
    <link href="~/Content/dwz/themes/default/style.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="~/Content/dwz/themes/css/core.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="~/Content/dwz/themes/css/print.css" rel="stylesheet" type="text/css" media="print" />
    <link href="~/Content/dwz/uploadify/css/uploadify.css" rel="stylesheet" type="text/css" media="screen" />
    <!--[if IE]>
    <link href="themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/>
    <![endif]-->
    <!--[if lt IE 9]><script src="js/speedup.js" type="text/javascript"></script><script src="js/jquery-1.11.3.min.js" type="text/javascript"></script><![endif]-->
    <!--[if gte IE 9]><!-->
    <script src="~/Content/dwz/js/jquery-2.1.4.min.js" type="text/javascript"></script><!--<![endif]-->

    <script src="~/Content/dwz/js/jquery.cookie.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/jquery.validate.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/jquery.bgiframe.js" type="text/javascript"></script>
    <script src="~/Content/dwz/xheditor/xheditor-1.2.2.min.js" type="text/javascript"></script>
    <script src="~/Content/dwz/xheditor/xheditor_lang/zh-cn.js" type="text/javascript"></script>
    <script src="~/Content/dwz/uploadify/scripts/jquery.uploadify.js" type="text/javascript"></script>

    <!-- svg图表  supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ -->
    <script type="text/javascript" src="~/Content/dwz/chart/raphael.js"></script>
    <script type="text/javascript" src="~/Content/dwz/chart/g.raphael.js"></script>
    <script type="text/javascript" src="~/Content/dwz/chart/g.bar.js"></script>
    <script type="text/javascript" src="~/Content/dwz/chart/g.line.js"></script>
    <script type="text/javascript" src="~/Content/dwz/chart/g.pie.js"></script>
    <script type="text/javascript" src="~/Content/dwz/chart/g.dot.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6PYkS1eDz5pMnyfO0jvBNE0F"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>



   <script src="~/Content/dwz/js/dwz.core.js" type="text/javascript"></script><!--顶部标签页显示位置-->
        <script src="~/Content/dwz/js/dwz.ui.js" type="text/javascript"></script><!--顶部标签页显示位置-->
        <script src="~/Content/dwz/js/dwz.contextmenu.js" type="text/javascript"></script><!--顶部标签页显示位置-->
        <script src="~/Content/dwz/js/dwz.navTab.js" type="text/javascript"></script><!--顶部标签页显示位置-->
        <script src="~/Content/dwz/js/dwz.accordion.js" type="text/javascript"></script><!--顶部标签页显示位置-->
        <script src="~/Content/dwz/js/dwz.tree.js" type="text/javascript"></script><!--侧边栏背景-->
        <script src="~/Content/dwz/js/dwz.barDrag.js" type="text/javascript"></script><!--点击时间-->
        <script src="~/Content/dwz/js/dwz.theme.js" type="text/javascript"></script><!--主题-->


    <!-- 可以用dwz.min.js替换前面全部dwz.*.js (注意：替换时下面dwz.regional.zh.js还需要引入)  -->
    <script src="~/Content/dwz/bin/dwz.min.js" type="text/javascript"></script>
    <script src="~/Content/dwz/js/dwz.regional.zh.js" type="text/javascript"></script>






    <script type="text/javascript">
        $(function () {
            DWZ.init("/Content/dwz/dwz.frag.xml", {
                loginUrl: "login_dialog.html", loginTitle: "登录",	// 弹出登录对话框
                //		loginUrl:"login.html",	// 跳到登录页面
                statusCode: { ok: 200, error: 300, timeout: 301 }, //【可选】
                pageInfo: { pageNum: "pageNum", numPerPage: "numPerPage", orderField: "orderField", orderDirection: "orderDirection" }, //【可选】
                keys: { statusCode: "statusCode", message: "message" }, //【可选】
                ui: { hideMode: 'offsets' }, //【可选】hideMode:navTab组件切换的隐藏方式，支持的值有’display’，’offsets’负数偏移位置的值，默认值为’display’
                debug: false,	// 调试模式 【true|false】
                callback: function () {
                    initEnv();
                    $("#themeList").theme({ themeBase: "/Content/dwz/themes" }); // themeBase 相对于index页面的主题base路径
                }
            });
        });
    </script>
</head>

这样就能显示正常的页面了，因为这是演示一下，我直接使用的就是DMZ自己的页面，实际使用中，可以自己根据需求更改。