我国唯一的项目管理信息化门户网站,国内项目管理软件资讯服务提供商

登录 注册
当前位置:首页 > IT信息化 > 正文

基于jQuery EasyUI的项目管理系统Web前端设计

2019-04-01 来源:《电脑编程技巧与维护》作者:盘锦职业技术学院信息网络中心 谷洪彬
      摘要:Web系统最开始是作为网页和网站载体,网页的设计从模仿纸质媒体开始,而不是从模仿桌面应用程序开始,所以在桌面应用迁移到Web端时,很多设计也是采用了网页设计的风格。其优点是采用现有技术,开发周期短,缺点是交互性和美观性差。由于JavaScript尤其是jQuery在Web前端的广泛应用,jQuery的扩展库例如EasyUI模仿了传统桌面应用的界面设计和良好的交互性,得到广泛应用。通过jQuery EasyUI实现了项目管理系统的Web前端设计,具有较好的交互性和用户友好性。
      关键词:jQueryEasyUI技术;Web前端设计
      EasyUI是基 于jQuery的一套网页前端布局插件,在风格上模仿了传统桌面程序的布局,具有良好的交 互性和用户友好性。在 设 计 项 目 管 理 系 统Web前端 时,除了登录界面,都采取了EasyUI技术。EasyUI有20多种布局和控件,采用了其中的5种。以下为不同页面和局部的设计:
      1、项目管理系统总体布局
      系统管理员登录后的界面,采 用 了EasyUI的lay-out。缺省的按东南西北中5个方位的布局如图1所示。
      去掉了右侧的East,页面代码如下:
      2、项目列表
      项目列表位于页面的左侧(west),用 树 形 结 构(tree)来实现,如图2所示。
      3、子项目布局
      4、表格
      涉及到项目资金或者其他适合用表格来实现的地方,EasyUI的数 据 表 格(datagrid)更美 观 实 用,而 且可以即时添加、删除和更新数据。如图3所示。
      这里的数据调用采用了JSON技术,代 码 第 二 行 的url:‘datagrid_data1.json’可以代替为从数据表中取值的代码。
      5、弹出对话框
      对话框的布局如下:
      打开和关闭对话框的JavaScript代码如下:
      对打开和关闭对话框的JavaScript代码的调用方法如下:
      6、结语
      前端设计者从传统的网页Web转到EasyUI方式 的设计,需要一些时间来学习和适应。对于没有美工基础的程序开发人员,也 可 以 用EasyUI进行Web系统 的 前端 设 计。EasyUI封装 了jQuery和CSS的很 多 细 节,学习和使用的成本低。
      参考文献
      [1]汤晓 燕.基于EasyUI框架 的Web异步 树 实 现[J] .电脑编程技巧与维护,2012, 6(12):92-93.
      [2]喻健,朱 三 元.基于Entity Framework和easyUI的毕业 论 文 管 理 系 统[J] .软件 工 程,2016,12(12):40-42.
      [3]邓海,潘智,郭志 峰.基于MVC+EasyUI三层 架 构的权限管理模 块设计与应用[J] .柳钢科技,2017,4(2):31-33
      [4]朱鹏,郭亚莎.基于EasyUI框架 的Datagrid数据 呈现[J].电子世界,2017, 3(5):165-166.(本文于2017年发表于《电脑编程技巧与维护》)
分享到:

免责声明:
  1、项目管理信息化网发布的所有资讯与文章是出于为业界传递更多信息之目的,并不意味着赞同其观点或证实其描述。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请浏览者仅作参考,并请自行核实相关内容。
  2、本站部分内容转载于其他网站和媒体,版权归原作者或原发布媒体所有。如文章涉及版权等问题,请联系本站,我们将在两个工作日内进行删除或修改处理。敬请谅解!

延伸阅读:

more>

会议活动

more>

公开课

more>

PMO

Copyright © 2021 项目管理信息化网 版权所有 京ICP备17062359号-9 如转载本站文章,请注明原作者和原发布媒体

本着互联网分享精神,本站部分内容转载于其他网站和媒体,如内容涉及版权等问题,请联系本站进行删除或修改处理

客服电话:010-89506650 89504891 非工作时间可联系:18701278071(微信) QQ在线:574888227

新闻与原创文章投稿:tougao#cpmta.com 客服邮箱:info#cpmta.com(请将#换成@)

我国唯一的项目管理信息化门户网站,国内项目管理软件资讯服务提供商,隶属卓橡公司

项目管理信息化微信公众号

PMO大会微信公众号