从数据库里面取值绑定到Ztree

摘要:
将树设置为展开状态)<linkhref=“/Admin/tree/zTreeStyle.css”rel=“stylesheet”type=“text/css”/>460像素;汽车假}};usingSystem.Collections.Generic;=空&&list=newList<

1、效果图(思路:将数据库表按照一定的格式排序,然后序列化成json字符串,绑定到Ztree上并显示出来)

zTree v3.5.16 API 文档http://www.ztree.me/v3/api.php

从数据库里面取值绑定到Ztree第1张

2、添加应用及显示的位置,设置树需要绑定的字段,与数据库里面的表字段有关(备注:设置树为展开状态)

<script src="/common/jquery-1.8.3.min.js" type="text/javascript"></script>
<link href="/Admin/tree/zTreeStyle.css" rel="stylesheet" type="text/css" />    
<script src="/Admin/tree/jquery.ztree.core-3.5.js" type="text/javascript"></script> 
<div style="margin:0 auto;border:1px solid #617775;background:#f0f6e4;578px;height:460px;  overflow:auto;">
    <ul   class="ztree"></ul>
</div>
<script type="text/javascript">
        var setting = {
            data: {
                key: {
                    //将treeNode的ItemName属性当做节点名称
                    name: "ItemName"        
                },
                simpleData: {
                    //是否使用简单数据模式
                    enable: true,
                    //当前节点id属性  
                    idKey: "Id",
                    //当前节点的父节点id属性 
                    pIdKey: "pItemId",
                    //用于修正根节点父节点数据,即pIdKey指定的属性值
                    rootPId: 0
                }
            },
            view: {
                //是否支持同时选中多个节点
                selectedMulti: false
            }
        };

        $(function () {
            $.post("test.aspx", function (json) {
                var treeObj = $.fn.zTree.init($("#tree"), setting, json);               
           //默认展开所有节点
                treeObj.expandAll(true);                
            });
        });       
    </script>

3、获取数据库表中数据,转换为JSON字符串,并在前台以树的形式显示出来

using System;
using System.Collections.Generic;
using System.Data;

public partial class test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {        
        //在服务器端判断request来自Ajax请求(异步)还是传统请求(同步)
        if (Request.Headers["X-Requested-With"] != null && Request.Headers["X-Requested-With"].ToLower() == "XMLHttpRequest".ToLower())
        {           
            //清除缓冲区流中的所有内容输出
            Response.Clear();
            //设置输出流的HTTP MIMEl类型
            Response.ContentType = "application/json";
            //将一个字符串写入HTTP相应输出流
          Response.Write(GetJson());
         //将当前所有缓冲的输出发送到客户端,停止该页的执行
            Response.End();
        }     
    }
    //序列化,将对象转化为JSON字符串
    protected string GetJson()
    {
        //为启用 AFAX 的应用程序提供序列化和反序列化功能
        System.Web.Script.Serialization.JavaScriptSerializer json = new System.Web.Script.Serialization.JavaScriptSerializer();
        List<Express.Model.AdminLeft> list = new List<Express.Model.AdminLeft>();
        //获取管理员模块列表
        list = Express.BLL.AdminLeft.GetList();
        //将对象转换为JSON字符串      
        return json.Serialize(list);       
    }
}

*4、将数据库中表按照树状结构的形式排序(即为以后转换成符合要求的json字符串作准备)

  /// <summary>
        /// 获取所有名称不为空的栏目
        /// </summary>
        public List<Model.AdminLeft> GetList()
        {
            string sql = string.Format("select * from AdminLeft where itemName<>'' order by case when pItemId=0 then Id*10000 else pItemId*10000+Id end");
            List<Model.AdminLeft> list = new List<Model.AdminLeft>();
            using (SqlDataReader dr = DBUtility.SqlHelper.ExecuteReader(ConnString.connReadonly, CommandType.Text, sql, null))
            {
                while (dr.Read())
                {
                    Model.AdminLeft model = new Model.AdminLeft();
                    object obj;
                    obj = dr["Id"];
                 if (obj != null && obj != DBNull.Value)
                    {
                        model.Id = (int)obj;
                    }
                    obj = dr["pItemId"];
                 if (obj != null && obj != DBNull.Value)
                    {
                        model.pItemId = (int)obj;
                    }                   
                    model.ItemName = dr["ItemName"].ToString();                  
                    list.Add(model);
                }
            }
            return list;
        }

备注:排序后的数据库表

从数据库里面取值绑定到Ztree第2张

涉及的知识点总结:

(1)sql中case when 用法(备注:排序的目的是为了转换成符合要求的Json格式,然后序列化成json字符串,绑定到Ztree上并显示出来。)

从数据库里面取值绑定到Ztree第3张

2、【序列化】将对象状态转换为可保持或传输的格式(json格式)的过程。序列化的补集是反序列化,后者将流转换为对象。这两个过程一起保证数据易于存储和传输。

从数据库里面取值绑定到Ztree第4张

从数据库里面取值绑定到Ztree第5张

3、【X-Requested-With】可以通过它是否为空判断request来自Ajax请求(异步)还是传统请求(同步)。

从数据库里面取值绑定到Ztree第6张

从数据库里面取值绑定到Ztree第7张

4、【Response.Clear();】清除缓冲区流中的所有内容输出。(谷歌浏览器)

从数据库里面取值绑定到Ztree第8张

从数据库里面取值绑定到Ztree第9张

参考资料:SQL中case的使用方法: http://www.cnblogs.com/Ronin/archive/2006/07/20/455756.html

JSON序列化及反序列化 http://www.cnblogs.com/wangdongxu1984/archive/2010/02/01/1661134.html#undefined

HTTP协议详解 http://www.cnblogs.com/TankXiao/archive/2012/02/13/2342672.html

免责声明:文章转载自《从数据库里面取值绑定到Ztree》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇用组策略彻底禁止USB存储设备、光驱、软驱、ZIP软驱Android之仿今日头条顶部导航栏效果下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Asp.Net Core 使用 MediatR

Asp.Net Core 使用 MediatR 项目中使用了CQRS读写分离,增删改 的地方使用了 MediatR ,将进程内消息的发送和处理进行解耦。于是便有了这篇文章,整理并记录一下自己的学习。遇到问题,解决问题,记录问题,成长就是一步一步走出来的。 MediatR 是什么? 是的,不管你怎么翻译都查不到该词,好多人都猜测说是作者将Mediator笔...

坑爹的微信支付v3,其实没有那么坑

    研究微信开发一年多了,每个新接口,都会第一时间进行研究。微信支付开放很久,一直没机会接触到支付接口,等了好久终于从朋友那儿搞到了接口,从此开始了我两天多的支付接口的研究。 拿到这个接口文档的第一个想法就是这也没什么难的嘛, 和支付宝、财付通、网银在线等一些传统接口的思路逻辑都是一样的,觉得差不多最多一个下午就可以搞定,结果第一步调用统一支付接口...

序列化对象C++对象的JSON序列化与反序列化探索

新手发帖,很多方面都是刚入门,有错误的地方请大家见谅,欢迎批评指正     一:背景     作为一名C++开发人员,我始终很期待能够像C#与JAVA那样,可以省力的进行对象的序列化与反序列化,但到现在为止,还没有找到相对完美的处理方案。     本文旨在抛砖引玉,期待有更好的处理方案;同时向大家追求帮助,处理本文中未处理的问题。      二:相干技术介...

转载:SQL注入演示demo

网上看到的一个SQL注入的演示demo,很完整所以转载过来,分享给大家。先要感谢作者!!   作者:潘良虎链接:http://www.zhihu.com/question/22953267/answer/80141632来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 Web安全简史在Web1.0时代,人们更多是关注服务器端...

vue_登录注册(前台验证)

一、前言                                                                                                             1、切换手机登录还是密码登录                                 2、显示发送验证码          ...

第6章 RPC之道

 6.1 认识RPC 分布式、微服务的架构思维中都不能缺少 RPC 的影子 RPC(Remote Procedure Call)远程过程调用。通过网络在跨进程的两台服务器之间传输信息,我们使用的时候不用关心网络底层的实现,通过RPC调用远程服务就像本地调用系统内部方法一样方便。 在 OSI 网络通信模型中,RPC跨越了传输层和应用层,使开发分布式应用程序变...