jQuery Easy UI 实例

jQuery EasyUI就不用介绍了，一款轻量级UI框架，现在对于这方面的资源网上也不少，但是真正的实例却也很少，尤其是.Net方面的，不过现在孙宇一直在发布一些EasyUI的视频，对大家的帮助可能很大，我呢，仅通过一个实例给广大小白们介绍怎样使用EasyUI(其实自己也是小白，嘿嘿)。

在这里借助疯狂秀才的界面框架，大家都感觉挺不错的。

大家也都知道.Net服务器端控件的弊端，因此咱们完全放弃服务器端控件，全部用客户端控件。

下面做一些准备工作。

以下所用文件及资料随后会一并上传，供大家下载！

这里用的是jquery-easyui-1.2.6

和疯狂秀才的网站界面，秀才里面jQuery 和 jQuery EasyUI的版本比较低大家根据情况修改。

下面我只描述增加的部分：

登录窗口

View Code

<div id="formLogin" method="post" url="List.aspx" style="width:300px;height:200px;" title="用户登录">    <table width="100%" style="line-height:50px;border:red 1px;">    <tr align="center">    <td align="right">用户名：</td>    <td align="left"><input id="ipt_username" name="ipt_username" type="text" class="easyui-validatebox" required="true"/></td>    </tr>    <tr align="center">    <td align="right">密码：</td>      <td align="left"><input id="ipt_userpwd" name="ipt_userpwd" type="password" class="easyui-validatebox" required="true" /></td>    </tr>    </table>        </div>

登录窗口初始化JS

View Code

var formLogin = $('#formLogin');             if (getCookie('username') == null)//未登录显示登录Dialog否则不渲染                         formLogin.dialog({ modal: true,                 closable: false,                 buttons: [{                     text: '登录', handler: function () {                         if (!formLogin.form("validate")) {                             return;                         }                         $.post(                         '/Ajax/HandlerLogin.ashx',                           { "username": $("#ipt_username").val(), "userpwd": $("#ipt_userpwd").val() },                         function (a) {                             if (a == '0') {//登录成功                                 $.messager.alert('提示', '登录成功', 'info')                                 SetCookie('username', 'wikstone');                                 formLogin.dialog('close');                             }                             else {//登录失败                                 $.messager.alert('提示', '登录失败', 'info')                             }                         }                         );                     }                 }]             }             );

AJAX HandlerLogin页面代码

View Code

        public void ProcessRequest(HttpContext context)        {                     context.Response.ContentType = "text/plain";                        userName = context.Request.Form["username"].ToString();            userPwd= context.Request.Form["userpwd"].ToString();                     context.Response.Write(CheckLogin(userName,userPwd));                }        private string CheckLogin(string uname, string upwd)        {            BLL.TUser bll = new BLL.TUser();            DataTable dt = bll.GetList("UserName='"+uname+"' and UserPwd='"+upwd+"'").Tables[0];            if (dt.Rows.Count > 0)            {                              return "0";//登录成功            }            else                return "1";                                }

未登录页面

登录后：

主要功能：因为是简单例子，只有用户管理模块：列表、增加、修改、删除

列表：

增加：

修改：

删除：

 本文是直接从本人博客园直接复制过来，欢迎大家光临博客园：博客园地址

源码下载