一、EasyUI复杂布局
接上篇,前面我们已经定义了一个 datagrid父视图 _DataGridLayout.cshtml,实现一个表格是相当的容易。但是,实际业务中,并非所有的数据列表并非只是单一的datagrid列表,还可能需要把datagrid与其他组件配合使用,比如角色信息是来源于各个组织机构的,就需要增加一个组织机构的分类,来更好的管理各种角色。最终效果图如下:
来分析一下这个页面,不难看出,需要将选项卡Tab的内容页拆分成另外一个由左+内容的 easyui-layout 构成的布局页,左部分是组织机构的树型导航栏,右边是相应的角色列表。
我们先来分析一下前后的html变化,只有一个datagrid的时候,html很简单,只有一行:
<div id="grid-roles"></div>
要满足上面的需求,html变成了:
<div id="layout-roles" class="easyui-layout" data-options="fit:true">
<div data-options="region:'west', split:true, minWidth:80, width:150, title:'组织机构'">
<ul id="tree-organizations" class="easyui-tree"></ul>
</div>
<div data-options="region:'center', border:false">
<div id="grid-roles"></div>
</div>
</div>
这个而已,原先的 _DataGridLayout.cshtml 还能胜任吗?答案是肯定的,因为我们已经预先做好了准备,_DataGridLayout.cshtml 中有如下定义:
只需要把 #grid-roles 前后的代码分别回到 headHtml 与 footHtml 两个Section中,就能满足需求,在Views\Roles\Index.cshtml中添加如下代码:
注意,在html已经被拆分成了两部分,单一部分肯定是不闭合的,会处于报错状态,但一定要保证组合起来之后是闭合的,才能生成正确的 html。
当然,还要按需要添加处理新添加的 easyui-layout 和 easyui-tree 的 javascript 代码,这就要用到 _DataGridLayout.cshtml 中定义的 startfunction() 与 endfunction() 两个方法了,要添加的代码也很简单,只要选择组织机构的树节点的时候变更datagrid的URL即可:
综合之后,角色列表视图的代码组织如下:
@{
ViewBag.Title = "角色信息列表";
Layout = "~/Areas/Admin/Views/Shared/_DataGridLayout.cshtml";
ViewBag.GridId = "roles";
ViewBag.GridDataUrl = Url.Action("GridData");
ViewBag.NodeDataUrl = Url.Action("NodeData", "Organizations");
}
@section customScript
{
<script type="text/javascript">
columns = [[
{ field: "Id", title: "编号", width: 40, halign: "center", align: "right", sortable: true },
{ field: "Name", title: "角色名", width: 150, sortable: true },
{ field: "Remark", title: "角色描述", width: 150, sortable: true },
{ field: "CreatedTime", title: "创建时间", width: 150, halign: "center", align: "center", sortable: true, formatter: function (value) { return $.osharp.tools.formatDate(value); } }
]];
endfunction = function () {
var $tree = $("#tree-@ViewBag.TreeId");
$tree.tree({
url: "@ViewBag.NodeDataUrl",
onSelect:function(node) {
grid.datagrid({
url: "@ViewBag.GridDataUrl/" + node.id
});
}
});
};
</script>
}
@section headHtml
{
<div id="layout-@ViewBag.GridId" class="easyui-layout" data-options="fit:true">
<div data-options="region:'west', split:true, minWidth:80, width:150, title:'组织机构'">
<ul id="tree-@ViewBag.TreeId" class="easyui-tree"></ul>
</div>
<div data-options="region:'center', border:false">
}
@section footHtml
{
</div>
</div>
}
运行效果如图:
二、EasyUI动态工具栏
表格的工具栏 的项,由 _DataGridLayout.cshtml 中的 1 string toolbarItem = ViewBag.ToolbarItem ?? " add,edit,save,cancel,delete " ; 控制,需要重新定义的时候,在 子视图中重新定义ViewBag.ToolbarItem 即可。生成项的代码如下:
var toolbarData = [
@if (toolbarItem.Contains("add"))
{
@:{ text: "增加", iconCls: "icon-add", handler: addNewRow },
}
@if (toolbarItem.Contains("edit"))
{
<text>
{ text: "编辑", iconCls: "icon-edit", handler: beginEdit },
"-",
</text>
}
@if (toolbarItem.Contains("save"))
{
@:{ text: "保存", iconCls: "icon-save", handler: saveChanges },
}
@if (toolbarItem.Contains("cancel"))
{
<text>
{ text: "取消", iconCls: "icon-undo", handler: cancelEdit },
"-",
</text>
}
@if (toolbarItem.Contains("delete"))
{
@:{ text: "删除", iconCls: "icon-remove", handler: deleteRows },
}
];
如果需要给添加额外表格操作,可以在子视图中重写 startfunction() 方法,添加相应的按钮项和功能函数即可:
startfunction = function () {
//导出
function exportRoles() {
$.osharp.easyui.msg.info("导出角色数据");
}
toolbarData.push({ text: "导出", iconCls: "pic_50", handler: exportRoles });
};
这样,就能根据用户的权限动态的决定用户有哪些可用功能,运行效果如下:
三、EasyUI增删改操作
前端部分
在本示例中,表格数据的操作尽量使用 行内编辑的方式来进行,如部分数据需要别的方式(比如弹出窗口的编辑方式),可在子视图中对工具栏按钮事件进行重写。
行内编辑,需要在子视图的 columns 信息中添加编辑及数据验证的相关设置 editor,具体参考 easyui 的api说明,这里略过,如下:
columns = [[{
field: "Id",
title: "编号",
width: 40,
halign: "center",
align: "right",
sortable: true
},
{
field: "Name",
title: "角色名",
width: 150,
sortable: true,
editor: {
type: "validatebox",
options: {
required: true,
validType: "length[1,50]"
}
}
},
{
field: "Remark",
title: "角色描述",
width: 150,
sortable: true,
editor: {
type: "textarea",
options: {
validType: "length[1,500]"
}
}
},
{
field: "CreatedTime",
title: "创建时间",
width: 150,
halign: "center",
align: "center",
sortable: true,
formatter: function(value) {
return $.osharp.tools.formatDate(value);
}
}]];
easyui 的表格验证还是不错的,比如添加一行,效果如下:
向后端提交数据,这里使用 json2.js 的 JSON.stringify(data) 将数据序列化成 json 之后再提交,删除的时候提交的数据为 id 的集合,是先使用 jquery.linq.js(linq to js,能像 C# 使用 linq 一样使用 js 来操作集合数据)来提取 id 的集合,再进行序列化提交,实现如下:
function submitAdds(objs) {
$.post("@ViewBag.AddUrl", { dtos: JSON.stringify(objs) }, ajaxResultHandler);
}
function submitEdits(objs) {
$.post("@ViewBag.EditUrl", { dtos: JSON.stringify(objs) }, ajaxResultHandler);
}
var deleteRows = function () {
var selectRows = grid.datagrid("getSelections");
if (selectRows.length == 0) {
$.osharp.easyui.msg.tip("请先选中要删除的行。");
return;
}
var ids = $.Enumerable.From(selectRows).Select(function (m) { return m.Id; }).ToArray();
$.osharp.easyui.msg.confirm("是否要删除所有选中的行?此操作是不可恢复的。", null, function () {
$.post("@ViewBag.DeleteUrl", { ids: JSON.stringify(ids) }, ajaxResultHandler);
});
};
function ajaxResultHandler(data) {
if (data.Type == "Success") {
grid.datagrid("reload");
}
if (data.Type == "Error") {
$.osharp.easyui.msg.error(data.Content);
} else {
$.osharp.easyui.msg.tip(data.Content);
}
}
后端部分
后端接收到的数据为JSON字符串,需要解析成Dto,才能进行业务处理,定义了一个JsonBinder类来专门解析前端传来的JSON数据:
/// <summary>
/// JSON数据绑定类
/// </summary>
public class JsonBinder<T> : IModelBinder
{
/// <summary>
/// 使用指定的控制器上下文和绑定上下文将模型绑定到一个值。
/// </summary>
/// <returns>
/// 绑定值。
/// </returns>
/// <param name="controllerContext">控制器上下文。</param><param name="bindingContext">绑定上下文。</param>
public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
{
string json = controllerContext.HttpContext.Request.Form[bindingContext.ModelName];
if (string.IsNullOrEmpty(json))
{
json = controllerContext.HttpContext.Request.QueryString[bindingContext.ModelName];
}
if (string.IsNullOrEmpty(json))
{
return null;
}
JsonSerializer serializer = new JsonSerializer();
if (json.StartsWith("{") && json.EndsWith("}"))
{
JObject jsonBody = JObject.Parse(json);
object result = serializer.Deserialize(jsonBody.CreateReader(), typeof(T));
return result;
}
if (json.StartsWith("[") && json.EndsWith("]"))
{
List<T> list = new List<T>();
JArray jsonArray = JArray.Parse(json);
if (jsonArray != null)
{
list.AddRange(jsonArray.Select(jobj => serializer.Deserialize(jobj.CreateReader(), typeof(T))).Select(obj => (T)obj));
}
return list;
}
return null;
}
}
后台处理代码如下,这里还没有进行真正的业务逻辑处理,只是简单的返回一个结果:
[HttpPost]
[AjaxOnly]
public ActionResult Add([ModelBinder(typeof(JsonBinder<RoleDto>))] ICollection<RoleDto> dtos)
{
string[] names = dtos.Select(m => m.Name).ToArray();
AjaxResult result = new AjaxResult("角色“{0}”新增成功".FormatWith(names.ExpandAndToString()), AjaxResultType.Success);
return Json(result, JsonRequestBehavior.AllowGet);
}
[HttpPost]
[AjaxOnly]
public ActionResult Edit([ModelBinder(typeof(JsonBinder<RoleDto>))] ICollection<RoleDto> dtos)
{
string[] names = dtos.Select(m => m.Name).ToArray();
AjaxResult result = new AjaxResult("角色“{0}”新增成功".FormatWith(names.ExpandAndToString()), AjaxResultType.Success);
return Json(result, JsonRequestBehavior.AllowGet);
}
[HttpPost]
[AjaxOnly]
public ActionResult Delete([ModelBinder(typeof(JsonBinder<int>))] ICollection<int> ids)
{
AjaxResult result = new AjaxResult("{0} 个角色删除成功".FormatWith(ids.Count), AjaxResultType.Success);
return Json(result, JsonRequestBehavior.AllowGet);
}
返回的AjaxResult是一个专用封装于AJAX操作结果的类型:
/// <summary>
/// 表示Ajax操作结果
/// </summary>
public class AjaxResult
{
/// <summary>
/// 初始化一个<see cref="AjaxResult"/>类型的新实例
/// </summary>
public AjaxResult(string content, AjaxResultType type = AjaxResultType.Info, object data = null)
: this(content, data, type)
{ }
/// <summary>
/// 初始化一个<see cref="AjaxResult"/>类型的新实例
/// </summary>
public AjaxResult(string content, object data, AjaxResultType type = AjaxResultType.Info)
{
Type = type.ToString();
Content = content;
Data = data;
}
/// <summary>
/// 获取 Ajax操作结果类型
/// </summary>
public string Type { get; private set; }
/// <summary>
/// 获取 消息内容
/// </summary>
public string Content { get; private set; }
/// <summary>
/// 获取 返回数据
/// </summary>
public object Data { get; private set; }
}
操作结果,成功返回结果,测试通过:
至此,EasyUI的界面搭建基本完成,后面的文章中我们将使用这个界面构建一个会员系统,欢迎关注。
四、开源说明
(一)github.com
OSharp项目已在github.com上开源,地址为:https://github.com/i66soft/osharp,欢迎阅读代码,欢迎 Fork,如果您认同 OSharp 项目的思想,欢迎参与 OSharp 项目的开发。
在Visual Studio 2013中,可直接获取 OSharp 的最新源代码,获取方式如下,地址为:https://github.com/i66soft/osharp.git
(二)nuget
OSharp的相关类库已经发布到nuget上,欢迎试用,直接在nuget上搜索 “osharp” 关键字即可找到