开篇介绍关于EasyUI技术,界面部分的一些使用知识,包括控件的赋值、取值、清空,以及相关的使用。


我们知道,一般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、复选框

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

界面代码如下所示:

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

毕业设计 ASP.Net+EasyUI开发 X X露天矿调度管理信息系统(一)的更多相关文章

  1. 毕业设计 ASP.Net+EasyUI开发 X X露天矿调度管理信息系统(二)

    这是本毕业设计的雏形和框架,实现的功能在左侧的功能框导航菜单内.  做的太烂,还是把学校名字给马赛克掉吧....省的挨校友批 登陆界面.. <cookie +ispostback实现记住我功能& ...

  2. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建

    上一篇教程<asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发>完成了本项目的登录模块,登录后就需要进入后台管理首页了,需要准备一个后台模 ...

  3. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发2-Model层建立

    上篇(asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作)文章讲解了开发过程中的准备工作,主要创建了项目数据库及项目,本文主要讲解项目M层的实现,M层这里 ...

  4. 一步一步搭框架(asp.netmvc+easyui+sqlserver)-02

    一步一步搭框架(asp.netmvc+easyui+sqlserver)-02 我们期望简洁带前台代码,如下: <table id="dataGrid" class=&quo ...

  5. 一步一步搭框架(asp.netmvc+easyui+sqlserver)-01

    一步一步搭框架(asp.netmvc+easyui+sqlserver)-01 要搭建的框架是企业级开发框架,适用用企业管理信息系统的开发,如:OA.HR等 1.框架名称:sampleFrame. 2 ...

  6. EasyUI 开发笔记(二)

    接上篇 :EasyUI 开发笔记(一)  (http://www.cnblogs.com/yiayi/p/3485258.html) 这期就简单介绍下, easyui 的 list 展示, 在easy ...

  7. 基于asp.net + easyui框架,一步步学习easyui-datagrid——实现分页和搜索(二)

    http://blog.csdn.net/jiuqiyuliang/article/details/19967031 目录: 基于asp.net + easyui框架,一步步学习easyui-data ...

  8. 在Ubuntu下搭建ASP.NET 5开发环境

    在Ubuntu下搭建ASP.NET 5开发环境 0x00 写在前面的废话 年底这段时间实在太忙了,各种事情都凑在这个时候,没时间去学习自己感兴趣的东西,所以博客也好就没写了.最近工作上有个小功能要做成 ...

  9. ASP.NET MVC开发:Web项目开发必备知识点

    最近加班加点完成一个Web项目,使用Asp.net MVC开发.很久以前接触的Asp.net开发还是Aspx形式,什么Razor引擎,什么MVC还是这次开发才明白,可以算是新手. 对新手而言,那进行A ...

随机推荐

  1. java学习——集合框架(Collection,List,Set)

    集合类的由来: 对象用于封装特有数据,对象多了需要存储,如果对象的个数不确定,就使用集合容器进行存储. 集合特点:1,用于存储对象的容器.2,集合的长度是可变的.3,集合中不可以存储基本数据类型值. ...

  2. uva 482 - Permutation Arrays

    <int, double> --> <int, string> 从而避免了输出格式: #include <vector> #include <strin ...

  3. 2014年企业改善IT风险管理的5个办法

    进入新的一年,企业面对数据泄密事故.日益复杂的攻击和对其控制的持续监管,现在是时候重新审视其风险管理战略了.虽然每个企业都是独特的,风险管理专家认为有些风险管理办法值得企业关注.下面我们列出了5个风险 ...

  4. 用Set中元素做条件查询

    一个老师教许多学生,一个学生被许多老师教,一个学生有好多书,同一种书被许多同学拥有.查询教拥有书"a"的学生的老师:   class teacher{   String id;   ...

  5. debain 解决无法显示中文

    首先先配置编码:vim /etc/locale.gen  去掉前面的# en_US.UTF-8 UTF-8 zh_CN GB2312 zh_CN.GBK GBK zh_CN.UTF-8 UTF-8 然 ...

  6. 03 - 替换vtkDataObject中的GetProducerPort()方法 VTK 6.0 迁移

    VTK6 引入了许多不兼容的变.其中之一是删除vtkDataObject中所有有关管道的方法.其中的一个方法就是GetProducerPort(). 一般,先前使用这个方法如下例子: vtkPolyD ...

  7. javascript 要注意的事项

    记入一些容易出错的地方 function someClass() { this.name = null; 或 undefined } var obj = new someClass(); consol ...

  8. 51单片机C语言学习笔记7:关于.c文件和.h文件

    1)h文件作用 1 方便开发:包含一些文件需要的共同的常量,结构,类型定义,函数,变量申明: 2 提供接口:对一个软件包来说可以提供一个给外界的接口(例如: stdio.h). 2)h文件里应该有什么 ...

  9. maven下载及配置

    Maven是一个采用纯Java编写的开 源项目管理工具.Maven采用了一种被称之为project object model (POM)概念来管理项目,所有的项目配置信息都被定义在一个叫做POM.xm ...

  10. Graphviz-Gdot语言学习

    GVEdit这个绘图软件呢我也是刚接触的,感觉画起图来还是很爽的...尤其很熟悉c++后很容易上手这门dot语言. 先看一下十分清新的编程界面: 没有天下最邪恶的语法加亮,没有缩进行...这又算什么! ...