ASP.NET网站权限设计实现——套用JQuery EasyUI列表显示数据、分页、查询
分类：C#日记ASP.net（vs2008平台下）
有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近看到一款轻型的UI感觉不错,但是在网上找了好多教程,但是没有一个是完全是C#asp.net写的
无耐下,自己写了下,感觉效果不错,故拿出来和大学分享一下,希望可以抛砖引玉作用.
由于好多人都只是拷贝代码,故在此全用图片作说明.
图片效果图1
这个界面是上左右下结构
左边是一棵树
右边是一个表格
上部是标题
最下部只是一个空的保留一部分空间
下面开始说下整体结构HTML代码如下
至于HTML代码不想在做多余的解说
下面开始左边的树,在easyUI里面是有树的,但这里没有用,在这里还得感谢Ferry’s blogs提供的dTree树,在网上叫无级树,因为它扩展性还是比较好的,在此就用它吧.
在用它之前还是先看下dtree 说明文档,在下载这树JS里面有详细的说明
在上面<head>里面树这样写,不懂可以看下文档这里就不作多解释了.
//<–Tree Begin–>d = new dTree(‘d’);d.add(0, -1, ‘个人面板’);function getData(id) {$.ajax({url: ‘TreeSource/GetTreeData.ashx?parentID=’ + id,type: ‘post’,datatype: ‘json’,success: function (JsonValureturne) {if (JsonValureturne) {//格式化为JSON数据格式var json = eval("(" + JsonValureturne + ")");//alert(json.Menu.length);//document.write(returnJsonValue.Menu[0].MenuName);//遍历集合，添加树节点$.each(json.Menu, function (key, value) {if (id == 0) {d.add(value.ID, value.ParentMenuID, value.MenuName, ”, value.MenuName, ”, ‘img/folder.gif’, ‘img/folderopen.gif’);}else {d.add(value.ID, value.ParentMenuID, value.MenuName, "javascript:addTab(‘" + value.MenuName + "’,’" + value.MenuClickURL + "’)", value.MenuName, ”);}//根据模块的ParentID递归绑定数据getData(value.ID);})}else {$("#divTree").html(d.toString());//数据请求完毕，隐藏图片}}})}$(getData(0));//<–Tree End–>
这里我们引用一个后台文件’TreeSource/GetTreeData.ashx?parentID=’+id
意思就是传给后台一个父ID,返回一组json数据
数据库结构这里也贴出来吧,以防有人不理解.
像这样 设计如果还是不懂,请参考dtree文档
下面重点来讲解后台如何来处理及返回数据据的.
<%@ WebHandler Language="C#" Class="GetTreeData" %>using System;using System.Web;using System.Data;using System.Collections;using System.Collections.Generic;using System.Web.Script.Serialization;public class GetTreeData : IHttpHandler{ public bool IsReusable{get { return false; }}public void ProcessRequest(HttpContext context){//不让浏览器缓存// context.Response.Buffer = true;// context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);// context.Response.AddHeader("pragma", "no-cache");// context.Response.AddHeader("cache-control", "");// context.Response.CacheControl = "no-cache";context.Response.ContentType = "text/plain";if (!String.IsNullOrEmpty(GetParentID(context))){string ParentID = GetParentID(context);DataTable dt = SqlHelper.FillDataTable(String.Format("SELECT * FROM SunZonTMSMenu WHERE ParentMenuID={0}", ParentID));IList<Menu> menu = new List<Menu>();if (dt != null && dt.Rows.Count > 0){foreach (DataRow dr in dt.Rows){menu.Add(new Menu(){ID = Int32.Parse(dr["ID"].ToString()),ParentMenuID = Int32.Parse(dr["ParentMenuID"].ToString()),MenuName = dr["MenuName"].ToString(),MenuCode = dr["MenuCode"].ToString(),MenuClickURL = dr["MenuClickURL"].ToString()});}}if (menu.Count > 0){context.Response.Write(FormatToJson.ListToJson<Menu>(menu));}}}public string GetParentID(HttpContext context){return context.Request["parentID"];}}
这里使用一个类库SqlHelper.FillDataTable()及IList<Menu> menu = new List<Menu>() meun类
还有一个FormatToJson.ListToJson<T>(T))泛型方法,别吓着了,其它很简单.
先分析一下这里的总体思路.
1)获取前台的父ID
2)通过此ID在数据里查找相应的数据
3)再把返回的数据据填充到自定义的类里面,可能问为什么这样做,因为这样做可以利用反射的方法很好的外理数据,下面会详细的说明
4)把形成的类集合IList<Menu>格式化成json数据并返回给前台
看下怎么查找数据SqlHelper.FillDataTable()方法
就这么简单
下面再看下类Meun
注意了这个类是在VS2010上面写的,每个成员类型必须和数据库一致,
下面关健的一部就是把这个类集合格式化JSON数据,来看下代码
好了,这些基本上完成了转化的方法,
我们来看看前台返回的娄据是什么样的,相信很多人都明白了
如果出现这些数据说明就成功了
背着背包的路上，看过许多人，听过许多故事，
