operamasks-ui2.0 +MVC4.0+EF5.0实战之四 部门管理功能及网格控件（datagrid）

　　前几篇侧重点还是在布局，下面，主角出场，网格控件的地位和意义已无需再说，内容也比较多，预计得分几篇才能说完，本文是一些基础的东西，但不乏需要注意的地方。

　　对于MIS系统来说，公司的组织架构是一个基础的功能（网站系统则没有所谓的部门及成员，而侧重于以个体为单位的会员），也即通常所说的部门。与前面说的菜单类似，通常也是采取自关联形成树形结构。为了方便维护，设计上采取左侧树，右侧网格的方式，先上效果图，以便有个直观的印象。

　　先说一下后台基本工作。

　　采用Code First模式，首先创建部门实体。　　

View Code

View Code 

using Model.Framework;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.ComponentModel.DataAnnotations.Schema;
using System.ComponentModel.DataAnnotations;
using System.Web.Script.Serialization;
using System.Web.Mvc;

namespace Model.Sys
{
    public  class Department : BaseEntity
    {

        [DisplayName("内码")]
        public string ID { get; set; }

        [DisplayName("部门名称")]
        [StringLength(20)]
        [Required()]
        [Remote("CheckExistForName", "Department", AdditionalFields = "Name,ParentID,ID", ErrorMessage = "上级部门下已存在该名称的部门，请确认")]
        public string Name { get; set; }

        [DisplayName("电话")]       
        public string Tel { get; set; }

        [DisplayName("传真")]
        public string Fax { get; set; }

        [DisplayName("地址")]
        public string Address { get; set; }

        [DisplayName("描述")]
        public string Describe { get; set; }

        [DisplayName("创建时间")]        
        public Nullable<System.DateTime> CreateDate { get; set; }
        
        [DisplayName("使用标志")]
        [Required()]
        public string UseFlag { get; set; }

        [DisplayName("备注")]
        public string Remark { get; set; }

        [DisplayName("排序号")]
        public string SortNo { get; set; }

       
        public string ParentID { get; set; }
        [DisplayName("上级部门")]   
        [ForeignKey("ParentID")]   
        public  Department ParentDept { get; set; }


        public string CreateUserID { get; set; }
        [DisplayName("创建人")]
        [ForeignKey("CreateUserID")]        
        public  User CreateUser { get; set; }


        public   ICollection<Department> SonDepts { get; set; }      
        public   ICollection<User> Users { get; set; }

　　继承的BaseEntity是为了方便以后为所有实体加统一的方法预留的，目前为空，你可以无视。另外，用了一些数据声明和验证的东西，暂不做详细说明。这里有一点必须注意，去除virtual关键字，否则在执行Json序列化时，就会报检测到循环引用的错误。

　　然后在数据库里插入几条测试数据（以下是使用EntityFramework的迁移功能，在Configuration类的Seed方法里加入测试数据，关于迁移功能请参见我之前的一篇译稿前半部分 Asp.Net MVC4.0 官方教程 入门指南之八--为Movie模型和库表添加字段），当然你也可以在数据库里手工添加。        　　

View Code

            context.Department.AddOrUpdate(
                p => p.ID,
                //new Department { ID = "1", Name = "部门组织", ParentID = null, UseFlag = "4" },
                new Department { ID = "2", Name = "软件公司", ParentID = null, UseFlag = "4" },
                new Department { ID = "3", Name = "研发部", ParentID = "2", SortNo = "01", UseFlag = "4" },
                new Department { ID = "4", Name = "产品部", ParentID = "2", SortNo = "02", UseFlag = "4" },
                new Department { ID = "5", Name = "办公室", ParentID = "2", SortNo = "03", UseFlag = "4" },
                new Department { ID = "6", Name = "信息中心", ParentID = "5", UseFlag = "4" },
                new Department { ID = "11", Name = "部门11", ParentID = "4", SortNo = "11", UseFlag = "4" },
                new Department { ID = "12", Name = "部门12", ParentID = "4", SortNo = "12", UseFlag = "4" },
                new Department { ID = "13", Name = "部门13", ParentID = "4", SortNo = "13", UseFlag = "4" },
                new Department { ID = "14", Name = "部门14", ParentID = "4", SortNo = "14", UseFlag = "4" },
                new Department { ID = "15", Name = "部门15", ParentID = "4", SortNo = "15", UseFlag = "4" },
                new Department { ID = "16", Name = "部门16", ParentID = "4", SortNo = "16", UseFlag = "4" },
                new Department { ID = "17", Name = "部门17", ParentID = "4", SortNo = "17", UseFlag = "4" },
                new Department { ID = "18", Name = "部门18", ParentID = "4", SortNo = "18", UseFlag = "4" },
                new Department { ID = "19", Name = "部门19", ParentID = "4", SortNo = "19", UseFlag = "4" },
                new Department { ID = "20", Name = "部门20", ParentID = "4", SortNo = "20", UseFlag = "4" },
                new Department { ID = "21", Name = "部门21", ParentID = "4", SortNo = "21", UseFlag = "4" }
                );

 　　以上是后台的基础性工作，关于前台调用的后台方法，跟前台一块描述，这样联系更紧密一些。

　　新建一个控制器，命名为DepartmentContorller，空模板空支架，也就是完全自己控制，不用mvc脚手架自动生成。然后在其Index方法里右键，选择生成视图，命名为ListPag，打开ListPage.cshtml　

　　1.在head标签内部加入对om相关css样式表的引用

　　　　@Styles.Render("~/OperaMasksUI/css/default/om-default.css")    　

　　2.在</body>标签之前加入以下对js文件的引用

　　    @Scripts.Render("~/OperaMasksUI/js/jquery163.min.js")

          @Scripts.Render("~/OperaMasksUI/js/operamasks-ui200.min.js")

　　3.部门管理功能我们想实现左侧树右侧网格的效果，因此需要用到前面已经说过的布局控件，如下所示          

　　<div id="page" >
        <div id="west-panel">
            <ul id="tree"></ul>
        </div>
        <div id="center-panel">            
            <table id="datagrid"  ></table>
        </div>
    </div>

　　对应的初始化js为

 function LoadLayout()
        {
            $('#page').omBorderLayout({
                panels: [
                    {
                        id: "west-panel",
                        title: "部门组织",
                        region: "west",
                        resizable: true,
                        collapsible: true,
                        width: 200
                    },
                {
                    id: "center-panel",
                    region: "center",
                    header: false
                }
                ],
                hideCollapsBtn: true,
                fit: true,
                spacing: 7
            });
        }

　　前面已经详细学习过布局控件的使用，在此就不再啰唆，仅将相关代码贴出来，以上效果就是仅使用左右布局，且左侧区域可折叠。

　　然后是左侧树，与前面菜单类似，同样只贴出代码。

　　树初始化js：

 function LoadTree()
        {
            $("#tree").omTree({
                simpleDataModel: true,
                dataSource: '@Url.Action("Tree")',
                onClick: TreeNodeClick

            });
        }

　　后台获取数据Tree方法为：

        //左侧部门树        
        public ActionResult Tree()
        {
            IQueryable<Department> all = DepartmentService.Query();
            var nodes = new List<TreeNode>();
            foreach (var item in all.ToList())
            {
                TreeNode node = new TreeNode();
                node.id = item.ID;
                node.pid = item.ParentID;
                node.text = item.Name;               
                node.expanded = "true";
                nodes.Add(node);
            }
            return Content(nodes.ToJsonString());   
        }

　　下面，网格控件登场。

　　初始化js:

　　　　 var rootID = "2";
        var defaultSort = { sortBy: 'Name', sortDir: 'asc' };
        function LoadDataGrid()
        {
   
            $('#datagrid').omGrid({
                method:'POST',
                title: '部门列表',
                extraData: $.extend({ id: rootID }, defaultSort),
                singleSelect: false,               
                dataSource: '@Url.Action("DataGrid")',
                colModel:
                [
                    { header: '@Html.DisplayNameFor(model => model.Name)', name: 'Name', width: 200, align: 'center', sort: 'serverSide' },
                    { header: '@Html.DisplayNameFor(model => model.Tel)', name: 'Tel', width: 100, align: 'center'},                   
                    { header: '@Html.DisplayNameFor(model => model.Describe)', name: 'Describe', width: 'autoExpand', align: 'center' },
                    { header: '@Html.DisplayNameFor(model => model.SortNo)', name: 'SortNo', width: 40, align: 'center', sort: 'serverSide' },
                    { header: '操作', name: 'ID', width: 100, align: 'center', renderer:DatagridOpColumn },

                ]               
            });
           
        }

　　前面有两个变量，一个是部门根目录id，另外一个是默认排序，这两部分，都通过初始化参数extraData属性传到后台，至于colModel则指明每一列，注意列显示名称没有写死，而是通过@Html.DisplayNameFor(model => model.Name)方式从模型里取的，这样一旦模型的DisplayName改了，所有的前台页面都会自动更新，要使用这种方式，需要在首行加上@model Model.Sys.Department。

　　dataSource指明取数据的后台方法，如下：　　

        //右侧部门列表
        [HttpPost]
        public ContentResult DataGrid(FormCollection form)
        {
            string id = form["id"];
            //若为根目录，查询所有部门，否则附加查询限制条件
            /***处理略,之后篇章里详述统一查询处理**/
//排序
            Sort sort = new Sort(form["sortBy"], form["sortDir"]);
            //查询
            IQueryable<Department> queryResult = DepartmentService.Query(model, sort);

            //分页
            PageView pageView = new PageView(Int32.Parse(form["start"]), form["limit"]);

            //取得数据
            var data = DataGrid<Department>.GetPageData(queryResult, pageView);
            //返回数据
            return Content(data.ToJsonString());
        }

　　辅助的各个类如下：
　　排序类Sort：

View Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Common.Query
{
    public class Sort
    {
        public string SortType { get; set; }
        public string Field { get; set; }

        public Sort(string field, string sortType = "asc")
        {
            Field = field;
            SortType = sortType;
        }
        public string Expression
        {
            get
            {
                return string.Format(" {0} {1} ", Field, SortType);
            }
        }
    }
}

　　分页类PageView：

View Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Common.Query
{
    public class PageView
    {
        /// <summary>
        /// 页面索引
        /// </summary>
        public int PageIndex { get; set; }

        /// <summary>
        /// 页面记录数
        /// </summary>
        public int PageSize { get; set; }

        /// <summary>
        /// 记录起始数
        /// </summary>  
        public int RecordStart { get; set; }
        
        
        public PageView()
        {

        }
        public PageView(string pageIndex, string pageSize)
        {

            if (pageIndex != null )
            {
                try
                {
                    PageIndex = Int32.Parse(pageIndex);
                }
                catch 
                {
                    PageIndex =1;
                }
               
            }
            if (pageSize != null)
            {
                try
                {
                    PageSize = Int32.Parse(pageSize);
                }
                catch
                {
                    PageSize = 10;
                }                
            }
           
        }

        public PageView(int recordStart, string pageSize)
        {
            if (pageSize != null)
            {
                try
                {
                    PageSize = Int32.Parse(pageSize);
                }
                catch
                {
                    PageSize = 10;
                }
            }

            PageIndex = (int)Math.Ceiling((double)recordStart / (double)PageSize);

        }
      
    }
}

　　其实，我原来的分页类里只有当前页码PageIndex和页面记录数PageSize，om传给后台的limit是页面记录数，而start居然是起始记录数（不得不说，om设计人员的思维模式……），因此不得不修改这个类来适应，加入重载初始化函数以及通过RecordStart和PageSize来换算出PageIndex。
　　网格类DataGrid是为了前后台交换数据用的：

View Code

using Common.Query;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Text;

namespace Model.Json
{
    public class DataGridRow
    {
        public string id { get; set; }
        public List<string> cell { get; set; }
    }
    public class DataGrid<T>:Object
    {
         public int total { get; set; }
         public List<T> rows { get; set; }
         public static DataGrid<T> ConvertFromList(List<T> list) 
        {
            DataGrid<T> data = new DataGrid<T>();

            if (list != null)
            {
                data.total = list.Count;
                data.rows = list;               
            }
            else
            {
                data.total = 0;
            }
            
            return data;
        }

         public static DataGrid<T> GetAllData(IQueryable<T> query)
         {
             DataGrid<T> data = new DataGrid<T>();

             if (query != null)
             {
                 data.total = query.Count();
                 data.rows = query.ToList();
             }
             else
             {
                 data.total = 0;
             }

             return data;
         }
         public static DataGrid<T> GetPageData(IQueryable<T> query,PageView pageView)
         {
             DataGrid<T> data = new DataGrid<T>();
             if (query != null)
             {
                 data.total = query.Count();
                 if (pageView != null)
                 {

                     if (pageView.PageSize > 0 && pageView.PageIndex >= 0)
                     {

                         query = query.Skip(pageView.PageIndex * pageView.PageSize).Take(pageView.PageSize);
                     }

                 }      
                 data.rows = query.ToList();
             }
             else
             {
                 data.total = 0;
             }

             return data;
         }
      
    }
 
}

　　前台还有一个部门树点击的事件处理，就是就部门的id传给后侧的网格：

      function TreeNodeClick(nodeData,event)
        {
            $('#datagrid').omGrid({ extraData: $.extend({ id: nodeData.id }, defaultSort) });
        }

 　　事实上，你看到的最终的结果，中间还是经历了一些曲折……

　　首先一个问题跟本节内容关系不大，但是本节中暴露出来了，就是实战三中，点击功能菜单后，在右侧业务区域中动态添加tab页，嵌入iframe，相关的js如下　　

　　function TreeNodeClick(node, event)
 {
      $("#tabs").omTabs('add', {
      title: node.text,
      content: '<iframe scrolling="yes" frameborder="0"  src=' + node.url + ' style="width:100%;height:100%;"></iframe>',
      closable: true,
      tabId:node.id
      });
}

　　咋看上去是没问题，添加了tab页，当时运行也没发现问题，加了内容后就出问题了，高度！高度不能自动适配，只显示大概几百像素，没有填充整个tab页，即使设置了style="width:100%;height:100%;也没用，而在easyui中就没这问题，直接可以实现完美的完全填充效果，查找资料，反复试验，最终采取下面这种方式勉强达到效果：

content: '<iframe id="frame" onload="$(this).height($(this).contents().find(' + "tabs" + ').height()-55)" scrolling="yes"  frameborder="0"  src=' + node.url + ' style="width:100%;height:100%"></iframe>'

　　即使用js在iframe加载完成后，动态获取tab标签页的高度然后减去55px，设置为iframe的高度，至于为什么设置为55，一是tab标签头部自身25px，另外30是一些margin、border占用的，目测和试验55效果最好，未在多浏览器多显示器下测试，可能还有问题。若你有更好的解决方式，欢迎留言说明，先行谢过。

　　第二个问题是关于服务器端排序问题，datagrid的colModel属性，可以设置各列的排序方式，客户端、服务器端或者自定义js函数，如果是采用服务器端排序，即设置 sort: 'serverSide'。另外，我后台分页，对IQureyable对象使用Skip方法，该方法要求必须有orderBy子句，从业务角度考虑，通常也需要在datagrid首次加载的时候设置一个默认排序字段和排序方式（asc或desc）。查看了官方示例和说明，datagrid自身属性没有排序相关内容，而是在其基础了外挂了一个排序插件，点击列标题的时候会向后台发送sortBy和sortDir。初始化的时候，则没有提供对外设置关于排序的方法和属性，因此，只能放到extraData属性中。结果问题就来了，调试时候发现，服务器端排序不起作用，发现前台传给后台的排序参数，始终是初始化中设置的Name和asc，点击列头根本不起作用。无奈之下只能查看om源码，幸好源码是开放的且注释比较多，找到了omGrid的_populate方法，大概在11040行，发现了问题所在，合并参数的时候，用初始化的参数，把排序两字段覆盖了，源代码如下：　

 var param =$.extend(true,{},this._extraData,op.extraData,{
                start : limit * (nowPage - 1),
                limit: limit,
                 _time_stamp_ : new Date().getTime()
            }); 

　　问题是找到了，但是om没有提供任何关于排序的方法或属性，用于控制点击列头来排序这个过程，全部内置了。无奈之下，只有修改源代码，把排序两个字段传了过去　　

 var param =$.extend(true,{},this._extraData,op.extraData,{
                start : limit * (nowPage - 1),
                limit: limit,
                sortBy: this._extraData.sortBy,
                sortDir: this._extraData.sortDir,
                _time_stamp_ : new Date().getTime()
            });            

　　小改动，改完后服务器端排序总算正常了，理论上对其他地方也没影响，应该不会因为改动带来新的问题。要设置初始加载后的默认排序字段，自身属性不提供，只能通过extraData这里加上，若自定义名字，不跟sortBy和sortDir重名，则后台方法就要分别处理，还要区分两种情况，若重名，则又会被初始参数覆盖，左右为难，这应该算一个BUG吧？

　　本篇到此为止，这就是网格控件，实现了取数、展现、排序和分页，下节介绍增、删、改、查。

　　最后，祝园子里各位新年快乐！