位置: 编程技术 - 正文
基于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'样式来标识，可以上下调节数值。
赋值给界面控件代码如下：
或者
获取界面控件的值代码如下：
或者
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元素的方法)
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区别)">
