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

This commit is contained in:
yubaolee 2016-04-11 23:46:33 +08:00
parent 4ced496da9
commit d54062bc0b
9 changed files with 456 additions and 77 deletions

View File

@ -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

View File

@ -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();
}

View File

@ -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;

View File

@ -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)
{

View File

@ -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" />

View File

@ -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>

View File

@ -1,77 +1,117 @@
@{
Layout = null;
}
@model IEnumerable<OpenAuth.Domain.ModuleElement>
<script type="text/javascript">
//删除回调
$('#tableButtons').on('afterdelete.bjui.tabledit', function(e) {
var $tbody = $(e.relatedTarget);
console.log('你删除了一条数据,还有['+ $tbody.find('> tr').length +']条数据!');
})
</script>
<div class="bjui-pageHeader">
<div class="bjui-searchBar">
<div class="alert alert-info search-inline"><i class="fa fa-info-circle"></i> 双击行可编辑</div>&nbsp;
<button type="button" class="btn-green" data-toggle="tableditadd" data-target="#tableButtons"
data-num="1" data-icon="plus">
添加新按钮
</button>&nbsp;
</div>
<div id="moduleElementManager" class="bjui-dialog">
<div class="bjui-pageHeader">
<button type="button" class="btn-green" data-icon="plus" id="btnAddElement">
添加
</button>
<button type="button" class="btn-primary" data-icon="edit" id="btnEditElement">
编辑
</button>
<button type="button" class="btn-danger" data-icon="del" id="btnDelElement">
删除
</button>
</div>
<div class="bjui-pageContent">
<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>
</form>
<!--编辑对话框-->
<div class="bjui-dialog hidden bjui-dialog-container" id="editDlg" data-noinit="true">
<div class="bjui-pageContent">
<form class="pageForm" data-toggle="validate" id="editElementForm"
action="/ModuleElementManager/AddOrEditButton">
<input type="text" id="Id" value="" class="hidden" />
<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>
<div class="bjui-pageFooter">
<ul>
<li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
</ul>
</div>
<script src="~/BllScripts/moduleElementMan.js"></script>

View File

@ -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>

View File

@ -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>