如何使用EasyUI显示表格界面

       还记得前面有篇博客叫---使用TT模板+mvc+wcf实现简单查询，这篇博文的末尾，小编贴了一张查询出来的结果图，那么这篇博客的中新来了，如何使用EasyUI显示出表格样式的界面，以前学习CS的时候，我们的界面都是用控件直接进行拖拽，然后调整好布局，使其美观整齐即可，但是现在不一样了，小编现在接触的是BS的项目，现在的界面不像BS一样可以进行直接拖拽，现在的界面需要一句一句的代码写出来，没有接触过的新鲜玩意让小编有种狗啃刺猬的赶脚，然后小编就开始找各种资料，参考其她小伙伴的系统，终于，在小编的死缠烂打之下，这个界面伴随着过年的气氛，慢慢长大，接下来，小编简单的总结一下这个小功能的实现：

        首先，我们要在服务端的数据契约里面建立相应的数据契约，代码如下：

 span span /************************************************* 

作者：丁国华

小组：档案管理系统

说明：场所管理表

创建日期：2015年2月11日 16:33:28

版本号：版权所有

*************************************************/

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Runtime.Serialization;

using System.Threading.Tasks;

using System.Data;

using CustomAttributes;

namespace ITOO.ArchivesManager.Contracts

 [DataContract ]

 [Classes("档案信息表")]

 public class ArchivesInfoContract //为了防止和Model冲突，将ArchivesInfo改为ArchivesALLInfo


 [Colum("序号", DbType = DbType.Guid )]

 public System.Guid ArchivesGraduationArticleID { get; set; }

 [DataMember] 

 [Colum("姓名", DbType = DbType.String)]

 public String StudentName { get; set; }

 [DataMember] 

 [Colum("学号", DbType = DbType.String)]

 public String StudentNo { get; set; }

 [DataMember]

 [Colum("档案编号", DbType = DbType.String)]

 public string ArchivesNo { get;set; }

 [DataMember]

 [Colum("存放区域(1级类型名称)", DbType = DbType.String)]

 public string SavePlace { get; set; }

 [DataMember]

 [Colum("房间编号", DbType = DbType.String)]

 public string ArchivesRoomNo { get; set; }

 [DataMember]

 [Colum("入档人", DbType = DbType.String)]

 public string SavePersonNo { get; set; }

 [DataMember]

 [Colum("是否删除", DbType = DbType.Int32 )]

 public Int32 IsDeleteArchivesInfo { get; set; }

 [DataMember]

 [Colum("时间戳", DbType = DbType.DateTime )]

 public string AcademyYear { get; set; }

 /span /span 

       然后，我们在客户端里面添加视图，具体代码如下所示：

 span span script src="../../Scripts/KongJianJS/KongJianJS.js" /script 

 script src="../../Scripts/AutoComplete.js" /script 

 div id="mainBody" style ="width :100%;margin-left :auto ;margin-right :auto ;" 

 @*加载部分页面*@

 @*1、加载搜素框*@

 @{Html.RenderPartial("../../Views/ControlsPartial/SearchboxPartial");}

 div id="ContentAreas" 

 div title="显示查询信息" 

 @*2、加载按钮*@

 @{Html.RenderAction("PermissionBtnsPartial", "ControlsPartial");}

 @*3、调用 对应的业务Controller 中的表头数据*@

 @{Html.RenderAction("ShowTitleProperties", "IndoorArchivesManager");}

 @*4、加载数据表格中 dg 中添加参数---查询业务数据的url*@

 @{Html.RenderAction("DataGrid", "ControlsPartial", new { url = "/IndoorArchivesManager/LoadPages" });}

 /div 

 /div 


 /div /span /span 

 span span /**********************************************

作者：丁国华

小组：档案管理系统-10期开发小组

说明：室内档案管理

创建日期：2015-2-23 14:58:33

版本号：V1.0.0

**********************************************/

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Text;

using ITOO.Archives.Model;

using ITOO.ArchivesManager.Contracts;

using System.Web.Script.Serialization;

using ITOO.ArchivesManager.Contracts.DataContracts.EasyUIModel;

using ITOO.UIService.Contracts;

using QueryProperties = ITOO.UIService.Contracts.QueryPropertiesViewModel;

using ITOO.ArchivesManagerClient.Controllers;

namespace ITOO.ArchivesManager.Client.Controllers

 public class IndoorArchivesManagerController:Controller

 public ActionResult IndoorArchivesManagerIndex()

 return View();

 public void ShowTitleProperties()

 List QueryProperties lsPro = new List QueryProperties 

 QueryProperties TitleHeader1 = new QueryProperties();

 TitleHeader1.QueryId = "1".ToString();

 TitleHeader1.EntityDesc = "室内档案管理";

 TitleHeader1.EntityName = "RoomAreaManagerModel";

 TitleHeader1.IsShow = "Y";

 TitleHeader1.PropertyDesc = "档案编号";

 TitleHeader1.PropertyName = "ArchivesNo";

 lsPro.Add(TitleHeader1);

 QueryProperties TitleHeader2 = new QueryProperties();

 TitleHeader2.QueryId = "1".ToString();

 TitleHeader2.EntityDesc = "室内档案管理";

 TitleHeader2.EntityName = "RoomAreaManagerModel";

 TitleHeader2.IsShow = "Y";

 TitleHeader2.PropertyDesc = "存放区域";

 TitleHeader2.PropertyName = "SavePlace";

 lsPro.Add(TitleHeader2);

 QueryProperties TitleHeader3 = new QueryProperties();

 TitleHeader3.QueryId = "1".ToString();

 TitleHeader3.EntityDesc = "室内档案管理";

 TitleHeader3.EntityName = "RoomAreaManagerModel";

 TitleHeader3.IsShow = "Y";

 TitleHeader3.PropertyDesc = "学号";

 TitleHeader3.PropertyName = "StudentNo";

 lsPro.Add(TitleHeader3);

 QueryProperties TitleHeader4 = new QueryProperties();

 TitleHeader4.QueryId = "1".ToString();

 TitleHeader4.EntityDesc = "室内档案管理";

 TitleHeader4.EntityName = "RoomAreaManagerModel";

 TitleHeader4.IsShow = "Y";

 TitleHeader4.PropertyDesc = "姓名";

 TitleHeader4.PropertyName = "StudentName";

 lsPro.Add(TitleHeader4);

 QueryProperties TitleHeader5 = new QueryProperties();

 TitleHeader5.QueryId = "1".ToString(); ;

 TitleHeader5.EntityDesc = "室内档案管理";

 TitleHeader5.EntityName = "RoomAreaManagerModel";

 TitleHeader5.IsShow = "Y";

 TitleHeader5.PropertyDesc = "档案年份";

 TitleHeader5.PropertyName = "AcademyYear";

 lsPro.Add(TitleHeader5);

 //List QueryProperties lt = UIPropertiesManager.getUIProperties("RecordBorrowContracts");

 //将数据存入到TempData中，名字统一：都为：ltProp.

 TempData["ltProp"] = lsPro;


 int pagesize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);

 int pagenum = Request["page"] == null ? 1 : int.Parse(Request["page"]);


 //声明得到的职称集合，并调用服务层得到记录

 List ArchivesInfoContract lstitle = new List ArchivesInfoContract 

 for (int i = (pagenum - 1) * pagesize; i (pagenum - 1) * pagesize + pagesize; i++)

 ////下面这两句，删除了也没有什么不一样，为什么？

 //DateTime dt = new DateTime(2015, 02, 14, 08, 00, 0);

 //dt.ToString("yyyy-MM-dd hh:mm:ss ");

 ArchivesInfoContract enrecord = new ArchivesInfoContract()

 StudentName="等等",

 ArchivesNo="A105",

 SavePlace="一区",

 StudentNo="100",

 AcademyYear = Convert.ToString(DateTime.Now.Year),

 //AcademyYear = DateTime.Now,


 int pagesize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);

 int pagenum = Request["page"] == null ? 1 : int.Parse(Request["page"]);


 //声明得到的职称集合，并调用服务层得到记录

 List ArchivesInfoContract lstitle = new List ArchivesInfoContract 

 for (int i = (pagenum - 1) * pagesize; i (pagenum - 1) * pagesize + pagesize; i++)

 ////下面这两句，删除了也没有什么不一样，为什么？

 //DateTime dt = new DateTime(2015, 02, 14, 08, 00, 0);

 //dt.ToString("yyyy-MM-dd hh:mm:ss ");

 ArchivesInfoContract enrecord = new ArchivesInfoContract()

 StudentName = "查询出来的",

 ArchivesNo = "A105",

 SavePlace = "一区",

 StudentNo = "100",

 AcademyYear = Convert.ToString(DateTime.Now.Year),

 //AcademyYear = DateTime.Now,


       显示效果如下：

       

       相比较前一篇博客小编贴出来的搜索结果图，这张图是不是更加的整齐和美观nie，但是这些看似很简单的东西，在小编不了解她们的时候，那叫一个不会啊，可是一路走过来，发现所有的事情都没有想象中的那么困难，所以加油吧，小伙伴们。

       小编寄语：这篇博客，小编主要简单的介绍了如何使用UI让界面显示的如同表格的样式，希望可以给其他小伙伴提供一些帮助，学生档案管理项目，未完待续......

 


  easyui datagrid 表格动态隐藏部分列的展示 

 1.一套代码中，可能不同的项目情况都在用，但是可能不同的项目要求展示的datagrid列的内容并不一致，所以能够动态的显示部分datagrid列的内容。

   即datagrid的中的某一列，这个项目要求显示那个项目要求不显示。


  easyui datagrid 表格适应屏幕 

 1.项目后台系统使用easyui，datagrid 的数据设置为自动适应屏幕，那么对于笔记本的话，就会显得有的小，可以通过设置datagrid属性，进行固定长度的设置

$( #gridTable ).


  EasyUI中tree,Datagrid,pagenation的使用EasyUI中Datagrid和pagenation进行关联时，再次点击pagenation时让表格数据显示的问题 

// 获取选中一行的情况,下面的一个参数可以代表一个DataGridfunction getSelected(dialogEle,dataFileTextEle) { // 获取选中一行的情况。 var datagrid = $( #fileInfoDataGrid ).datagrid( getSelected if (datagrid == null) { $.messager.a