还记得前面有篇博客叫---使用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显示表格界面的更多相关文章

  1. easyui学习笔记7—在手风琴中显示表格

    在这一篇中我们看看如何在手风琴里面显示表格数据的. 1.先看看引用的资源 <link rel="stylesheet" type="text/css" h ...

  2. EasyUI的后台界面

    EasyUI的后台界面搭建及极致重构 〇.前言 要了解一个东西长什么样,至少得让我们能看到,才能提出针对性的见解.所以,为了言之有物,而不是凭空漫谈,我们先从UI说起,后台管理页面的UI我们将使用应用 ...

  3. Easyui 编辑表格行删除

    1.问题描述 easyui 编辑表格新增一条数据后,删除最后一行删除不了,原因是没有提交数据acceptChanges. 源码中deleteRow方法,根据坐标获取行html,方法为opts.find ...

  4. 详解如何利用FarPoint Spread表格控件来构造Winform的Excel表格界面输入

    我们先来简单了解一下WinForm和FarPoint,WinForm是·Net开发平台中对Windows Form的一种称谓.而FarPoint是一款模拟EXCEL的控件.它可以根据用户的要求实现很大 ...

  5. [IOS NSUserDefaults]的使用:登陆后不再显示登录界面。

    之前搜了好多地方都没找到实现“登陆后不再显示登录界面,而默认自动登录”的方法. 待我发现有种存储方式叫NSUserDefaults的时候,立马又感觉新技能get了. 简介: NSUserDefault ...

  6. vncserver和Ubuntu Xfce4远程桌面环境的配置,解决不显示图形界面

    vncserver和Ubuntu Xfce4远程桌面环境的配置 参考的http://blog.163.com/thinki_cao/blog/static/8394487520130301453180 ...

  7. SharedPreference 存储小量数据,一般首次启动显示引导界面就用这个。

    写://添加一个SharedPreference并传入数据SharedPreference sharedPreferences = getSharedPreferences("share_d ...

  8. EL表达式结合页面JSTL使用 迭代显示表格

    1.迭代显示表格 <%@ page isELIgnored="false"%><%@ taglib uri="/WEB-INF/struts-bean. ...

  9. 问题记录-Activity跳转后显示空白界面

    前两天写一个简易安卓记事本,从主界面跳转到添加内容界面总是显示空白. 明明有setContentView xml文件在可视化开发环境下也正常显示.后经前辈指点,原来是复写onCreate函数时出现了问 ...

随机推荐

  1. 谷歌发布 TensorFlow Serving

    TensorFlow服务是一个灵活的,高性能的机器学习模型的服务系统,专为生产环境而设计. TensorFlow服务可以轻松部署新的算法和实验,同时保持相同的服务器体系结构和API. TensorFl ...

  2. C#之Action和Func的用法

    以前我都是通过定义一个delegate来写委托的,但是最近看一些外国人写的源码都是用action和func方式来写,当时感觉对这很陌生所以看起源码也觉得陌生,所以我就花费时间来学习下这两种方式,然后发 ...

  3. 在移动端画出真正的1px边框

    一.问题    写H5的样式时候,设置元素的边框为1px,不幸的事情在IOS设备上发生了,设计师会说,咦,边框怎么那么大,这是2px了吧?改成1px.我明明设置成1px了啊. 二.为什么边框变粗了? ...

  4. Python小代码_13_生成两个参数的最小公倍数和最大公因数

    def demo(m, n): if m > n: m, n = n, m p = m * n while m != 0: r = n % m n = m m = r return (int(p ...

  5. 搭建 RabbitMQ Server 高可用集群

    阅读目录: 准备工作 搭建 RabbitMQ Server 单机版 RabbitMQ Server 高可用集群相关概念 搭建 RabbitMQ Server 高可用集群 搭建 HAProxy 负载均衡 ...

  6. opencv 3.1.0 访问像素值的三种方法(C++)

    三种方法分别问: 指针访问:void colorReduce_ptr(cv::Mat &inputImage, cv::Mat &outputImage, int div); 迭代器访 ...

  7. Linux完全卸载Oracle的操作步骤

    卸载步骤如下:1.运行$ORACLE_HOME/bin/localconfig delete2.rm -rf $ORACLE_BASE/*3.rm -f /etc/oraInst.loc etc/or ...

  8. Python3 多线程

    多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进 ...

  9. Android Multimedia框架总结(二十三)MediaCodec补充及MediaMuxer引入(附案例)

    请尊重分享成果,转载请注明出处,本文来自逆流的鱼yuiop,原文链接:http://blog.csdn.net/hejjunlin/article/details/53729575 前言:前面几章都是 ...

  10. eval和列表解析的一处陷阱

    >>> def f(): a=1 return [i+a for i in range(3)] >>> f() [1, 2, 3] >>> def ...