OSharp是什么？
OSharp是个快速开发框架，但不是一个大而全的包罗万象的框架，严格的说，OSharp中什么都没有实现。与其他大而全的框架最大的不同点，就是OSharp只做抽象封装，不做实现。依赖注入、ORM、对象映射、日志、缓存等等功能，都只定义了一套最基础最通用的抽象封装，提供了一套统一的API、约定与规则，并定义了部分执行流程，主要是让项目在一定的规范下进行开发。所有的功能实现端，都是通过现有的成熟的第三方组件来实现的，除了EntityFramework之外，所有的第三方实现都可以轻松的替换成另一种第三方实现，OSharp框架正是要起隔离作用，保证这种变更不会对业务代码造成影响，使用统一的API来进行业务实现，解除与第三方实现的耦合，保持业务代码的规范与稳定。
本文已同步到系列目录：OSharp快速开发框架解说系列
接上篇，前面我们已经定义了一个 datagrid父视图 _DataGridLayout.cshtml，实现一个表格是相当的容易。但是，实际业务中，并非所有的数据列表并非只是单一的datagrid列表，还可能需要把datagrid与其他组件配合使用，比如角色信息是来源于各个组织机构的，就需要增加一个组织机构的分类，来更好的管理各种角色。最终效果图如下：
来分析一下这个页面，不难看出，需要将选项卡Tab的内容页拆分成另外一个由左+内容的 easyui-layout 构成的布局页，左部分是组织机构的树型导航栏，右边是相应的角色列表。
我们先来分析一下前后的html变化，只有一个datagrid的时候，html很简单，只有一行：
1 <div id="grid-roles"></div>
要满足上面的需求，html变成了：
1 <div id="layout-roles" class="easyui-layout" data-options="fit:true"> 2 <div data-options="region:'west', split:true, minWidth:80, width:150, title:'组织机构'"> 3 <ul id="tree-organizations" class="easyui-tree"></ul> 4 </div> 5 <div data-options="region:'center', border:false"> 6 <div id="grid-roles"></div> 7 </div> 8 </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即可：
综合之后，角色列表视图的代码组织如下：
1 @{ 2 ViewBag.Title = "角色信息列表"; 3 Layout = "~/Areas/Admin/Views/Shared/_DataGridLayout.cshtml"; 4 5 ViewBag.GridId = "roles"; 6 ViewBag.GridDataUrl = Url.Action("GridData"); 7 ViewBag.NodeDataUrl = Url.Action("NodeData", "Organizations"); 8 } 9 @section customScript 10 { 11 <script type="text/javascript"> 12 columns = [[ 13 { field: "Id", title: "编号", width: 40, halign: "center", align: "right", sortable: true }, 14 { field: "Name", title: "角色名", width: 150, sortable: true }, 15 { field: "Remark", title: "角色描述", width: 150, sortable: true }, 16 { field: "CreatedTime", title: "创建时间", width: 150, halign: "center", align: "center", sortable: true, formatter: function (value) { return $.osharp.tools.formatDate(value); } } 17 ]]; 18 19 endfunction = function () { 20 var $tree = $("#tree-@ViewBag.TreeId"); 21 $tree.tree({ 22 url: "@ViewBag.NodeDataUrl", 23 onSelect:function(node) { 24 grid.datagrid({ 25 url: "@ViewBag.GridDataUrl/" + node.id 26 }); 27 } 28 }); 29 }; 30 </script> 31 } 32 @section headHtml 33 { 34 <div > 35 <div data-options="region:'west', split:true, minWidth:80, width:150, title:'组织机构'"> 36 <ul ></ul> 37 </div> 38 <div data-options="region:'center', border:false"> 39 } 40 @section footHtml 41 { 42 </div> 43 </div> 44 }