zTree的简单用法

于 2017-03-30 13:55:31 发布
阅读量3.3k 收藏 6
点赞数 2
分类专栏： javaScript

【简介】

zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件

  •  兼容 IE、FireFox、Chrome 等浏览器
  •  在一个页面内可同时生成多个 Tree 实例
  •  支持 JSON 数据
  •  支持一次性静态生成 和 Ajax 异步加载 两种方式
  •  支持多种事件响应及反馈
  •  支持 Tree 的节点移动、编辑、删除
  •  支持任意更换皮肤 / 个性化图标（依靠css）
  •  支持极其灵活的 checkbox 或 radio 选择功能
  •  简单的参数配置实现 灵活多变的功能

     

    zTree博客地址：http://ztreeapi.iteye.com/

    目前zTree作者已经入驻ItEye，如果有什么需要学习的完全可以到作者博客上去学习，而且zTree的版本已经更新了很多次了，下面的内容跟最新版估计会有很大出入，我不能保证下面的教程在最新版可用。zTree真的是非常强大的树组件，希望能对大家有所帮助！

     

     

    在官网能够下载到zTree的源码、实例和API，其中作者pdf的API写得非常详细（中文的哦）

     

     【部分函数和属性介绍】

  • 核心：zTree(setting, [zTreeNodes])

    这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes，从而建立 Tree。

     

  • 核心参数：setting

    zTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置

    setting 举例:

    Js代码   收藏代码
    1. var setting = {   
    2.     showLine: true,   
    3.     checkable: true   
    4. };   

     

    因为参数太多，具体参数详见zTreeAPI

     

  • 核心参数：zTreeNodes

    zTree 的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息

    zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式

    ①带有父子关系的标准 zTreeNodes 举例:

    Js代码   收藏代码
    1. var zTreeNodes = [   
    2.     {"id":1, "name":"test1", "nodes":[   
    3.       {"id":11, "name":"test11", "nodes":[   
    4.         {"id":111, "name":"test111"}   
    5.       ]},   
    6.       {"id":12, "name":"test12"}   
    7.     ]},   
    8.     ......   
    9. ];   

    ②带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例：

    Js代码   收藏代码
    1. var treeNodes = [                                                                         
    2.     {"id":1, "pId":0, "name":"test1"},   
    3.     {"id":11, "pId":1, "name":"test11"},   
    4.     {"id":12, "pId":1, "name":"test12"},   
    5.     {"id":111, "pId":11, "name":"test111"},   
    6.     ......   
    7. ];   

     

     

    【实例一】(Java代码)

    ①在页面引用zTree的js和css：

    Html代码   收藏代码
    1. <!-- ZTree树形插件 -->  
    2. <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css">  
    3. <!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css">  -->  
    4. <script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>  
    <!-- ZTree树形插件 -->
<link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css">
<!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css">  -->
<script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>

    ②在script脚本中定义setting和zTreeNodes

    Java代码   收藏代码
    1. var setting = {  
    2.         isSimpleData : true,              //数据是否采用简单 Array 格式，默认false  
    3.         treeNodeKey : "id",               //在isSimpleData格式下，当前节点id属性  
    4.         treeNodeParentKey : "pId",        //在isSimpleData格式下，当前节点的父节点id属性  
    5.         showLine : true,                  //是否显示节点间的连线  
    6.         checkable : true                  //每个节点上是否显示 CheckBox  
    7.     };  
    8.   
    9. var treeNodes = [   
    10.     {"id":1, "pId":0, "name":"test1"},   
    11.     {"id":11, "pId":1, "name":"test11"},   
    12.     {"id":12, "pId":1, "name":"test12"},   
    13.     {"id":111, "pId":11, "name":"test111"},   
    14. ];   
    var setting = {
		isSimpleData : true,              //数据是否采用简单 Array 格式，默认false
		treeNodeKey : "id",               //在isSimpleData格式下，当前节点id属性
		treeNodeParentKey : "pId",        //在isSimpleData格式下，当前节点的父节点id属性
		showLine : true,                  //是否显示节点间的连线
		checkable : true                  //每个节点上是否显示 CheckBox
	};

var treeNodes = [ 
    {"id":1, "pId":0, "name":"test1"}, 
    {"id":11, "pId":1, "name":"test11"}, 
    {"id":12, "pId":1, "name":"test12"}, 
    {"id":111, "pId":11, "name":"test111"}, 
];

     ③在进入页面时生成树结构：

    Js代码   收藏代码
    1. var zTree;  
    Js代码   收藏代码
    1. $(function() {  
    2.     zTree = $("#tree").zTree(setting, treeNodes);  
    3.  });  

     ④最后查看效果：

    【实例二】(从后台获取简单格式Json数据)

    ①后台代码封装简单格式Json数据：

    Java代码   收藏代码
    1. public void doGetPrivilegeTree() throws IOException{  
    2.         String s1 = "{id:1, pId:0, name:\"test1\" , open:true}";  
    3.         String s2 = "{id:2, pId:1, name:\"test2\" , open:true}";  
    4.         String s3 = "{id:3, pId:1, name:\"test3\" , open:true}";  
    5.         String s4 = "{id:4, pId:2, name:\"test4\" , open:true}";  
    6.         List<String> lstTree = new ArrayList<String>();  
    7.         lstTree.add(s1);  
    8.         lstTree.add(s2);  
    9.         lstTree.add(s3);  
    10.         lstTree.add(s4);  
    11.         //利用Json插件将Array转换成Json格式  
    12.         response.getWriter().print(JSONArray.fromObject(lstTree).toString());  
    13.     }  
    public void doGetPrivilegeTree() throws IOException{
		String s1 = "{id:1, pId:0, name:\"test1\" , open:true}";
		String s2 = "{id:2, pId:1, name:\"test2\" , open:true}";
		String s3 = "{id:3, pId:1, name:\"test3\" , open:true}";
		String s4 = "{id:4, pId:2, name:\"test4\" , open:true}";
		List<String> lstTree = new ArrayList<String>();
		lstTree.add(s1);
		lstTree.add(s2);
		lstTree.add(s3);
		lstTree.add(s4);
		//利用Json插件将Array转换成Json格式
		response.getWriter().print(JSONArray.fromObject(lstTree).toString());
	}

     

    ②页面使用Ajax获取zTreeNodes数据再生成树

    Js代码   收藏代码
    1. var setting = {  
    2.     isSimpleData : true,              //数据是否采用简单 Array 格式，默认false  
    3.     treeNodeKey : "id",               //在isSimpleData格式下，当前节点id属性  
    4.     treeNodeParentKey : "pId",        //在isSimpleData格式下，当前节点的父节点id属性  
    5.     showLine : true,                  //是否显示节点间的连线  
    6.     checkable : true                  //每个节点上是否显示 CheckBox  
    7. };  
    8.   
    9. var zTree;  
    10. var treeNodes;  
    11.   
    12. $(function(){  
    13.     $.ajax({  
    14.         async : false,  
    15.         cache:false,  
    16.         type: 'POST',  
    17.         dataType : "json",  
    18.         url: root+"/ospm/loginInfo/doGetPrivilegeTree.action",//请求的action路径  
    19.         error: function () {//请求失败处理函数  
    20.             alert('请求失败');  
    21.         },  
    22.         success:function(data){ //请求成功后处理函数。    
    23.             alert(data);  
    24.             treeNodes = data;   //把后台封装好的简单Json格式赋给treeNodes  
    25.         }  
    26.     });  
    27.   
    28.     zTree = $("#tree").zTree(setting, treeNodes);  
    29. });  

     ③最后显示效果

     

    【实例三】从后台动态获取数据，树节点提供右键菜单功能

    ①配置setting：

    Js代码   收藏代码
    1. var url = "/ospm/loginInfo/doGetPrivilegeTree.action";  
    2.     //zTree基本设置  
    3.     var setting = {  
    4.         async : true, //需要采用异步方式获取子节点数据,默认false  
    5.         asyncUrl : root + url, //当 async = true 时，设置异步获取节点的 URL 地址 ,允许接收 function 的引用  
    6.         asyncParam : ["id"], //提交的与节点数据相关的必需参数  
    7.         isSimpleData : true, //数据是否采用简单 Array 格式，默认false  
    8.         treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性  
    9.         treeNodeParentKey : "parentId", //在isSimpleData格式下，当前节点的父节点id属性  
    10.         nameCol : "privName",            //在isSimpleData格式下，当前节点名称  
    11.         expandSpeed : "fast", //设置 zTree节点展开、折叠时的动画速度或取消动画(三种默认定义："slow", "normal", "fast")或 表示动画时长的毫秒数值(如：1000)   
    12.         showLine : true, //是否显示节点间的连线  
    13.         callback : { //回调函数  
    14.             rightClick : zTreeOnRightClick   //右键事件  
    15.         }  
    16.     };  

     

    ②配置鼠标右键事件，显示右键菜单的代码

    Js代码   收藏代码
    1. //显示右键菜单  
    2.     function showRMenu(type, x, y) {  
    3.         $("#rMenu ul").show();  
    4.         if (type=="root") {  
    5.             $("#m_del").hide();  
    6.             $("#m_check").hide();  
    7.             $("#m_unCheck").hide();  
    8.         }  
    9.         $("#rMenu").css({"top":y+"px", "left":x+"px", "display":"block"});  
    10.     }  
    11.     //隐藏右键菜单  
    12.     function hideRMenu() {  
    13.         $("#rMenu").hide();  
    14.     }  
    15.       
    16.     //鼠标右键事件-创建右键菜单  
    17.     function zTreeOnRightClick(event, treeId, treeNode) {  
    18.         if (!treeNode) {  
    19.             zTree.cancelSelectedNode();  
    20.             showRMenu("root", event.clientX, event.clientY);  
    21.         } else if (treeNode && !treeNode.noR) { //noR属性为true表示禁止右键菜单  
    22.             if (treeNode.newrole && event.target.tagName != "a" && $(event.target).parents("a").length == 0) {  
    23.                 zTree.cancelSelectedNode();  
    24.                 showRMenu("root", event.clientX, event.clientY);  
    25.             } else {  
    26.                 zTree.selectNode(treeNode);  
    27.                 showRMenu("node", event.clientX, event.clientY);  
    28.             }  
    29.         }  
    30.     }  
    Js代码   收藏代码
    1. <p><span style="background-color: #fafafa;"><!-- 右键菜单div -->  
    2.  <div id="rMenu" style="position:absolute; display:none;">  
    3.  <li>  
    4.  <ul id="m_add" οnclick="addPrivilege();"><li>增加</li></ul>  
    5.  <ul id="m_del" οnclick="delPrivilege();"><li>删除</li></ul>  
    6.  <ul id="m_del" οnclick="editPrivilege();"><li>编辑</li></ul>  
    7.  <ul id="m_del" οnclick="queryPrivilege();"><li>查看</li></ul>  
    8.  </li>  
    9.  </div></span></p>  

     ③页面加载时生成树并且监听鼠标点击事件，及时隐藏右键菜单

    Js代码   收藏代码
    1. function reloadTree() {  
    2.         hideRMenu();  
    3.         zTree = $("#tree").zTree(setting, treeNodes);  
    4.     }     
    5.       
    6.     var zTree;  
    7.     var treeNodes = [];  
    8.       
    9.   
    10. $(function() {  
    11.         reloadTree();  
    12.   
    13.         $("body").bind(//鼠标点击事件不在节点上时隐藏右键菜单  
    14.                 "mousedown",  
    15.                 function(event) {  
    16.                     if (!(event.target.id == "rMenu" || $(event.target)  
    17.                             .parents("#rMenu").length > 0)) {  
    18.                         $("#rMenu").hide();  
    19.                     }  
    20.                 });  
    21.     });  

     

    ④后台代码根据id获取树节点信息

    -----------------------Action层-----------------------

    Java代码   收藏代码
    1. public void doGetPrivilegeTree() throws IOException{  
    2.         String sId = request.getParameter("id");  
    3.         int treeId = 0;  
    4.         if(sId!=null&&!"".equals(sId)){  
    5.             treeId = Integer.parseInt(sId);  
    6.         }  
    7.         List<Privilege> lstPriv = privilegeService.findPrivilegeTreeById(treeId);  
    8.         response.setCharacterEncoding("UTF-8");  
    9.         response.getWriter().print(JSONArray.fromObject(lstPriv).toString());  
    10.     }  
    public void doGetPrivilegeTree() throws IOException{
		String sId = request.getParameter("id");
		int treeId = 0;
		if(sId!=null&&!"".equals(sId)){
			treeId = Integer.parseInt(sId);
		}
		List<Privilege> lstPriv = privilegeService.findPrivilegeTreeById(treeId);
		response.setCharacterEncoding("UTF-8");
		response.getWriter().print(JSONArray.fromObject(lstPriv).toString());
	}

     

    -----------------------Service层-----------------------

    Java代码   收藏代码
    1. /** 
    2.      * 根据节点id，查询其下级节点的数据 
    3.      */  
    4.     @SuppressWarnings("unchecked")  
    5.     @Override  
    6.     public List<Privilege> findPrivilegeTreeById(int treeId) {  
    7.         StringBuffer sbTree= new StringBuffer();  
    8.         sbTree.append("SELECT NEW Privilege(p.id,p.privName,p.description,p.status,p.isLeaf,p.parentId) FROM Privilege p ");  
    9.         sbTree.append("WHERE p.parentId=:treeId ");  
    10.         sbTree.append("AND p.status!=:del ");  
    11.           
    12.         Map<String,Object> mapTree = new HashMap<String, Object>();  
    13.         mapTree.put("treeId", treeId);  
    14.         mapTree.put("del", Privilege.PRIV_STATUS_DELETE);  
    15.           
    16.         return (List<Privilege>) privilegeDao.findByHql(sbTree.toString(), mapTree);  
    17.     }  
    /**
	 * 根据节点id，查询其下级节点的数据
	 */
	@SuppressWarnings("unchecked")
	@Override
	public List<Privilege> findPrivilegeTreeById(int treeId) {
		StringBuffer sbTree= new StringBuffer();
		sbTree.append("SELECT NEW Privilege(p.id,p.privName,p.description,p.status,p.isLeaf,p.parentId) FROM Privilege p ");
		sbTree.append("WHERE p.parentId=:treeId ");
		sbTree.append("AND p.status!=:del ");
		
		Map<String,Object> mapTree = new HashMap<String, Object>();
		mapTree.put("treeId", treeId);
		mapTree.put("del", Privilege.PRIV_STATUS_DELETE);
		
		return (List<Privilege>) privilegeDao.findByHql(sbTree.toString(), mapTree);
	}

     ⑤最后查看效果：

  • *************************************************************************************************************************************************************************************************


    1、页面使用元素代码

    1      <input type="text" id="key" class="Side_Toput2" name="name" value="" /><input type="button"  value="查找"  onclick="searchNode();" />
2             
3             <ul id="leftTree" class="ztree"></ul>

    2.引用zTree的js文件

       <link href="../../../Content/JavaScript/zTree/css/demo.css" rel="stylesheet" />
    <link href="../../../Content/JavaScript/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script src="../../../Content/JavaScript/zTree/js/jquery.ztree.all-3.5.js"></script>

    3、开始代码构造，初始化zTree

    复制代码 
     ///初始化树
    function InitTree() {
        var setting = {
            //check: {
            //    enable: true
            //},
            view: {
                fontCss: getFontCss,
                dblClickExpand: false,
                showLine: false
            }, 
            data: {
                key: {
                    title: "t"
                },
                simpleData: {
                    enable: true 
                    //checked: true
                }
            },
            callback: {
                onClick: onClick
            }
        };
        //请求树状数据，初始化树
//var zNodes =[
            { id:1, pId:0, name:"父节点1 - 展开", open:true},
            { id:11, pId:1, name:"父节点11 - 折叠"}];
//返回的数据格式,如上，注意一点自己拼接字符串返回的会有问题

        $.ajax({
            type: 'Get',
            url: '?rootid=0',
            dataType: "json", //可以是text，如果用text，返回的结果为字符串；如果需要json格式的，可是设置为json
            success: function (data) {
                $.fn.zTree.init($("#leftTree"), setting, data);

            },
            error: function (msg) {

                alert(" 数据加载失败！" + msg);
            }
        });
    }
    复制代码

    4、后台数据，使用了自定义model，使用Newtonsoft.Json插件转换为json，返回给前台页面

    复制代码 
    //自定义model，字段要和demo的字段一样
  protected class JosnModel
    {
        public string id;
        public string pId;
        public string name;
        public bool open;
        public string url;
        public string icon;
        public string title;
    }

获取数据，打造json
    复制代码 
     private void GetTreeData()
    {

        //  DataTable dtData = null;
        //   string serror = "";
        //  string strSQL = @"SELECT * FROM [DOC_CLASS] where 1=1 and dc_is_delete=0 ";
        //   dtData = Common.GetDataTableBySQL(strSQL, ref serror);

        DocClass.dtDocClass = null;
//此处可以换成自己的读取数据的，由于数据量不是很大，我这里是一次加载全部（一万多，数度也相当快），所以没做异步处理
        DataTable dtData = UIHelper.GetDocClass();
        StringBuilder sb = new StringBuilder();

        sb.Append("[");
        sb.Append("{\"id\": 0, \"pId\": \"-1\", \"name\": \"产业链 \", \"open\": \"true\" ,\"title\":\"产业链\"},"); 
        for (int i = 0; i < dtData.Rows.Count; i++)
        {   
            string id = dtData.Rows[i]["DC_ID"].ToString();
            string name = dtData.Rows[i]["dc_name"].ToString();
            string pid = dtData.Rows[i]["DC_PAR_ID"].ToString();
            JosnModel model = new JosnModel() { id = id, name = name, open = false, pId = pid, url = "", icon = "", title = name };

            sb.Append(JsonHelper.JsonToString(model));
            if (i != dtData.Rows.Count - 1)
            {
                sb.Append(","); 
            }  
        } 
        sb.Append("]");
        Response.Clear();
        Response.Write(sb.ToString() );
        Response.End();

    }
    复制代码 
     
  
     
     
  
     
     
  
     
   复制代码 
  
     
 
     
    5、树的的click事件，可以写很多关于树的跳转，展开，不是很难，不做具体分析，我这里是单机节点，Iframe的src 切换页面
     
 
     
  
     
   复制代码 
  
     
  
        function onClick(e, treeId, treeNode) {
　　　　　//这是单机节点展开
        //var zTree = $.fn.zTree.getZTreeObj("leftTree");
        //zTree.expandNode(treeNode);
        //判断是否是ie浏览器，对iframe赋值
        var kws = treeNode.name;
        var url = "BigDataIndex.aspx?prokw=" + escape(kws) + "&entname=" + escape(kws) + "&time=" + new Date().getTime();
         //由于ie和火狐，其他浏览器不同，ie支持location,貌似不支持src,不知道是什么原因，所以做了判断，可能是iframe的原因吧，没做深究，
　　　　　　//有大神可以告诉我一下
        if ($.browser.msie) {
　　　　　　///获取iframe的id
            window.parent.frames['FlashData'].location = url;
        }
        else {
            window.parent.frames['FlashData'].src = url;
        }
    }
     
  
     
   复制代码 
  
     
 
     
    6、树节点搜索，定位并展开节点，有一个问题，就是如果该节点没有子节点，可以搜索到，但不能直观的定位到，有个想法：可以搜索到该节点，变红，然后展开其父节点，
     
    应该可以做到，由于时间原因，没过多深究，有哪位知道，可以告诉小弟一下
     
 
     
  
    //搜索变色
function getFontCss(treeId, treeNode) {
      
        return (!!treeNode.highlight) ? { color: "#A60000", "font-weight": "bold" } : { color: "#333", "font-weight": "normal" };
    }
     
 
     
 
     
  
     
   复制代码 
  
     
  
      
文本框获取焦点的颜色变化，我这里去掉了自动的搜索，使用enter建和搜索按钮才会搜索定位
function focusKey(e) {
        if (key.hasClass("empty")) {
            key.removeClass("empty");
        }
    }
    function blurKey(e) {
        if (key.get(0).value === "") {
            key.addClass("empty");
        }
    }


     
  
     
   复制代码 
  
     
 
     
 
     
  
     
   复制代码 
  
     
  
     
//搜索节点，不使用模糊，使用全匹配，当然也可以使用节点ID，文字，模糊查询所有节点，也很简单，不做叙述，类似下面，只是调用方法不同
function searchNode(e) {
        var zTree = $.fn.zTree.getZTreeObj("leftTree");
        updateNodes(false);
        var value = $.trim(key.get(0).value);
        if (value != "") {
            var keyType = "name";
            nodeList = zTree.getNodesByParam(keyType, value);
            updateNodes(true);
        }
       
    }
//更新节点，使其高亮显示，我这里自己加了展开节点，达到了定位的效果
    function updateNodes(highlight) {
        var zTree = $.fn.zTree.getZTreeObj("leftTree");
        for (var i = 0, l = nodeList.length; i < l; i++) {
            nodeList[i].highlight = highlight;
            //定位到节点并展开
            zTree.expandNode(nodeList[i]);
            zTree.updateNode(nodeList[i]);
        }
    }
     
  
     
   复制代码 
  
     
 
     
    7、搜索代码如下
     
 
     
  
     
   复制代码 
  
     
  
     var key;
    var lastValue = "", nodeList = [], fontCss = {};
    $(document).ready(function () {
        InitTree();
        key = $("#key");
        key.bind("focus", focusKey)
        .bind("blur", blurKey);
       
        $('#key').keydown(function (e) {
            if (e.keyCode == 13) {
                searchNode();
                e.keyCode = 0;
                window.event.keyCode = 0;
                e.preventDefault();
                return;
            }
        });  
    });
     
  
     
   复制代码 
  
     
 
     
     8、补充以上遗留问题，方便大家立即可以上手用，对于树的属性，刚开始觉得应该是固定的，刚发现，属性可以自定义，但是要做对应，类似映射一下
     
 
     
  
     
   复制代码 
  
     
  
     var setting = {
            //check: {
            //    enable: true
            //},
            view: {
                fontCss: getFontCss,
                dblClickExpand: false,
                showLine: false
            }, 
            data: {
                key: {
                    title: "title"
                },
                simpleData: {
                    enable: true 
                    //checked: true
                }
            },
            callback: {
                onClick: onClick
            }
        };
     
  
     
   复制代码 
  
     
 
     
    这里的key,就是映射的自己的属性，比如你返回的title取名t,那你的映射应该是，title:"t";映射不对的话，你的title 取值不对，取不到值undefined，
     
    这个我还真是浪费了不少时间，当然其他属性，也是一样，可以自定义，但需要在zTree的初始化设置的时候映射一下，希望可以为来我这查阅的童鞋们，
     
    节省一部分读取文档的时间
     

                

        

    

  



    


            

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值