2,最简单的树(自定义图标)

发布时间:2020-08-14 02:43:37 作者:1473348968
来源:网络 阅读:404

2,最简单的树(自定义图标)

 

-----后台

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Text;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    public string GetzNodes()
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("<script>");
        sb.Append("var zNodes =[");
        //*****************************************加入遍历代码
        for (int i = 0; i < 50; i++)
        {
            if (i == 0)
            {
                //父节点
                sb.Append(SetParametes(i.ToString(), "-1", "a", true, true));
            }
            else if(i<10)
                //子节点
                sb.Append(SetParametes(i.ToString(), "0", "b", false));
            else
                //父节点
                sb.Append(SetParametes(i.ToString(), "-1", "a", true));
        }
        //********************************************************
        sb.Append("];");
        sb.Append("</script>");
        return sb.ToString();
    }
    /// <summary>
    /// 设置节点
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="pid">父级id</param>
    /// <param name="name">名称</param>
    /// <param name="parent">是否是父节点?</param>
    /// <param name="open">是否展开?</param>
    /// <returns>返回节点</returns>
    private string SetParametes(string id, string pid, string name, bool parent, bool open = false)
    {
        //父节点的展开图标
        string Popenpath = "../img/1_open.png";
        //父节点的关闭图标
        string Pclosepath = "../img/1_close.png";
        //子节点的图标
        string Cclosepath = "../img/2.png";
        StringBuilder sb = new StringBuilder();
        sb.Append("{");
        sb.AppendFormat("id:{0},", id);
        sb.AppendFormat("pId:{0},", pid);
        sb.AppendFormat("name:\"{0}\",", name);
        if (open)
        {
            sb.AppendFormat("open: true,");
        }
        if (parent)
        {
            sb.AppendFormat("iconOpen: \"{0}\",", Popenpath);
            sb.AppendFormat("iconClose:  \"{0}\"", Pclosepath);
        }
        else
        {
            sb.AppendFormat("icon:\"{0}\"", Cclosepath);
        }
        sb.Append("},");
        return sb.ToString();
    }
}

-----前台

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../css/demo_new.css" rel="stylesheet" type="text/css" />
    <link href="../css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="../js/jquery.ztree.core-3.5.js" type="text/javascript"></script>
    
    
    
</head>
<%=GetzNodes()%>
<script type="text/javascript">
    var setting = { data: { simpleData: { enable: true} }, callback: { onClick: zTreeOnClick} };
        $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
    //显示div
    function showdiv() {
        $("#zhezhao").fadeIn(300);
        $("#treeDemodiv").fadeIn(300);
    }
    //隐藏div
    function closediv() {
        $("#zhezhao").fadeOut(300);
        $("#treeDemodiv").fadeOut(300);
    }
    //展示zTree
    function showZTree() {
        var w = document.documentElement.clientWidth;
        var h = document.documentElement.clientHeight;
        var l = document.documentElement.clientWidth / 2 - $("#treeDemodiv").width() / 2;
        var t = document.documentElement.clientHeight / 2 - $("#treeDemodiv").height() / 2;
        $("#zhezhao").css({ "width": w + "px", "height": h + "px", "filter": "alpha(opacity=25)", "-moz-opacity": "0.25", "-khtml-opacity": "0.25", "opacity": "0.25" });
        $("#treeDemodiv").css({ "left": l + "px", "top": t + "px" });
        showdiv();
    }
    //点击触发事件
    function zTreeOnClick(event, treeId, treeNode) {
        alert(treeNode.id + "," + treeNode.name);
        closediv();
    }
</script>
<body>
    <form id="form1" runat="server">
    
             <input type="button" value="显示" onclick="showZTree()">
            <!------------------Treediv--------------------->
            <div id="treeDemodiv"  class="zTreeDemoBackground left">        
                <ul ><li ><img  onclick="$('#treeDemodiv').fadeOut(300);$('#zhezhao').fadeOut(300);" src="../img/yzfalse.png" /></li></ul>
                <ul id="treeDemo"  class="ztree"></ul>
            </div>
            <div id="zhezhao" ></div>
            <!------------------Treediv--------------------->
          
    </form>
</body>
</html>

2,最简单的树(自定义图标)

 


整合包下载:http://down.51cto.com/data/1967063

推荐阅读:
  1. 最简单易懂的目录结构
  2. Trunk必看版,最基础,最简单的实验

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

public 自定义图标

上一篇:VNC,VNC连接服务器

下一篇:BAT大牛亲授 基于ElasticSearch的搜房网实战

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》