如何使用EasyUI显示表格界面
还记得前面有篇博客叫---使用TT模板+mvc+wcf实现简单查询,这篇博文的末尾,小编贴了一张查询出来的结果图,那么这篇博客的中新来了,如何使用EasyUI显示出表格样式的界面,以前学习CS的时候,我们的界面都是用控件直接进行拖拽,然后调整好布局,使其美观整齐即可,但是现在不一样了,小编现在接触的是BS的项目,现在的界面不像BS一样可以进行直接拖拽,现在的界面需要一句一句的代码写出来,没有接触过的新鲜玩意让小编有种狗啃刺猬的赶脚,然后小编就开始找各种资料,参考其她小伙伴的系统,终于,在小编的死缠烂打之下,这个界面伴随着过年的气氛,慢慢长大,接下来,小编简单的总结一下这个小功能的实现:
首先,我们要在服务端的数据契约里面建立相应的数据契约,代码如下:
<span style="font-size:18px;"><span style="font-size:18px;">/************************************************* 作者:丁国华 小组:档案管理系统 说明:场所管理表 创建日期: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 { [DataMember] [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 style="font-size:18px;"><span style="font-size:18px;"><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" style="height:auto!important;"> <div class="easyui-panel" title="显示查询信息" style="width:880px; height:auto!important; margin-left:auto; margin-right:auto; padding: 15px 10px 5px 10px;"> @*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>
最后,我们在Controller里面添加,我们需要的表头,以及各种假数据:
<span style="font-size:18px;"><span style="font-size:18px;">/********************************************** 作者:丁国华 小组:档案管理系统-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; } public JsonResult LoadPages(string strLike) { DataGridView dgModel; try { 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, }; lstitle.Add(enrecord); } //生成规定格式的json字符串发挥给异步对象 //生成符合easyui格式的数据 dgModel = new DataGridView() { total = lstitle.Count, rows = lstitle, footer = null }; } catch (Exception ex) { throw ex; } return Json(dgModel, JsonRequestBehavior.AllowGet); } public JsonResult Query() { DataGridView dgModel; try { 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, }; lstitle.Add(enrecord); } //生成规定格式的json字符串发挥给异步对象 //生成符合easyui格式的数据 dgModel = new DataGridView() { total = lstitle.Count, rows = lstitle, footer = null }; } catch (Exception ex) { throw ex; } return Json(dgModel, JsonRequestBehavior.AllowGet); } } }</span></span>
显示效果如下:
相比较前一篇博客小编贴出来的搜索结果图,这张图是不是更加的整齐和美观nie,但是这些看似很简单的东西,在小编不了解她们的时候,那叫一个不会啊,可是一路走过来,发现所有的事情都没有想象中的那么困难,所以加油吧,小伙伴们。
小编寄语:这篇博客,小编主要简单的介绍了如何使用UI让界面显示的如同表格的样式,希望可以给其他小伙伴提供一些帮助,学生档案管理项目,未完待续......
如何使用EasyUI显示表格界面的更多相关文章
- easyui学习笔记7—在手风琴中显示表格
在这一篇中我们看看如何在手风琴里面显示表格数据的. 1.先看看引用的资源 <link rel="stylesheet" type="text/css" h ...
- EasyUI的后台界面
EasyUI的后台界面搭建及极致重构 〇.前言 要了解一个东西长什么样,至少得让我们能看到,才能提出针对性的见解.所以,为了言之有物,而不是凭空漫谈,我们先从UI说起,后台管理页面的UI我们将使用应用 ...
- Easyui 编辑表格行删除
1.问题描述 easyui 编辑表格新增一条数据后,删除最后一行删除不了,原因是没有提交数据acceptChanges. 源码中deleteRow方法,根据坐标获取行html,方法为opts.find ...
- 详解如何利用FarPoint Spread表格控件来构造Winform的Excel表格界面输入
我们先来简单了解一下WinForm和FarPoint,WinForm是·Net开发平台中对Windows Form的一种称谓.而FarPoint是一款模拟EXCEL的控件.它可以根据用户的要求实现很大 ...
- [IOS NSUserDefaults]的使用:登陆后不再显示登录界面。
之前搜了好多地方都没找到实现“登陆后不再显示登录界面,而默认自动登录”的方法. 待我发现有种存储方式叫NSUserDefaults的时候,立马又感觉新技能get了. 简介: NSUserDefault ...
- vncserver和Ubuntu Xfce4远程桌面环境的配置,解决不显示图形界面
vncserver和Ubuntu Xfce4远程桌面环境的配置 参考的http://blog.163.com/thinki_cao/blog/static/8394487520130301453180 ...
- SharedPreference 存储小量数据,一般首次启动显示引导界面就用这个。
写://添加一个SharedPreference并传入数据SharedPreference sharedPreferences = getSharedPreferences("share_d ...
- EL表达式结合页面JSTL使用 迭代显示表格
1.迭代显示表格 <%@ page isELIgnored="false"%><%@ taglib uri="/WEB-INF/struts-bean. ...
- 问题记录-Activity跳转后显示空白界面
前两天写一个简易安卓记事本,从主界面跳转到添加内容界面总是显示空白. 明明有setContentView xml文件在可视化开发环境下也正常显示.后经前辈指点,原来是复写onCreate函数时出现了问 ...
随机推荐
- Codeforces Round#402(Div.1)掉分记+题解
哎,今天第一次打div1 感觉头脑很不清醒... 看到第一题就蒙了,想了好久,怎么乱dp,倒过来插之类的...突然发现不就是一道sb二分吗.....sb二分看了二十分钟........ 然后第二题看了 ...
- bzoj2339[HNOI2011]卡农 dp+容斥
2339: [HNOI2011]卡农 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 842 Solved: 510[Submit][Status][ ...
- VMware下安装Linux(CentOs6.3)操作系统
VMware 10.0.2 CentOs 6.3 VMware的安装以及CentOs的下载比较简单,这里不再描述 1.创建新的虚拟机 2.选择典型 3.选择稍后安装操作系统 4.选择如图所示 5.虚拟 ...
- Express 配置 https / 443 安全链接
按照教程已配置成功 前一部分内容参照 https://blog.csdn.net/chenyufeng1991/article/details/60340006 前半部分是生成证书文件,关键部 ...
- IE10以下兼容H5中的placeholder 以及改变它默认颜色
placeholder是H5<input>的属性之一,可惜在IE10以下不支持,万恶的IE!不过正因为有IE,才多了很多捣鼓,添了乐趣.不支持就不支持呗,自己动手丰衣足食,我们可以用js模 ...
- Nginx+tomcat配置集群负载均衡
开发的应用采用F5负载均衡交换机,F5将请求转发给5台hp unix服务器,每台服务器有多个webserver实例,对外提供web服务和socket等接口服务.之初,曾有个小小的疑问为何不采用开源的a ...
- 罗列Linux发行版的基础目录名称,命令法则和功能
罗列Linux发行版的基础目录名称命名法则及功用规定 目录描述 /主层次 的根,也是整个文件系统层次结构的根目录 /bin存放在单用户模式可用的必要命令二进制文件,所有用户都可用,如 cat.ls.c ...
- ubuntu 修改计算机名
ubuntu装好系统之后打开终端,命令行前边会有一长串名字,看起来好烦(格式为:用户名@计算机名:~$),所以改计算机名: 需要改两个文件: sudo gedit /etc/hostname sudo ...
- Django REST Framework 最佳实践
Django REST framework 是一个强大且灵活的工具包,用以构建Web APIs. 为什么要使用REST framework? - 在线可视的API,对于赢得你的开发者们十分有用 - 验 ...
- Dynamics 365 Web Api之基于single-valued navigation property的filter查询
本篇要讲的是dynamics 新版本中web api的一个改进功能,虽然改进的很有限,但至少是改进了. 举个例子,我们现在知道联系人的名字vic,我们想找出客户记录中主要联系人名字为vic的所有客户, ...