基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔，本篇继续介绍其中界面部分的一些使用知识，包括控件的赋值、取值、清空，以及相关的使用。
我们知道，一般Web界面包括的界面控件有：单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息、列表控件等，这些界面控件的操作都有哪些不同，下面我们来逐一进行介绍。
1、单行文本框
使用easyui的控件，单行文本可以使用easyui-validatebox样式即可，类型为text的控件。
界面代码如下所示：
复制代码 代码如下:
<input class=\"easyui-validatebox\" type=\"text\" id=\"Name\" name=\"Name\" />
或者
复制代码 代码如下:
<input type=\"text\" ID=\"txtLoginName\" name=\"txtLoginName\" style=\"width:100px\" />
赋值给界面控件代码如下：
复制代码 代码如下:
$(\"#Name\").val(info.Name);
获取界面控件的值代码如下：
复制代码 代码如下:
var name = $(\"#Name\").val();
如果是标签Lable控件，这需要把val 使用text替代即可，如下代码所示：
复制代码 代码如下:
$(\"#Name\").text(info.Name);
对于easyui-validatebox样式的控件，一般来说，有几个常见属性可以设置他们的。
//必输项： <input class=\"easyui-validatebox\" type=\"text\" name=\"name\" data-options=\"required:true\"></input> //格式的验证： <input class=\"easyui-validatebox\" type=\"text\" name=\"email\" data-options=\"validType:\'email\'\"></input> <input class=\"easyui-validatebox\" type=\"text\" name=\"email\" data-options=\"required:true,validType:\'url\'\"></input> //长度范围的验证： <input class=\"easyui-validatebox\" data-options=\"validType:\'length[1,3]\'\">
2、多行文本框
easyui的界面样式，可以使用easyui-validatebox，或者默认的textarea即可。
界面代码如下所示：
复制代码 代码如下:
<textarea id=\"type_Remark\" class=\"easyui-validatebox\" required=\"true\" style=\"height:100px;\"></textarea>
或者
复制代码 代码如下:
<textarea style=\"height:60px;width:200px\" id=\"type_Remark\" name=\"Remark\"></textarea>
赋值给界面控件代码如下：
复制代码 代码如下:
$(\"#type_Remark\").val(json.Remark);
获取界面控件的值代码如下：
复制代码 代码如下:
var text = $(\"#type_Remark\").val();
3、密码文本框
密码文本框和常规的文本框一样，只是输入字符的时候，系统做了屏蔽显示而已，把它作为一个来独立说明，也是因为它也是常见输入的一种。
界面代码如下所示：
复制代码 代码如下:
<input type=\"password\" name=\"password\" style=\"width:260px;\"></input>
赋值给界面控件代码如下：
复制代码 代码如下:
var password = \'123\';
$(\"#Password\").val(password)
获取界面控件的值代码如下：
$(\"#btnLogin\").click(function () {
var postData = {
UserName: $(\"#UserName\").val(),
Password: $(\"#Password\").val(),
Code: $(\"#Code\").val()
};
4、下拉列表Combobox
常见的EasyUI的ComboBox是可以输入，也可以从列表选择的内容的输入控件。
界面代码如下所示：
复制代码 代码如下:
<input class=\"easyui-combobox\" type=\"text\" id=\"type_PID1\" name=\"PID\" />
绑定下拉列表的数据源代码如下：
$(\'#type_PID1\').combobox({
url: \'/DictType/GetDictJson\',
valueField: \'Value\',
textField: \'Text\'
});
设置控件的选择的内容代码如下：
复制代码 代码如下:
$(\"#type_PID1\").combobox(\'setValue\', json.PID);
获取界面控件的值代码如下：
复制代码 代码如下:
var systemType= $(\"#txtSystemType_ID\").combobox(\'getValue\');
而利用标准的Select控件虽然可以实现从列表选择，不过不够ComboBox控件那么灵活方便，Select控件的界面代码如下：
复制代码 代码如下:
<select id=\"txtPID\" style=\"width: 100%\" > </select>
5、日期输入控件
easyui使用class=‘easyui-datebox\'来标识日期控件，从弹出的层中选择正确的日期，是一种非常常见的界面输入控件，可以替代My97DatePicker日期输入控件。
弹出窗体界面效果如下。
它的界面代码如下所示：
复制代码 代码如下:
<input class=\"easyui-datebox\" type=\"text\" ID=\"txtLastUpdated\" name=\"txtLastUpdated\" style=\"width:100px\" />
赋值给界面控件代码如下：
复制代码 代码如下:
$(\"#LastUpdated\").datebox(\'setValue\', info.LastUpdated);
获取界面控件的值代码如下：
复制代码 代码如下:
var lastupate = $(\"#txtLastUpdated\").datebox(\'getValue\');
6、数值输入控件
easyui使用样式easyui-numberbox标识为数值类型，其表现为文本框，但只能输入数值。
界面代码如下所示：
复制代码 代码如下:
<input class=\"easyui-numberbox\" data-options=\"min:10,max:90,precision:2,required:true\">
或者使用‘easyui-numberspinner\'样式来标识，可以上下调节数值。
复制代码 代码如下:
<input class=\"easyui-numberspinner\" data-options=\"min:10,max:100,required:true\" style=\"width:80px;\"></input>
赋值给界面控件代码如下：
复制代码 代码如下:
$(\'#nn\').numberbox(\'setValue\', 206.12);
或者
复制代码 代码如下:
$(\'#ss\').numberspinner(\'setValue\', 8234725);
获取界面控件的值代码如下：
复制代码 代码如下:
var v = $(\'#nn\').numberbox(\'getValue\');
或者
复制代码 代码如下:
var v = $(\'#ss\').numberspinner(\'getValue\');
7、单项选择Radio控件
单项选择Radio控件，是在多项内容里面选择一个选项进行保存或者显示。
界面代码如下所示：
<tr>
<th>
<label>数据分开方式：</label>
</th>
<td>
<input name=\"SplitType\" type=\"radio\" class=\"easyui-validatebox\" checked=\"checked\" required=\"true\" value=\"Split\">分隔符方式，多个数据中英文逗号，分号，斜杠或顿号[, ， ; ； / 、]分开，或一行一个
<br />
<input name=\"SplitType\" type=\"radio\" class=\"easyui-validatebox\" required=\"true\" value=\"Line\">一行一个记录模式，忽略所有分隔符号
</td>
</tr>
赋值给界面控件代码如下：
复制代码 代码如下:
$(\'input:radio[name=\"SplitType\"][value=\"Split\"]\').prop(\'checked\', true);
获取界面控件的值代码如下：
复制代码 代码如下:
$(\"input[name=\'SplitType\']:checked\").val()
或者使用Comobo控件作为单项选择的控件也是可以的，界面效果如下所示。
其界面代码如下所示：
<select id=\"cc\" style=\"width:150px\"></select>
<div id=\"sp\">
<div style=\"color:#99BBE8;background:#fafafa;padding:5px;\">Select a language</div>
<input type=\"radio\" name=\"lang\" value=\"01\"><span>Java</span><br/>
<input type=\"radio\" name=\"lang\" value=\"02\"><span>C#</span><br/>
<input type=\"radio\" name=\"lang\" value=\"03\"><span>Ruby</span><br/>
<input type=\"radio\" name=\"lang\" value=\"04\"><span>Basic</span><br/>
<input type=\"radio\" name=\"lang\" value=\"05\"><span>Fortran</span>
</div>
<script type=\"text/javascript\">
$(function(){
$(\'#cc\').combo({
required:true,
editable:false
});
$(\'#sp\').appendTo($(\'#cc\').combo(\'panel\'));
$(\'#sp input\').click(function(){
var v = $(this).val();
var s = $(this).next(\'span\').text();
$(\'#cc\').combo(\'setValue\', v).combo(\'setText\', s).combo(\'hidePanel\');
});
});
</script>
8、复选框
复选框是在一项或多项内容中，选择零项或者多项的一个输入界面控件。
<select id=\"cc\" style=\"width:150px\"></select>
<div id=\"sp\">
<div style=\"color:#99BBE8;background:#fafafa;padding:5px;\">Select a language</div>
<input type=\"radio\" name=\"lang\" value=\"01\"><span>Java</span><br/>
<input type=\"radio\" name=\"lang\" value=\"02\"><span>C#</span><br/>
<input type=\"radio\" name=\"lang\" value=\"03\"><span>Ruby</span><br/>
<input type=\"radio\" name=\"lang\" value=\"04\"><span>Basic</span><br/>
<input type=\"radio\" name=\"lang\" value=\"05\"><span>Fortran</span>
</div>
<script type=\"text/javascript\">
$(function(){
$(\'#cc\').combo({
required:true,
editable:false
});
$(\'#sp\').appendTo($(\'#cc\').combo(\'panel\'));
$(\'#sp input\').click(function(){
var v = $(this).val();
var s = $(this).next(\'span\').text();
$(\'#cc\').combo(\'setValue\', v).combo(\'setText\', s).combo(\'hidePanel\');
});
});
</script>
界面代码如下所示：
复制代码 代码如下:
<input id=\"chkIsExpire\" type=\"checkbox\" >帐号过期
由于复选框的一些特殊性质，在表单提交的时候，如果没有勾选的选型，使用serializeArray()方法构造的数据，复选框的值则不会被提交。
基于这个原因，我们可以使用Select控件进行替代，实现复选项的功能，而不影响
复制代码 代码如下:
var postData = $(\"#ffEdit\").serializeArray();
以上代码的使用。
使用Select控件的代码如下所示。
<select id=\"Visible1\" name=\"Visible\">
<option value=\"true\" selected>正常</option>
<option value=\"false\">不可见</option>
</select>
赋值给界面控件代码如下：
复制代码 代码如下:
$(\"#Visible1\").prop(\'checked\', info.Visible);
获取界面控件的值代码如下：
复制代码 代码如下:
var visible = $(\"#txtVisible\").val();
9、表格控件DataGrid
easyui的列表控件，可以通过指定table的class属性为easyui-datagrid即可实现表格的定义，界面代码如下所示：
<table class=\"easyui-datagrid\" title=\"Basic DataGrid\" style=\"width:700px;height:250px\"
data-options=\"singleSelect:true,collapsible:true,url:\'../datagrid/datagrid_data1.json\'\">
<thead>
<tr>
<th data-options=\"field:\'itemid\',width:80\">Item ID</th>
<th data-options=\"field:\'productid\',width:100\">Product</th>
<th data-options=\"field:\'listprice\',width:80,align:\'right\'\">List Price</th>
<th data-options=\"field:\'unitcost\',width:80,align:\'right\'\">Unit Cost</th>
<th data-options=\"field:\'attr1\',width:250\">Attribute</th>
<th data-options=\"field:\'status\',width:60,align:\'center\'\">Status</th>
</tr>
</thead>
</table>
不过为了避免使用脚本定义datagrid导致多次初始化的问题，我们一般只需要指定一个table代码即可，界面如下所示
<table id=\"grid\" style=\"width: 1024px\" title=\"用户操作\" iconcls=\"icon-view\">
</table>
而表格控件的数据加载，我们使用javascript进行初始化，初始化后的表格界面显示效果如下所示。
Javascript代码如下所示，其中的width: function () { return document.body.clientWidth * 0.9 }是用来实现宽度自适应的一个操作。
//实现对DataGird控件的绑定操作
function InitGrid(queryData) {
$(\'#grid\').datagrid({ //定位到Table标签，Table标签的ID是grid
url: \'/Menu/FindWithPager\', //指向后台的Action来获取当前菜单的信息的Json格式的数据
title: \'功能菜单\',
iconCls: \'icon-view\',
height: 650,
width: function () { return document.body.clientWidth * 0.9 },
nowrap: true,
autoRowHeight: false,
striped: true,
collapsible: true,
pagination: true,
pageSize: 100,
pageList: [50,100,200],
rownumbers: true,
//sortName: \'ID\', //根据某个字段给easyUI排序
sortOrder: \'asc\',
remoteSort: false,
idField: \'ID\',
queryParams: queryData, //异步查询的参数
columns: [[
{ field: \'ck\', checkbox: true }, //选择
{ title: \'显示名称\', field: \'Name\', width: 200},
{ title: \'图标\', field: \'Icon\', width: 150 },
{ title: \'排序\', field: \'Seq\', width: 80 },
{ title: \'功能ID\', field: \'FunctionId\', width: 80 },
{ title: \'菜单可见\', field: \'Visible\', width: 80 },
{ title: \'Winform窗体类型\', field: \'WinformType\', width: 400 },
{ title: \'Web界面Url地址\', field: \'Url\', width: 200 },
{ title: \'Web界面的菜单图标\', field: \'WebIcon\', width: 120 },
{ title: \'系统编号\', field: \'SystemType_ID\', width: 80 }
]],
toolbar: [{
id: \'btnAdd\',
text: \'添加\',
iconCls: \'icon-add\',
handler: function () {
ShowAddDialog();//实现添加记录的页面
}
}, \'-\', {
id: \'btnEdit\',
text: \'修改\',
iconCls: \'icon-edit\',
handler: function () {
ShowEditOrViewDialog();//实现修改记录的方法
}
}, \'-\', {
id: \'btnDelete\',
text: \'删除\',
iconCls: \'icon-remove\',
handler: function () {
Delete();//实现直接删除数据的方法
}
}, \'-\', {
id: \'btnView\',
text: \'查看\',
iconCls: \'icon-table\',
handler: function () {
ShowEditOrViewDialog(\"view\");//实现查看记录详细信息的方法
}
}, \'-\', {
id: \'btnReload\',
text: \'刷新\',
iconCls: \'icon-reload\',
handler: function () {
//实现刷新栏目中的数据
$(\"#grid\").datagrid(\"reload\");
}
}],
onDblClickRow: function (rowIndex, rowData) {
$(\'#grid\').datagrid(\'uncheckAll\');
$(\'#grid\').datagrid(\'checkRow\', rowIndex);
ShowEditOrViewDialog();
}
})
};
对于查询按钮触发的数据后台查询及数据绑定操作，javascript代码如下所示：
//绑定查询按钮的的点击事件
function BindSearchEvent() {
//按条件进行查询数据，首先我们得到数据的值
$(\"#btnSearch\").click(function () {
//得到用户输入的参数，取值有几种方式：$(\"#id\").combobox(\'getValue\'), $(\"#id\").datebox(\'getValue\'), $(\"#id\").val()
//字段增加WHC_前缀字符，避免传递如URL这样的Request关键字冲突
var queryData = {
WHC_ID: $(\"#txtID\").val(),
WHC_Name: $(\"#txtName\").val(),
WHC_Icon: $(\"#txtIcon\").val(),
WHC_Seq: $(\"#txtSeq\").val(),
WHC_FunctionId: $(\"#txtFunctionId\").val(),
WHC_Visible: $(\"#txtVisible\").val(),
WHC_WinformType: $(\"#txtWinformType\").val(),
WHC_Url: $(\"#txtUrl\").val(),
WHC_WebIcon: $(\"#txtWebIcon\").val(),
WHC_SystemType_ID: $(\"#txtSystemType_ID\").val()
}
//将值传递给
InitGrid(queryData);
return false;
});
}
通过构造一些查询参数并传递相应的值，后台根据这些参数，从对应控制器的分页方法 FindWithPager 获取相应的分页数据，并绑定到grid控件中。
另外，如果需要在grid里面增加一些图片或者链接什么的，应该如何操作呢？
如下界面所示的效果：
首先需要在初始化代码里面增加列的formatter回调函数，如下所示。
columns: [[
{ field: \'ck\', checkbox: true }, //选择
{ title: \'显示名称\', field: \'Name\', width: 200},
{ title: \'图标\', field: \'Icon\', width: 150 },
{ title: \'排序\', field: \'Seq\', width: 80 },
{ title: \'功能ID\', field: \'FunctionId\', width: 80 },
{
title: \'菜单可见\', field: \'Visible\', width: 80, formatter: function (val, rowdata, index) {
if (val) {
return \'<a class=\"grid_visible\" href=\"javascript:void(0)\" >\' + val + \'</a>\';
} else {
return \'<a class=\"grid_unvisible\" href=\"javascript:void(0)\" >\' + val + \'</a>\';
}
}
},
{ title: \'Winform窗体类型\', field: \'WinformType\', width: 400 },
{ title: \'Web界面Url地址\', field: \'Url\', width: 200 },
{ title: \'Web界面的菜单图标\', field: \'WebIcon\', width: 120 },
{ title: \'系统编号\', field: \'SystemType_ID\', width: 80 }
]],
在formatter回调函数里面添加逻辑代码，判断是否可见，其实就是增加两个图片按钮，但是图片按钮的样式设置，必须在加载数据完毕后才能操作，因此需要在函数里面处理。
onLoadSuccess: function () {
$(\".grid_visible\").linkbutton({ text: \'可见\', plain: true, iconCls: \'icon-ok\' });
$(\".grid_unvisible\").linkbutton({ text: \'不可见\', plain: true, iconCls: \'icon-stop\' });
},
如果显示的图片不完整，设置行的自动调整高度属性为true即可。
autoRowHeight: true
10、树形控件
虽然easyui也有Tree控件，不过我较喜欢使用zTree这个树形控件，这个是一个免费的Jquery树控件。
引用代码如下所示：
<link href=\"~/Content/JQueryTools/JQueryTree/css/zTreeStyle/zTreeStyle.css\" rel=\"stylesheet\" type=\"text/css\" /> <script src=\"~/Content/JQueryTools/JQueryTree/js/jquery.ztree.core-3.5.min.js\" type=\"text/javascript\"></script>
初始化在Tree树控件的界面代码如下所示：
<script type=\"text/javascript\">
<!--
var setting = {
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: onClick,
onDblClick: onDblClick
}
}
//重新加载树形结构（异步）
function reloadTree() {
$(\"#loading\").show();
$.getJSON(\"/DictType/GetTreeJson?r=\" + Math.random(), function (json) {
$.fn.zTree.init($(\"#treeDemo\"), setting, json);
$.fn.zTree.getZTreeObj(\"treeDemo\").expandAll(true);
var treeObj = $.fn.zTree.getZTreeObj(\"treeDemo\");
var treeNodes = treeObj.getNodes();
if (treeNodes != null) {
loadTypeData(treeNodes[0].id);
}
});
$(\"#loading\").fadeOut(500);
}
//树单击节点操作
function onClick(event, treeId, treeNode, clickFlag) {
var id = treeNode.id;
loadTypeData(id);
}
//树双击节点操作
function onDblClick(event, treeId, treeNode) {
var id = treeNode.id;
loadTypeData(id);
ShowDictType(\'edit\');
}
11、布局控件
EasyUI通过DIV层来控制布局的显示，DIV里面增加一个Region的属性用来区分属于哪个区域，如下图是我Web开发框架的界面布局效果图。
界面代码如下所示：
我们详细查看主工作区的代码，如下所示。
<!--主工作区-->
<div id=\"mainPanle\" region=\"center\" title=\"\" style=\"overflow:hidden;\">
<div id=\"tabs\" class=\"easyui-tabs\" fit=\"true\" border=\"false\" >
</div>
</div>
其中字典管理里面还有子布局的展示，我们查看字典管理里面界面代码，如下所示。
<div class=\"easyui-layout\" style=\"width:700px;height:700px;\" fit=\"true\">
<div data-options=\"region:\'west\',split:true,title:\'字典类别\',iconCls:\'icon-book\'\" style=\"width: 300px; padding: 1px;\">
<div style=\"padding: 1px; border: 1px solid #ddd;\">
.......................</div>
<div>
<ul id=\"treeDemo\" class=\"ztree\">
</ul>
</div>
</div>
<div id=\"tb\" data-options=\"region:\'center\',title:\'字典数据\',iconCls:\'icon-book\'\" style=\"padding:5px;height:auto\">
<!-------------------------------详细信息展示表格----------------------------------->
<table id=\"grid\" style=\"width: 940px\" title=\"用户操作\" iconcls=\"icon-view\"></table>
</div>
</div>
12、弹出式对话框
EasyUI弹出式对话框用的很多，对话框的界面代码放在DIV层里面，一般在界面整个界面加载后中已经初始化了，只是我们根据条件相似适当的层即可，这样就形成了弹出式对话框，弹出式对话框有一个遮罩的效果。
界面代码如下所示：
13、提示信息
在常规的Web界面提示里面，我们一般用纯粹的javascript的alert函数来进行信息的提示，如果在基于EasyUI的界面布局和演示里面，使用这个提示显然会和界面演示不够匹配，因此我们使用messager类来进行相应的提示信息处理，简单的脚本提示代码如下。
复制代码 代码如下:
$.messager.alert(\"提示\", \"修改成功\");
提示信息也可以更加丰富，添加图标等信息，界面代码如下所示。
<script>
function alert1(){
$.messager.alert(\'My Title\',\'Here is a message!\');
}
function alert2(){
$.messager.alert(\'My Title\',\'Here is a error message!\',\'error\');
}
function alert3(){
$.messager.alert(\'My Title\',\'Here is a info message!\',\'info\');
}
function alert4(){
$.messager.alert(\'My Title\',\'Here is a question message!\',\'question\');
}
function alert5(){
$.messager.alert(\'My Title\',\'Here is a warning message!\',\'warning\');
}
</script>
对于一般的删除操作，一般有一个提示确认的消息框，这个messager类也进行了封装处理，效果也不错。
界面代码如下所示。
$.messager.confirm(\"删除确认\", \"您确认删除选定的记录吗？\", function (deleteAction) {
if (deleteAction) {
$.get(\"/DictData/DeletebyIds\", postData, function (data) {
if (data == \"true\") {
$.messager.alert(\"提示\", \"删除选定的记录成功\");
$(\"#grid\").datagrid(\"reload\");
//当删除完成之后，第二次删除的时候还记得上次的信息，这样是不可以的，所以我们需要清除第一次的信息
rows.length = \"\";//第一种方法
$(\"#grid\").datagrid(\"clearSelections\");//第二种方法
}
else {
$.messager.alert(\"提示\", data);
}
});
}
});
以上就是我Web开发框架里面常用到的一些界面控件展示以及相关的代码介绍，有一些不太常用的控件可能还没有在本文中介绍，欢迎大家进行补充和讨论，以后有时间继续完善这个文章，作为基于MVC+EasyUI的框架界面的一个很好的参考。希望大家喜欢，多多提意见。
本文地址：https://www.stayed.cn/item/16087
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)