当前位置:Gxlcms > JavaScript > 基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用_javascript技巧

基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用_javascript技巧

时间:2021-07-01 10:21:17 帮助过:18人阅读

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

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

1、单行文本框

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

界面代码如下所示:

代码如下:


或者

代码如下:


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

代码如下:

$("#Name").val(info.Name);

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

代码如下:

var name = $("#Name").val();

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

代码如下:

$("#Name").text(info.Name);

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

2、多行文本框

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

界面代码如下所示:

代码如下:


或者

代码如下:


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

代码如下:

$("#type_Remark").val(json.Remark);

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

代码如下:

var text = $("#type_Remark").val();

3、密码文本框

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

界面代码如下所示:

代码如下:


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

代码如下:

var password = '123';
$("#Password").val(password)

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

4、下拉列表Combobox

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

界面代码如下所示:

代码如下:


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

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

代码如下:

$("#type_PID1").combobox('setValue', json.PID);

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

代码如下:

var systemType= $("#txtSystemType_ID").combobox('getValue');

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

代码如下:


5、日期输入控件

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

弹出窗体界面效果如下。


它的界面代码如下所示:

代码如下:


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

代码如下:

$("#LastUpdated").datebox('setValue', info.LastUpdated);

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

代码如下:

var lastupate = $("#txtLastUpdated").datebox('getValue');

6、数值输入控件

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


界面代码如下所示:

代码如下:


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

代码如下:


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

代码如下:

$('#nn').numberbox('setValue', 206.12);

或者

代码如下:

$('#ss').numberspinner('setValue', 8234725);

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

代码如下:

var v = $('#nn').numberbox('getValue');

或者

代码如下:

var v = $('#ss').numberspinner('getValue');

7、单项选择Radio控件

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

界面代码如下所示:

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

代码如下:

$('input:radio[name="SplitType"][value="Split"]').prop('checked', true);

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

代码如下:

$("input[name='SplitType']:checked").val()

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

其界面代码如下所示:

8、复选框

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

界面代码如下所示:

代码如下:

帐号过期

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

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

代码如下:

var postData = $("#ffEdit").serializeArray();

以上代码的使用。

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

 

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

代码如下:

$("#Visible1").prop('checked', info.Visible);

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

代码如下:

var visible = $("#txtVisible").val();

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

10、树形控件

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

引用代码如下所示:

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

11、布局控件

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

界面代码如下所示:

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

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

12、弹出式对话框

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

界面代码如下所示:

13、提示信息

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

代码如下:

$.messager.alert("提示", "修改成功");

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

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

界面代码如下所示。

以上就是我Web开发框架里面常用到的一些界面控件展示以及相关的代码介绍,有一些不太常用的控件可能还没有在本文中介绍,欢迎大家进行补充和讨论,以后有时间继续完善这个文章,作为基于MVC+EasyUI的框架界面的一个很好的参考。希望大家喜欢,多多提意见。

人气教程排行