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

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

<inputclass="easyui-validatebox"type="text"id="Name"name="Name"/>或者<inputtype="text"ID="txtLoginName"name="txtLoginName"/>1、单行文本框

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

界面代码如下所示：

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

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

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

varname=$("#Name").val();

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

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

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

//必输项：<inputclass="easyui-validatebox"type="text"name="name"data-options="required:true"></input>//格式的验证：<inputclass="easyui-validatebox"type="text"name="email"data-options="validType:'email'"></input><inputclass="easyui-validatebox"type="text"name="email"data-options="required:true,validType:'url'"></input>//长度范围的验证：<inputclass="easyui-validatebox"data-options="validType:'length[1,3]'">

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

界面代码如下所示：

<textareaid="type_Remark"class="easyui-validatebox"required="true"></textarea>

或者

<textareaid="type_Remark"name="Remark"></textarea>

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

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

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

vartext=$("#type_Remark").val();

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

界面代码如下所示：

<inputtype="password"name="password"></input>

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

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

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

$("#btnLogin").click(function(){varpostData={UserName:$("#UserName").val(),Password:$("#Password").val(),Code:$("#Code").val()};

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

界面代码如下所示：

<inputclass="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);

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

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

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

<selectid="txtPID"></select>

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

弹出窗体界面效果如下。

它的界面代码如下所示：

<inputclass="easyui-datebox"type="text"ID="txtLastUpdated"name="txtLastUpdated"/>

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

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

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

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

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

界面代码如下所示：

<inputclass="easyui-numberbox"data-options="min:10,max:90,precision:2,required:true">

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

<inputclass="easyui-numberspinner"data-options="min:10,max:100,required:true"></input>

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

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

或者

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

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

varv=$('#nn').numberbox('getValue');

或者

varv=$('#ss').numberspinner('getValue');

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

界面代码如下所示：

<tr><th><label>数据分开方式：</label></th><td><inputname="SplitType"type="radio"class="easyui-validatebox"checked="checked"required="true"value="Split">分隔符方式，多个数据中英文逗号，分号，斜杠或顿号[,，;；/、]分开，或一行一个　<br/><inputname="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控件作为单项选择的控件也是可以的，界面效果如下所示。

其界面代码如下所示：

<selectid="cc"></select><divid="sp"><div>Selectalanguage</div><inputtype="radio"name="lang"value="01"><span>Java</span><br/><inputtype="radio"name="lang"value="02"><span>C#</span><br/><inputtype="radio"name="lang"value="03"><span>Ruby</span><br/><inputtype="radio"name="lang"value="04"><span>Basic</span><br/><inputtype="radio"name="lang"value="05"><span>Fortran</span></div><scripttype="text/javascript">$(function(){$('#cc').combo({required:true,editable:false});$('#sp').appendTo($('#cc').combo('panel'));$('#spinput').click(function(){varv=$(this).val();vars=$(this).next('span').text();$('#cc').combo('setValue',v).combo('setText',s).combo('hidePanel');});});</script>

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

界面代码如下所示：

<inputid="chkIsExpire"type="checkbox">帐号过期

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

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

varpostData=$("#ffEdit").serializeArray();

以上代码的使用。

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

<selectid="Visible1"name="Visible"><optionvalue="true"selected>正常</option><optionvalue="false">不可见</option></select>

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

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

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

varvisible=$("#txtVisible").val();

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

<tableclass="easyui-datagrid"title="BasicDataGrid"data-options="singleSelect:true,collapsible:true,url:'../datagrid/datagrid_data1.json'"><thead><tr><thdata-options="field:'itemid',width:80">ItemID</th><thdata-options="field:'productid',width:100">Product</th><thdata-options="field:'listprice',width:80,align:'right'">ListPrice</th><thdata-options="field:'unitcost',width:80,align:'right'">UnitCost</th><thdata-options="field:'attr1',width:250">Attribute</th><thdata-options="field:'status',width:60,align:'center'">Status</th></tr></thead></table>

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

<tableid="grid"title="用户操作"iconcls="icon-view"></table>

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

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

//实现对DataGird控件的绑定操作functionInitGrid(queryData){$('#grid').datagrid({//定位到Table标签，Table标签的ID是gridurl:'/Menu/FindWithPager',//指向后台的Action来获取当前菜单的信息的Json格式的数据title:'功能菜单',iconCls:'icon-view',height:650,width:function(){returndocument.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代码如下所示：

//绑定查询按钮的的点击事件functionBindSearchEvent(){//按条件进行查询数据，首先我们得到数据的值$("#btnSearch").click(function(){//得到用户输入的参数，取值有几种方式：$("#id").combobox('getValue'),$("#id").datebox('getValue'),$("#id").val()//字段增加WHC_前缀字符，避免传递如URL这样的Request关键字冲突varqueryData={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);returnfalse;});}

通过构造一些查询参数并传递相应的值，后台根据这些参数，从对应控制器的分页方法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'<aclass="grid_visible"href="javascript:void(0)">'+val+'</a>';}else{return'<aclass="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

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

引用代码如下所示：

<linkhref="~/Content/JQueryTools/JQueryTree/css/zTreeStyle/zTreeStyle.css"rel="stylesheet"type="text/css"/><scriptsrc="~/Content/JQueryTools/JQueryTree/js/jquery.ztree.core-3.5.min.js"type="text/javascript"></script>

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

<scripttype="text/javascript"><!--varsetting={data:{simpleData:{enable:true}},callback:{onClick:onClick,onDblClick:onDblClick}}//重新加载树形结构（异步）functionreloadTree(){$("#loading").show();$.getJSON("/DictType/GetTreeJson?r="+Math.random(),function(json){$.fn.zTree.init($("#treeDemo"),setting,json);$.fn.zTree.getZTreeObj("treeDemo").expandAll(true);vartreeObj=$.fn.zTree.getZTreeObj("treeDemo");vartreeNodes=treeObj.getNodes();if(treeNodes!=null){loadTypeData(treeNodes[0].id);}});$("#loading").fadeOut(500);}//树单击节点操作functiononClick(event,treeId,treeNode,clickFlag){varid=treeNode.id;loadTypeData(id);}//树双击节点操作functiononDblClick(event,treeId,treeNode){varid=treeNode.id;loadTypeData(id);ShowDictType('edit');}

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

界面代码如下所示：

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

<!--主工作区--><divid="mainPanle"region="center"title=""><divid="tabs"class="easyui-tabs"fit="true"border="false"></div></div>

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

<divclass="easyui-layout"fit="true"><divdata-options="region:'west',split:true,title:'字典类别',iconCls:'icon-book'"><div>.......................</div><div><ulid="treeDemo"class="ztree"></ul></div></div><divid="tb"data-options="region:'center',title:'字典数据',iconCls:'icon-book'"><!-------------------------------详细信息展示表格-----------------------------------><tableid="grid"title="用户操作"iconcls="icon-view"></table></div></div>

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

界面代码如下所示：

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

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

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

<script>functionalert1(){$.messager.alert('MyTitle','Hereisamessage!');}functionalert2(){$.messager.alert('MyTitle','Hereisaerrormessage!','error');}functionalert3(){$.messager.alert('MyTitle','Hereisainfomessage!','info');}functionalert4(){$.messager.alert('MyTitle','Hereisaquestionmessage!','question');}functionalert5(){$.messager.alert('MyTitle','Hereisawarningmessage!','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的框架界面的一个很好的参考。希望大家喜欢，多多提意见。