Asp.Net中使用JQueryEasyUI

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

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

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

 

项目中界面效果:

 

 

使用JQueryEasyUI需要引用四个文件,两个css和两个js文件:

[csharp][/csharp] view plaincopyprint?

  1. <span style=”font-size:18px”><link rel=”stylesheet” type=”text/css” href=”../Scripts/jqueryeasyui/themes/gray/easyui.css” />
  2. <link rel=”stylesheet” type=”text/css” href=”../Scripts/jqueryeasyui/themes/icon.css” />
  3. <script type=”text/javascript” src=”../Scripts/jqueryeasyui/jquery-1.8.0.min.js”></script>
  4. <script type=”text/javascript” src=”../Scripts/jqueryeasyui/jquery.easyui.min.js”></script>
  5. </span>

 

 

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

[html][/html] view plaincopyprint?

  1. <span style=”font-size:18px”><script type=”text/javascript” src=”../Scripts/jqueryeasyui/locale/easyui-lang-zh_CN.js”></script>
  2. </span>

JQueryEasyUI控件的取值

使用JQuery取控件的值很简单,如下:

[html][/html] view plaincopyprint?

  1. <span style=”font-size:18px”>$(“#CstName”).val();
  2. $(“#TaskNo”).val(),</span>

 

 

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

[html][/html] view plaincopyprint?

  1. <span style=”font-size:18px”><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> </span>

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

 

[javascript][/javascript] view plaincopyprint?

  1. <span style=”font-size:18px”>$(“#FeedBackDate”).datebox(“getValue”);
  2. $(“#IsKfCl”).combobox(“getValue”);</span>

 

 

<!–工具栏–>

[html][/html] view plaincopyprint?

  1. <span style=”font-size:18px”><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>
  2. <a href=”#” class=”easyui-linkbutton” iconcls=”icon-search” onclick=”searchSrcCode()”>查询</a>
  3.     </div>
  4. </div></span>

 

 

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

 

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

1:自己组织数据然后用Ajax(GET POST)提交(上篇文章中已经学习使用过类似);

 

[javascript][/javascript] view plaincopyprint?

  1. <span style=”font-size:18px”><scripttype=”text/javascript”>
  2.                 function JudgeUserName() {
  3.                     //获取页面中的控件的输入的值
  4.                     browers =+$(“#txtidNumber”).val();
  5.                     //定义类型并将值传递给参数params
  6.                     var params = ‘{browersType:”‘ +browers + ‘”}’;
  7.                     $.ajax({//调用ajax后台数据异步方法
  8.                         //提交的方式
  9.                         type:”Post”,
  10.                         //数据的传送页面:要启动界面的地址/界面的后台的方法
  11.                         url:”admin_ExamineVerifyActive.aspx/SayHello”,
  12.                         contentType:”application/json; charset=utf-8″,
  13.                         data:params,
  14.                         //传到服务器的参数类型
  15.                         dataType:”json”,
  16.                         //重要的后台的回调函数(很重要)
  17.                         success:function (data) {
  18.                             //返回提示给界面效果
  19.                             alert(data.d);
  20.                         },
  21.                         //出错提示
  22.                         error:function (err) {
  23.                             alert(err);
  24.                         }
  25.                     });
  26.                 }</span>

 

 

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

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

 

 

编辑时赋值给表单

[plain][/plain] view plaincopyprint?

  1. <span style=”font-size:18px”>function edit() {
  2.     var rowData = $(‘#dg’).datagrid(‘getSelections’);
  3.     if (rowData.length == 0) {
  4.         $.messager.alert(‘提示’, ‘请选择要编辑的项!’,’info’);
  5.     }
  6.     else if (rowData.length > 1) {
  7.         $.messager.alert(‘提示’, ‘只能选择一项进行编辑!’,’info’);
  8.     }
  9.     else {
  10.         _mode = “2”;
  11.         var row = $(‘#dg’).datagrid(‘getSelected’);
  12.         openDialog();
  13.         $(‘#fm’).form(‘load’, row);
  14.         _srcCodeManageID = row.SrcCodeManageID;
  15.         url = “../Ajax/SrcCodeManageAjax.ashx?Method=SaveSrcCodeManage&ID=” + row.SrcCodeManageID+”&Mode=”+_mode;
  16.     }
  17. }</span>

 

保存

 

[plain][/plain] view plaincopyprint?

  1. <span style=”font-size:18px”>//保存
  2. function saveSrc() {
  3.     $(‘#fm’).form(‘submit’, {
  4.         url: url,
  5.         onSubmit: function () {
  6.             return $(this).form(‘validate’);
  7.         },
  8.         success: function (data) {
  9.             if (data ==”Success”) {
  10.                 $(‘#dlg’).dialog(‘close’);      // close the dialog
  11.                 $(‘#dg’).datagrid(‘reload’);    // reload the user data
  12.                 $.messager.alert(‘提示’, ‘保存成功!’, ‘info’);
  13.             }
  14.             else if (data==”Error”)
  15.             {
  16.                 $.messager.alert(‘错误’, ‘系统出错!’, ‘error’);
  17.             }
  18.         }
  19.     });
  20. }</span>

 

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

标签