Asp.Net中使用JQueryEasyUI--善良公社项目
来源:互联网 发布:数据运营驱动力包括 编辑:程序博客网 时间:2024/05/19 18:38
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(),
<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 > 1) { $.messager.alert('提示', '只能选择一项进行编辑!','info'); } else { _mode = "2"; var row = $('#dg').datagrid('getSelected'); openDialog(); $('#fm').form('load', row); _srcCodeManageID = row.SrcCodeManageID; url = "../Ajax/SrcCodeManageAjax.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这是初步的尝试,这部分的框架很多很实用,重心是把握住方法的调用、值得获取、前后台数据的交互,结合实际把其利用、封装了好多常用的功能,只有慢慢的学习使用才会深入的了解,新的知识点不难,我们要当老朋友一样的对待它,什么就变得简单了。
- Asp.Net中使用JQueryEasyUI--善良公社项目
- 善良公社项目总结
- 在Asp.Net中使用JQueryEasyUI
- 在Asp.Net中使用JQueryEasyUI
- 在Asp.Net中使用JQueryEasyUI
- 做善良公社项目的经历和感受——善良公社
- JQueryEasyUI框架下的combobox的取值和绑定——善良公社
- jquery easyui datagrid 分页实现---善良公社项目
- 基于easyui框架中input 类型的checkbox拼接成字符串存入数据库和读取选中---善良公社项目
- 5、VS2010+ASP.NET MVC4+EF4+JqueryEasyUI+Oracle项目开发之——使用datagrid做报表统计
- JSON 的数据转换格式(DataTable或DataSet) -善良公社项目
- 善良公社项目总结之如何从前台向后台传输数据
- 二进制数据流方式实现 个人头像的读取、上传、修改------善良公社项目
- 善良公社之EasyUI框架下在datagrid中显示数据
- 善良公社—JS加我好友
- ASP.NET MVC 项目中使用 WebForm
- 在ASP.NET项目中使用CKEditor
- 在ASP.NET项目中使用CKEditor
- OCP-1Z0-053-V12.02-146题
- MD5加密
- SEO基本概念之“链接池”
- Leetcode: Binary Tree Preorder Traversal
- 那些年写过的shell---- build in command
- Asp.Net中使用JQueryEasyUI--善良公社项目
- C++中的:和*号
- SEO的操作流程梗概
- 第九章(程序外观)
- 没有鼠标怎么办?键盘命令你知道几个?
- 【数据挖掘概念与技术】学习笔记3-数据预处理
- 文件读写操作工具类整理
- 搜索 MsiGetProductInfo 无法检索 Product Code 为“{CEFE8540-CF57-485B-9994-BE9E02D29193}”的包的 ProductVersion
- JNI MAVEN