位置: 编程技术 - 正文

基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用(mvc使用)

编辑:rootadmin

推荐整理分享基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用(mvc使用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:mvc easyui,asp.net mvc easyui,mvc ui,mvc示例,mvc ui,mvc示例,mvc easyui,mvc easyui,内容如对您有帮助,希望把文章链接给更多的朋友!

在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔,本篇继续介绍其中界面部分的一些使用知识,包括控件的赋值、取值、清空,以及相关的使用。

我们知道,一般Web界面包括的界面控件有:单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息、列表控件等,这些界面控件的操作都有哪些不同,下面我们来逐一进行介绍。

1、单行文本框

使用easyui的控件,单行文本可以使用easyui-validatebox样式即可,类型为text的控件。

界面代码如下所示:

或者

赋值给界面控件代码如下:

获取界面控件的值代码如下:

如果是标签Lable控件,这需要把val 使用text替代即可,如下代码所示:

对于easyui-validatebox样式的控件,一般来说,有几个常见属性可以设置他们的。

2、多行文本框

easyui的界面样式,可以使用easyui-validatebox,或者默认的textarea即可。

界面代码如下所示:

或者

赋值给界面控件代码如下:

获取界面控件的值代码如下:

3、密码文本框

密码文本框和常规的文本框一样,只是输入字符的时候,系统做了屏蔽显示而已,把它作为一个来独立说明,也是因为它也是常见输入的一种。

界面代码如下所示:

赋值给界面控件代码如下:

获取界面控件的值代码如下:

4、下拉列表Combobox

常见的EasyUI的ComboBox是可以输入,也可以从列表选择的内容的输入控件。

界面代码如下所示:

绑定下拉列表的数据源代码如下:

设置控件的选择的内容代码如下:

获取界面控件的值代码如下:

而利用标准的Select控件虽然可以实现从列表选择,不过不够ComboBox控件那么灵活方便,Select控件的界面代码如下:

5、日期输入控件

easyui使用class=‘easyui-datebox'来标识日期控件,从弹出的层中选择正确的日期,是一种非常常见的界面输入控件,可以替代MyDatePicker日期输入控件。

弹出窗体界面效果如下。

它的界面代码如下所示:

赋值给界面控件代码如下:

获取界面控件的值代码如下:

6、数值输入控件

easyui使用样式easyui-numberbox标识为数值类型,其表现为文本框,但只能输入数值。

界面代码如下所示:

或者使用‘easyui-numberspinner'样式来标识,可以上下调节数值。

赋值给界面控件代码如下:

基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用(mvc使用)

或者

获取界面控件的值代码如下:

或者

7、单项选择Radio控件

单项选择Radio控件,是在多项内容里面选择一个选项进行保存或者显示。

界面代码如下所示:

赋值给界面控件代码如下:

获取界面控件的值代码如下:

或者使用Comobo控件作为单项选择的控件也是可以的,界面效果如下所示。

其界面代码如下所示:

8、复选框

复选框是在一项或多项内容中,选择零项或者多项的一个输入界面控件。

界面代码如下所示:

由于复选框的一些特殊性质,在表单提交的时候,如果没有勾选的选型,使用serializeArray()方法构造的数据,复选框的值则不会被提交。

基于这个原因,我们可以使用Select控件进行替代,实现复选项的功能,而不影响

以上代码的使用。

使用Select控件的代码如下所示。

赋值给界面控件代码如下:

获取界面控件的值代码如下:

9、表格控件DataGrid

easyui的列表控件,可以通过指定table的class属性为easyui-datagrid即可实现表格的定义,界面代码如下所示:

不过为了避免使用脚本定义datagrid导致多次初始化的问题,我们一般只需要指定一个table代码即可,界面如下所示

而表格控件的数据加载,我们使用javascript进行初始化,初始化后的表格界面显示效果如下所示。

Javascript代码如下所示,其中的width: function () { return document.body.clientWidth * 0.9 }是用来实现宽度自适应的一个操作。

对于查询按钮触发的数据后台查询及数据绑定操作,javascript代码如下所示:

通过构造一些查询参数并传递相应的值,后台根据这些参数,从对应控制器的分页方法 FindWithPager 获取相应的分页数据,并绑定到grid控件中。

另外,如果需要在grid里面增加一些图片或者链接什么的,应该如何操作呢?

如下界面所示的效果:

首先需要在初始化代码里面增加列的formatter回调函数,如下所示。

在formatter回调函数里面添加逻辑代码,判断是否可见,其实就是增加两个图片按钮,但是图片按钮的样式设置,必须在加载数据完毕后才能操作,因此需要在函数里面处理。

如果显示的图片不完整,设置行的自动调整高度属性为true即可。

autoRowHeight: true

、树形控件

虽然easyui也有Tree控件,不过我较喜欢使用zTree这个树形控件,这个是一个免费的Jquery树控件。

引用代码如下所示:

初始化在Tree树控件的界面代码如下所示:

、布局控件

EasyUI通过DIV层来控制布局的显示,DIV里面增加一个Region的属性用来区分属于哪个区域,如下图是我Web开发框架的界面布局效果图。

界面代码如下所示:

我们详细查看主工作区的代码,如下所示。

其中字典管理里面还有子布局的展示,我们查看字典管理里面界面代码,如下所示。

、弹出式对话框

EasyUI弹出式对话框用的很多,对话框的界面代码放在DIV层里面,一般在界面整个界面加载后中已经初始化了,只是我们根据条件相似适当的层即可,这样就形成了弹出式对话框,弹出式对话框有一个遮罩的效果。

界面代码如下所示:

、提示信息

在常规的Web界面提示里面,我们一般用纯粹的javascript的alert函数来进行信息的提示,如果在基于EasyUI的界面布局和演示里面,使用这个提示显然会和界面演示不够匹配,因此我们使用messager类来进行相应的提示信息处理,简单的脚本提示代码如下。

提示信息也可以更加丰富,添加图标等信息,界面代码如下所示。

对于一般的删除操作,一般有一个提示确认的消息框,这个messager类也进行了封装处理,效果也不错。

界面代码如下所示。

标签: mvc使用

本文链接地址:https://www.jiuchutong.com/biancheng/386373.html 转载请保留说明!

上一篇:基于JavaScript获取鼠标位置的各种方法(javascript获取html元素的方法)

下一篇:Sublime Text 3常用插件及安装方法

  • PHP:pg_trace()的用法_PostgreSQL函数(php -i)

    PHP:pg_trace()的用法_PostgreSQL函数(php -i)

  • SQL Server 数据库分离与附加 就这么简单!(sqlserver数据库和mysql区别)

    5. 在下图的分离数据库窗口中列出了我们要分离的数据库名称。请选中“更新统计信息”复选框。若“消息”列中没有显示存在活动连接,则“状态”列显示为“就绪”;否则显示“未就绪”,此时必须勾选“删除连接”列的复选框。

    6. 分离数据库参数设置完成后,单击底部的”确定”按钮,就完成了所选数据库的分离操作。这时在对象资源管理器的数据库对象列表中就见不到刚才被分离的数据库名称student_Mis了(如下图)。

    三、附加数据库

    1. 将需要附加的数据库文件和日志文件拷贝到某个已经创建好的文件夹中。出于教学目的,我们将该文件拷贝到安装SQL Server时所生成的目录DATA文件夹中。

    2. 在下图窗口中,右击数据库对象,并在快捷菜单中选择“附加”命令,打开“附加数据库”窗口。

    3. 在“附加数据库”窗口中,单击页面中间的“添加”按钮,打开定位数据库文件的窗口,在此窗口中定位刚才拷贝到SQL Server的DATA文件夹中的数据库文件目录(数据文件不一定要放在“DATA”目录中),选择要附加的数据库文件(后缀.MDF,如下图)。

    4. 单击“确定”按钮就完成了附加数据库文件的设置工作。这时,在附加数据库窗口中列出了需要附加数据库的信息(如下图)。如果需要修改附加后的数据库名称,则修改“附加为”文本框中的数据库名称。我们这里均采用默认值,因此,单击确定按钮,完成数据库的附加任务。

    完成以上操作,我们在SSMS的对象资源管理器中就可以看到刚刚附加的数据库student_Mis (如下图)。

    以上操作可以看出,如果要将某个数据库迁移到同一台计算机的不同SQL Server实例中或其它计算机的SQL Server系统中,分离和附加数据库的方法是很有用的。

    深入浅析SQL封装、多态与重载 面向对象1.类:众多对象抽象出来的2.对象:类实例化出来的3.类的定义关键字class4.类里面包含成员变量成员属性成员方法5.面向对象三大特性(1)封装

    在Sql Server中调用外部EXE执行程序引发的问题 一、先开启xp_cmdshell打开外围应用配置器—功能的外围应用配置器—实例名DatabaseEnginexp_cmdshell—启用二、解决方法usemasterExecxp_cmdshell'mkdird:csj" class="img-responsive" alt="SQL Server 数据库分离与附加 就这么简单!(sqlserver数据库和mysql区别)">

    SQL Server 数据库分离与附加 就这么简单!(sqlserver数据库和mysql区别)

  • MySQL分组查询Group By实现原理详解(mysql查询分组后 组内数据)

    MySQL分组查询Group By实现原理详解(mysql查询分组后 组内数据)

  • 苹果OS X El Captain 10.11正式版升级问题汇总(苹果手机价格)

    苹果OS X El Captain 10.11正式版升级问题汇总(苹果手机价格)

  • 使用node.js半年来总结的 10 条经验(node.js使用教程)

    使用node.js半年来总结的 10 条经验(node.js使用教程)

  • CCKiller:Linux轻量级CC攻击防御工具,秒级检查、自动拉黑和释放

    CCKiller:Linux轻量级CC攻击防御工具,秒级检查、自动拉黑和释放

  • 简介Linux中cp和mv搭配{,}在shell当中的用法(linux的cp和mv)

    简介Linux中cp和mv搭配{,}在shell当中的用法(linux的cp和mv)

  • TypeScript具有的几个不同特质(typescript的缺点)

    TypeScript具有的几个不同特质(typescript的缺点)

  • 在报税显示缺少发票信息
  • 牲畜资产科目包括哪些
  • 有进项发票没有销项发票
  • 小规模申请专票的申请理由怎么写
  • 员工交通费补贴标准
  • 车量购置税申报流程是什么样的?
  • 人力资源外包服务增值税税率
  • 房地产形象海报
  • 企业招待客户的费用
  • 以固定资产出资设立企业
  • 销售中有运费收入吗
  • 餐费可以入成本吗
  • 房产税和土地使用税计入什么科目
  • ktv的发票可以报销吗
  • 模拟评估了是什么意思
  • 外协加工费会计分录
  • 当期亏损需要提企业所得税吗财务报表
  • 购买原材料并作会计分录
  • 车位租赁费和房屋租赁能开一张发票吗
  • 住房补贴计入个人所得税吗
  • 出口退税如何办理手续
  • 实收资本和注册资本的账务处理
  • windows缺失
  • 在win7系统中文件属性有哪些
  • 发票跨年作废很麻烦吗
  • 交接目录excel
  • 主营业务收入会计分录例题
  • it最高工资
  • php去除空格和换行符
  • 买货没发票如何入账
  • 君子兰的养殖方法
  • 货物品种不太多而数量又相对较大
  • windows安装无法继续,若要安装请重新启动
  • php实现文件上传需要使用哪个全局变量
  • 甲方如何规避合同责任
  • opencv 边缘检测
  • 论文阅读网站排行榜
  • 行政性罚款怎么结转损益
  • 非贸备案什么意思
  • python wordcloud库
  • 现金流量表四个部分
  • Windows PostgreSQL 安装图文教程
  • mysql数据库连接方式
  • 员工工资可以当月计提当月发放吗
  • 进项税准予抵扣条件有哪些
  • 何为居民企业
  • 其他收益和其他综合收益属于什么科目
  • 固定资产和无形资产折旧时间起始
  • 农产品收购进项税抵扣会计分录
  • 企业筹建期间银行开户要求
  • 工程服务预交税怎么算
  • 收取招标代理费的规定
  • 什么是大病医疗救助
  • 银行账户维护费收费标准
  • 会计调账情况模板
  • 什么是汇总记账凭证账务处理程序?有哪些特点?
  • sql根据逗号分割数据
  • 将u盘制作成u启动u盘启动盘
  • windows10怎么扩大内存
  • linux系统的
  • centos7搭建nfs详细步骤
  • internetfeatures.exe是什么文件
  • mac os操作教程
  • linux-c
  • 英文xp系统中文语言包
  • 常用的linux操作
  • 怎么激活win7旗舰版系统
  • mobile windows
  • 淘宝国际平台叫什么
  • 在node.js中想要监听事件
  • android触屏事件的处理
  • javascript中的getElementById
  • js实现功能
  • 安卓如何实现图片上传功能
  • javascript简单吗
  • 申请电子发票需要去税务局吗
  • 123600是税务电话吗
  • 国有企业全面改革方案
  • 福建电子税务局登录入口
  • 蓬莱市税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设