日期:2014-05-17 浏览次数:21009 次
有时候闲的无聊,看到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