ASP.NET网站权限设计兑现——套用JQuery EasyUI列表显示数据、分页、查询-ASP教程-爱易网页

ASP.NET网站权限设计兑现——套用JQuery EasyUI列表显示数据、分页、查询

日期：2014-05-17　浏览次数：20974 次

ASP.NET网站权限设计实现——套用JQuery EasyUI列表显示数据、分页、查询

有时候闲的无聊,看到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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

ASP.NET网站权限设计兑现——套用JQuery EasyUI列表显示数据、分页、查询

相关资料更多>

推荐阅读更多>