Asp.Net中使用JQueryEasyUI--善良公社项目

jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序、界面非常的友好看起来很是舒服，给人以美感。

jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序、界面非常的友好看起来很是舒服，给人以美感。

jQuery UI 主要分为3个部分：交互、微件和效果库。

这些只是自己以前的简单的了解学习，这次项目中涉及到其框架的使用，因为其大量使用达到漂亮的效果，对此进行了简单深入、光面的学习研究。

项目中界面效果：

使用JQueryEasyUI需要引用四个文件，两个css和两个js文件：

<link rel="stylesheet" type="text/css" href="../Scripts/jqueryeasyui/themes/gray/easyui.css" />
<link rel="stylesheet" type="text/css" href="../Scripts/jqueryeasyui/themes/icon.css" /> 
<script type="text/javascript" src="../Scripts/jqueryeasyui/jquery-1.8.0.min.js">
</script> <script type="text/javascript" src="../Scripts/jqueryeasyui/jquery.easyui.min.js"></script>

如果需要使用本地化 还需要引用：

<script type="text/javascript" src="../Scripts/jqueryeasyui/locale/easyui-lang-zh_CN.js"></script>

JQueryEasyUI控件的取值

使用JQuery取控件的值很简单，如下：

$("#CstName").val(); $("#TaskNo").val(),

如果要使用JQueryEasyUI的日历控件、下拉控件或其他的一些控件，给普通的input、select控件添加一个class即可：

<input id="FeedBackDate" name="FeedBackDate" class="easyui-datebox" maxlength="10" style="width: 150px;"/>
<select id = "IsKfCl" class = "easyui-combobox" name = "IsKfCl" style = "width:150px;">
<option value=""></option>
<option value="是">是</option>
<option value="否">否</option>
</select>

现在取这些控件的值需要使用下面的方法：

$("#FeedBackDate").datebox("getValue");
$("#IsKfCl").combobox("getValue");

<!–工具栏–>

<div id="tb" style="padding:5px;height:auto;display:none;">
<div style="margin-bottom: 5px">
<a href="#" class="easyui-linkbutton" iconcls = "icon-add" onclick="add()"> 新增 </a>
<a href="#" class="easyui-linkbutton" iconcls="icon-edit" onclick="edit()">编辑-</a>
<a href="#" class="easyui-linkbutton" iconcls="icon-search" onclick="searchSrcCode()">查询</a>
</div></div>

Form表单的提交、数据的交互：

上面说过了列表的显示，下面就来讲下数据的提交，有两种方式可以实现：

1：自己组织数据然后用Ajax（GET POST）提交；

< scripttype = "text/javascript" >
function JudgeUserName() {
//获取页面中的控件的输入的值
browers =+$("#txtidNumber").val();
//定义类型并将值传递给参数params 
var params = '{browersType:"' +browers + '"}';
$.ajax({//调用ajax后台数据异步方法//提交的方式type:"Post",
//数据的传送页面：要启动界面的地址/界面的后台的方法 url:"admin_ExamineVerifyActive.aspx/SayHello",
contentType:"application/json; charset=utf-8",
data:params,
//传到服务器的参数类型dataType:"json"
,//重要的后台的回调函数（很重要
success:function (data) {
//返回提示给界面效果
alert(data.d);},
//出错提示error:
function (err) {
alert(err);}});}

2：使用Form表单提交的方式。

当页面字段比较多的时候会比较麻烦，保存时需要将每个字段的值逐一取出传送到后台，编辑时也需要将行中各字段的值逐一取出赋给表单中的控件，今天查资料发现JQueryEasyUI提供Form的Ajax提交的方式，会使代码精简很多,而且使用Form表单提交的方式还能用到JQueryEasyUI提供的一些验证控件。

编辑时赋值给表单

function edit() {
	var rowData = $('#dg').datagrid('getSelections');
	if (rowData.length == 0) {
		$.messager.alert('提示', '请选择要编辑的项！', 'info');
	} else if (rowData.length & gt; 1) {
		$.messager.alert('提示', '只能选择一项进行编辑！', 'info');
	} else {
		_mode = "2";
		var row = $('#dg').datagrid('getSelected');
		openDialog();
		$('#fm').form('load', row);
		_srcCodeManageID = row.SrcCodeManageID;
		url = "../Ajax/SrcCodeMana
geAjax.ashx?Method=SaveSrcCodeManage&ID=" + row.SrcCodeManageID + "&Mode=" + _mode;
	}
}

保存

//保存
function saveSrc() {
 $('#fm').form('submit', {
 url: url,
 onSubmit: function () {
 return $(this).form('validate');
 },
 success: function (data) {
 if (data =="Success") {
 $('#dlg').dialog('close');
 // close the dialog
 $('#dg').datagrid('reload');
 // reload the user data
 $.messager.alert('提示', '保存成功!', 'info');
 } else if (data=="Error")
 {
 $.messager.alert('错误', '系统出错!', 'error');
 }
 }
 });
 }

JqueryUI这是初步的尝试，这部分的框架很多很实用，重心是把握住方法的调用、值得获取、前后台数据的交互，结合实际把其利用、封装了好多常用的功能，只有慢慢的学习使用才会深入的了解，新的知识点不难，我们要当老朋友一样的对待它，什么就变得简单了。

本文出自： http://blog.csdn.net/lishehe/article/details/14436943

关注公众号『窗外天空』

获取更多建站运营运维新知！
互联网创业、前沿技术......