全面调整JS文件结构，为模块化前端做准备

OpenAuth.Mvc/BllScripts/moduleElementMan.js

@@ -0,0 +1,147 @@
+// ***********************************************************************
+// Assembly         : OpenAuth.Mvc
+// Author           : yubaolee
+// Created          : 04-07-2016
+//
+// Last Modified By : yubaolee
+// Last Modified On : 04-07-2016
+// ***********************************************************************
+// <copyright file="moduleElementMan.js" company="www.cnblogs.com/yubaolee">
+//     模块按钮管理
+// </copyright>
+// <summary></summary>
+// ***********************************************************************
+
+var moduleId = $.CurrentDialog.find("#selectedModuleId").val();  //外部传递的moduleId
+
+$(document).ready(function () {
+    $.CurrentDialog.find('#btnAddElement').on('click', function () {
+        editDlg.add();
+    });
+
+    $.CurrentDialog.find('#btnEditElement').on('click', function () {
+        var selected = thisDlg.getSelectedObj();
+        if (selected == null) {
+            return;
+        }
+        editDlg.update(selected);
+    });
+
+    $.CurrentDialog.find('#btnDelElement').on('click', function () {
+        var selected = thisDlg.getSelectedMany(); //可以一次删除多个
+        if (selected == null) {
+            return;
+        }
+
+        $.post("/ModuleElementManager/Del",
+        {
+            moduleElements: JSON.stringify(selected)
+        },
+       function (data) {
+           data = $.parseJSON(data);
+           if (data.statusCode == "200") {
+               thisDlg.reload();
+           }
+       });
+    });
+});
+
+//本对话框
+var thisDlg = function () {
+    var maingrid = $.CurrentDialog.find('#maingrid').datagrid({
+        showToolbar: false,
+        filterThead: false,
+        target: $(this),
+        columns: [
+            {
+                name: 'Id',
+                label: '功能模块流水号',
+                hide: true
+            },
+            {
+                name: 'DomId',
+                label: 'DOM标识',
+            },
+            {
+                name: 'Name',
+                label: '功能模块名称',
+            },
+            {
+                name: 'Icon',
+                label: '图标',
+            },
+            {
+                name: 'SortNo',
+                label: '排序号'
+            }
+        ],
+        dataUrl: '/ModuleElementManager/Get?moduleId=' + moduleId,
+        fullGrid: true,
+        showLinenumber: true,
+        showCheckboxcol: true,
+        paging: false,
+        filterMult: false,
+        showTfoot: false,
+        height: 'auto'
+    });
+
+    var getSelectDatas = function () {
+        var selectedDatas = maingrid.data('selectedDatas');
+        if (selectedDatas == undefined || selectedDatas.length == 0) {
+            $(this).alertmsg('warn', '至少选择一个对象');
+            return null;
+        }
+        return selectedDatas;
+    }
+
+    return {
+        reload: function (id) {
+            if (id != undefined) moduleId = id;
+            maingrid.datagrid('reload', { dataUrl: '/ModuleElementManager/Get?moduleId=' + moduleId });
+        },
+        getSelectedObj: function () {  //选择单行
+            var results = getSelectDatas();
+            if (results != null) return results[0];
+            return null;
+        },
+        getSelectedMany: function () {  //选择多行
+            return getSelectDatas();
+        },
+    };
+}();
+
+var editDlg = function () {
+    var update = false;
+    //在B-JUI中，不能在这里获取DOM，否则下面赋值会不成功
+    //只能直接 $("#Id").val(ret.Id);
+    // Id = $("#Id");     
+    var show = function () {
+        BJUI.dialog({ id: 'editDlg', title: '菜单编辑', target: '#editDlg' });
+    }
+    return {
+        add: function () {
+            show();
+            $("#editElementForm")[0].reset();  //reset方法只能通过dom调用
+            $("#Id").val(0);
+            $("#Sort").val('0');
+            $("#ModuleId").val(moduleId);
+        },
+        update: function (ret) {
+            update = true;
+            show();
+            $("#Id").val(ret.Id);
+            $("#DomId").val(ret.DomId);
+            $("#Name").val(ret.Name);
+            $("#Type").val(ret.Type);
+            $("#ModuleId").val(ret.ModuleId);
+            $("#Attr").val(ret.Attr);
+            $("#Script").val(ret.Script);
+            $("#Icon").val(ret.Icon);
+            $("#Class").val(ret.Class);
+            $("#Remark").val(ret.Remark);
+            $("#Sort").val(ret.Sort);
+        }
+    };
+}();
+
+//@ sourceURL= moduleElementMan.js

OpenAuth.Mvc/BllScripts/modulemanager.js

@@ -0,0 +1,184 @@
+// ***********************************************************************
+// Assembly         : OpenAuth.Mvc
+// Author           : yubaolee
+// Created          : 04-06-2016
+//
+// Last Modified By : yubaolee
+// Last Modified On : 04-06-2016
+// ***********************************************************************
+// <copyright file="modulemanager.js" company="www.cnblogs.com/yubaolee">
+//     版权所有(C) 2015
+// </copyright>
+// <summary>模块管理脚本</summary>
+// ***********************************************************************
+
+$(document).ready(function () {
+});
+
+//ztree模块
+var ztree = function () {
+    var zTreeObj = undefined;
+    var setting = {
+        view: { selectedMulti: false },
+        data: {
+            key: {
+                name: 'Name',
+                title: 'Name'
+            },
+            simpleData: {
+                enable: true,
+                idKey: 'Id',
+                pIdKey: 'ParentId',
+                rootPId: 'null'
+            }
+        },
+        callback: { onClick: zTreeOnClick }
+    };
+    $.getJSON('/ModuleManager/LoadModuleWithRoot', function (json) {
+        zTreeObj = $.fn.zTree.init($('#maintree'), setting, json);
+        zTreeObj.expandAll(true);
+    });
+}();
+
+//grid列表模块
+var grid = function () {
+    var selectedId = 0;  //选中的ID
+    var maingrid = $('#maingrid', '#detail').datagrid({
+        showToolbar: false,
+        filterThead: false,
+        target: $(this),
+        columns: [
+            {
+                name: 'Id',
+                label: '功能模块流水号',
+                hide: true
+            },
+            {
+                name: 'CascadeId',
+                label: '节点语义ID',
+                width: 80
+            },
+            {
+                name: 'Name',
+                label: '功能模块名称',
+                width: 80
+            },
+            {
+                name: 'Url',
+                label: '主页面URL',
+                width: 80
+            },
+            {
+                name: 'ParentId',
+                label: '父节点流水号',
+                hide: true
+            },
+            {
+                name: 'IconName',
+                width: 80,
+                label: '节点图标文件名称'
+            },
+            {
+                name: 'Status',
+                width: 80,
+                label: '当前状态'
+            },
+            {
+                name: 'ParentName',
+                width: 80,
+                label: '父节点名称'
+            },
+            {
+                name: 'Vector',
+                width: 80,
+                label: '矢量图标'
+            },
+            {
+                name: 'SortNo',
+                width: 80,
+                label: '排序号'
+            },
+        ],
+        dataUrl: '/ModuleManager/Load?orgId=' + selectedId,
+        fullGrid: true,
+        showLinenumber: true,
+        showCheckboxcol: true,
+        paging: true,
+        filterMult: false,
+        showTfoot: false,
+        height: 'auto'
+    });
+
+    return {
+        reload: function (id) {
+            if (id != undefined) selectedId = id;
+            maingrid.datagrid('reload', { dataUrl: '/ModuleManager/Load?orgId=' + selectedId });
+        },
+        getSelectedObj: function () {  //选择单行
+            var selectedDatas = maingrid.data('selectedDatas');
+            if (selectedDatas == undefined || selectedDatas.length == 0) {
+                $(this).alertmsg('warn', '至少选择一个对象', {
+                    displayMode: 'slide',
+                    title: '重要提示'
+                });
+                return null;
+            }
+            return selectedDatas[0];
+        },
+        getSelectedMany: function () {  //选择多行
+            return maingrid.data('selectedDatas');
+        },
+    };
+}();
+
+function zTreeOnClick(event, treeId, treeNode) {
+    grid.reload(treeNode.Id);
+}
+
+//删除
+function delModule() {
+    var selected = grid.getSelectedObj();
+    if (selected == null) return;
+
+    $.getJSON('/ModuleManager/Delete?Id=' + selected.Id, function (data) {
+        if (data.statusCode == "200")
+            grid.reload();
+        else {
+            $(this).alertmsg('warn', data.message);
+        }
+    });
+}
+
+//自定义的编辑按钮
+function editModule() {
+    var selected = grid.getSelectedObj();
+    if (selected == null) return;
+
+    $(this).dialog({
+        id: 'editDialog',
+        url: '/ModuleManager/Add?id=' + selected.Id,
+        title: '编辑',
+        onClose: function () {
+            grid.reload();
+        }
+    });
+}
+
+//为模块分配按钮
+function assignButton() {
+    var selected = grid.getSelectedObj();
+    if (selected == null) return;
+
+    //BJUI.dialog({ id: 'assignDialog', title: '菜单编辑', target: '#moduleElementManager' });
+
+    BJUI.dialog({
+        id: 'assignDialog',
+        mask: true,
+        url: '/ModuleElementManager/Index?id=' + selected.Id,
+        title: '为模块分配按钮'
+    });
+}
+
+function refreshModuleGrid() {
+    grid.reload();
+}

OpenAuth.Mvc/Controllers/LoginController.cs

@@ -3,6 +3,7 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.Mvc;
+using System.Web.Security;
 using Infrastructure.Helper;
 using OpenAuth.App;
 using OpenAuth.Mvc.Models;

OpenAuth.Mvc/Controllers/ModuleElementManagerController.cs

@@ -35,10 +35,15 @@ namespace OpenAuth.Mvc.Controllers
             _app = AutofacExt.GetFromFac<ModuleElementManagerApp>();
         }
 
-        public ActionResult Index(int id = 0)
+        public ActionResult Index(int id)
         {
             ViewBag.ModuleId = id;
-            return View(_app.LoadByModuleId(id));
+            return View();
+        }
+
+        public ActionResult Get(int moduleId = 0)
+        {
+            return Json(_app.LoadByModuleId(moduleId));
         }
 
         [HttpPost]
@@ -56,11 +61,12 @@ namespace OpenAuth.Mvc.Controllers
             return JsonHelper.Instance.Serialize(_bjuiResponse);
         }
 
-        public string DelButton(int id)
+        public string Del(string moduleElements)
         {
             try
             {
-                _app.Delete(id);
+                var delObjs = JsonHelper.Instance.Deserialize<ModuleElement[]>(moduleElements);
+                _app.Delete(delObjs);
             }
             catch (Exception e)
             {

OpenAuth.Mvc/OpenAuth.Mvc.csproj

@@ -150,6 +150,7 @@
     <Compile Include="Properties\AssemblyInfo.cs" />
   </ItemGroup>
   <ItemGroup>
+    <Content Include="BllScripts\moduleElementMan.js" />
     <Content Include="BllScripts\modulemanager.js" />
     <Content Include="Content\BJUI\images\captcha.jpeg" />
     <Content Include="Content\BJUI\images\datagrid\AU.gif" />

OpenAuth.Mvc/Views/Home/MenuHeader.cshtml

@@ -1,7 +1,7 @@
 @using System.Text
 <div class="bjui-pageHeader">
     <div class="bjui-searchBar">
-        <div class="bjui-searchBar">
+       
             @*<label>名称：</label><input type="text" value="" name="code" size="10">&nbsp;
                 <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
                 <a class="btn btn-orange" href="javascript:;" data-toggle="reloadsearch" data-clear-query="true" data-icon="undo">
@@ -24,7 +24,6 @@
             </div>
 
 
-        </div>
     </div>
 </div>
 

OpenAuth.Mvc/Views/ModuleElementManager/Index.cshtml

@@ -1,77 +1,117 @@
 @{
     Layout = null;
 }
-@model IEnumerable<OpenAuth.Domain.ModuleElement>
 
-<script type="text/javascript">
 
-//删除回调
+<div id="moduleElementManager" class="bjui-dialog">
-$('#tableButtons').on('afterdelete.bjui.tabledit', function(e) {
+    <div class="bjui-pageHeader">
-    var $tbody = $(e.relatedTarget);
+        <button type="button" class="btn-green" data-icon="plus" id="btnAddElement">
-    console.log('你删除了一条数据，还有['+ $tbody.find('> tr').length +']条数据！');
+            添加
-})
+        </button>
-</script>
+        <button type="button" class="btn-primary" data-icon="edit" id="btnEditElement">
-<div class="bjui-pageHeader">
+            编辑
-        <div class="bjui-searchBar">
+        </button>
-            <div class="alert alert-info search-inline"><i class="fa fa-info-circle"></i> 双击行可编辑</div>&nbsp;
+        <button type="button" class="btn-danger" data-icon="del" id="btnDelElement">
-            <button type="button" class="btn-green" data-toggle="tableditadd" data-target="#tableButtons" 
+            删除
-                    data-num="1" data-icon="plus">
+        </button>
-                添加新按钮
+    </div>
-            </button>&nbsp;
+    <div class="bjui-pageContent">
-        </div>
+        <input id="selectedModuleId" value="@ViewBag.ModuleId" style="display: none" />
+        <table id="maingrid" class="table table-bordered"></table>
+    </div>
+    <div class="bjui-pageFooter">
+        <ul>
+            <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
+        </ul>
+    </div>
 </div>
-<div class="bjui-pageContent tableContent" style="position:relative">
-    <form id="j_custom_form" class="pageForm" data-toggle="validate" method="post">
-        <table id="tableButtons" class="table table-bordered table-hover table-striped table-top"
-               data-toggle="tabledit" data-initnum="0" data-action="/ModuleElementManager/AddOrEditButton" 
-               data-single-noindex="true">
-            <thead>
-            <tr data-idname="Id">
-                <th width="8%" title="元素类型"><input type="text" name="Type" data-rule="required" value="button" size="5"></th>
-                <th width="10%" title="按钮标识"><input type="text" name="DomId" data-rule="required" value="" size="5"></th>
-                <th width="10%" title="按钮显示"><input type="text" name="Name" data-rule="required" value="" size="5"></th>
-                <th width="10%" title="按钮样式"><input type="text" name="Class" data-rule="required" value="btn-green" size="5"></th>
-                <th width="8%" title="按钮图标"><input type="text" name="Icon" data-rule="required" value="pencil" size="5"></th>
-                <th width="10%" title="按钮脚本">
-                    <input type="text" name="Script" data-rule="required" value="javascript:;" size="5">
-                </th>
-                <th width="24%" title="附加属性"><textarea name="Attr" data-toggle="autoheight"></textarea></th>
-                <th width="10%" title="所属模块ID">
-                    <input readonly="readonly" type="text" value="@ViewBag.ModuleId" name="ModuleId"/>
-                </th>
-                <th title="操作" width="10%">
-                    <a href="javascript:;" class="btn btn-green" data-toggle="dosave">增加</a>
-                    <a href="javascript:;" class="btn btn-red row-del">取消</a>
-                </th>
-            </tr>
-            </thead>
-            <tbody>
-            @foreach (var element in Model)
-            {
-                <tr data-id="@element.Id">
-                    <td>@element.Type</td>
-                    <td>@element.DomId</td>
-                    <td>@element.Name</td>
-                    <td>@element.Class</td>
-                    <td>@element.Icon</td>
-                    <td>@element.Script</td>
-                    <td>@element.Attr</td>
-                    <td>@ViewBag.ModuleId</td>
-                    <td data-noedit="true">
-                        <input type="text" style="display: none" value="@element.Id" id="element_@element.Id"/>
-                        <button type="button" class="btn-green" data-toggle="doedit">编辑</button>
-                        <a href="/ModuleElementManager/DelButton?id={#element_@element.Id}" class="btn btn-red row-del"
-                           data-confirm-msg="确定要删除该行信息吗？">删</a>
-                    </td>
-                </tr>
-            }
 
-            </tbody>
+<!--编辑对话框-->
-        </table>
+<div class="bjui-dialog hidden bjui-dialog-container" id="editDlg" data-noinit="true">
-    </form>
+    <div class="bjui-pageContent">
-</div>
+
-<div class="bjui-pageFooter">
+        <form class="pageForm" data-toggle="validate" id="editElementForm" 
-    <ul>
+              action="/ModuleElementManager/AddOrEditButton">
-        <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
+            <input type="text" id="Id" value="" class="hidden" />
-    </ul>
+            <input id="ModuleId" name="ModuleId" class="hidden" />
+            <table class="table table-condensed table-hover">
+                <tbody>
+                    <tr>
+                        <td>
+                            <label for="DomId" class="control-label x120">DOM ID：</label>
+                            <input type="text" id="DomId" name="DomId" data-rule="required" size="20"/>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="Name" class="control-label x120">名称：</label>
+                            <input type="text" id="Name" name="Name" value="" data-rule="required" size="20"/>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="Type" class="control-label x120">类型：</label>
+                            <select id="Type" name="Type" data-toggle="selectpicker">
+                                <option value="button" selected>按钮</option>
+                                <option value="link">超链接</option>
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="Attr" class="control-label x120">元素附加属性：</label>
+                            <input type="text" id="Attr" name="Attr" value="" size="20"/>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="Script" class="control-label x120">元素调用脚本：</label>
+                            <input type="text" id="Script" name="Script" value="" size="20"/>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="Class" class="control-label x120">元素样式：</label>
+                            <select id="Class" name="Class" data-toggle="selectpicker">
+                                <option value="btn-green" selected>绿色</option>
+                                <option value="btn-red">红色</option>
+                                <option value="btn-primary">默认</option>
+                                <option value="btn-danger">警告</option>
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="Remark" class="control-label x120">备注：</label>
+                            <input type="text" id="Remark" name="Remark" value="" data-rule="required" size="20"/>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="Sort" class="control-label x120">排序号：</label>
+                            <input type="text" id="Sort" name="Sort" value="" data-rule="required" size="20"/>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="Icon" class="control-label x120">图标：</label>
+                            <select id="Icon" name="Icon" data-toggle="selectpicker">
+                                <option value="pencil" selected>pencil</option>
+                                <option value="plus">plus</option>
+                                <option value="del">del</option>
+                            </select>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </form>
+    </div>
+    <div class="bjui-pageFooter">
+        <ul>
+            <li><button type="button" class="btn-close">关闭</button></li>
+            <li><button type="submit" class="btn-primary">保存</button></li>
+        </ul>
+    </div>
 </div>
+
+<script src="~/BllScripts/moduleElementMan.js"></script>

OpenAuth.Mvc/Views/ModuleManager/Index.cshtml

@@ -10,7 +10,7 @@
         </div>
 
         <div id="detail" style="margin-left: 225px;">
-            <table id="maingrid" class="table table-hover table-striped table-top"></table>
+            <table id="maingrid" class="table table-bordered"></table>
         </div>
     </div>
 </div>

OpenAuth.Mvc/Web.config

@@ -61,6 +61,7 @@
     <authentication mode="None" />
     <compilation debug="true" targetFramework="4.5" />
     <httpRuntime targetFramework="4.5" />
+    <sessionState mode="InProc" timeout="60"/>
   </system.web>
   <system.webServer>
     <modules>