【開源】OSharp框架解說系列（2.2）：EasyUI復雜布局及數據操作

OSharp是什么？

　　OSharp是個快速開發框架，但不是一個大而全的包羅萬象的框架，嚴格的說，OSharp中什么都沒有實現。與其他大而全的框架最大的不同點，就是OSharp只做抽象封裝，不做實現。依賴注入、ORM、對象映射、日志、緩存等等功能，都只定義了一套最基礎最通用的抽象封裝，提供了一套統一的API、約定與規則，並定義了部分執行流程，主要是讓項目在一定的規范下進行開發。所有的功能實現端，都是通過現有的成熟的第三方組件來實現的，除了EntityFramework之外，所有的第三方實現都可以輕松的替換成另一種第三方實現，OSharp框架正是要起隔離作用，保證這種變更不會對業務代碼造成影響，使用統一的API來進行業務實現，解除與第三方實現的耦合，保持業務代碼的規范與穩定。

本文已同步到系列目錄：OSharp快速開發框架解說系列

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 = $("#[e-mail]");
            $tree.tree({
                url: "@ViewBag.NodeDataUrl",
                onSelect:function(node) {
                    grid.datagrid({
                        url: "@ViewBag.GridDataUrl/" + node.id
                    });
                }
            });
        };
    </script>
}
@section headHtml
{
    <div id="[e-mail]" class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west', split:true, minWidth:80, width:150, title:'組織機構'">
            <ul id="[e-mail]" class="easyui-tree"></ul>
        </div>
        <div data-options="region:'center', border:false">
}
@section footHtml
{
        </div>
    </div>
}

 　　運行效果如圖：

　　 

EasyUI動態工具欄

 　　表格的工具欄  的項，由 _DataGridLayout.cshtml 中的 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” 關鍵字即可找到
　　

系列導航

本文已同步到系列目錄：OSharp快速開發框架解說系列