您的位置: 首页  >  IT文章  >  Ztree实现带checkBox的下拉框

Ztree实现带checkBox的下拉框

分类: IT文章 • 2022-03-26 16:51:59

Ztree实现带checkBox的下拉框

UI

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ArticleMove.aspx.cs" Inherits="Aqioo.CMS.Admin.Admin.Article.ArticleMove" %>

<!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 id="Head1" runat="server">
    <title>资讯学院文章互转</title>
    <link href="../../Content/Ztree/Css/demo.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Ztree/Css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />

    <script src="../../Content/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script src="../../Content/Ztree/JS/jquery.ztree.core-3.5.js" type="text/javascript"></script>

    <script src="../../Content/Ztree/JS/jquery.ztree.excheck-3.5.js" type="text/javascript"></script>

    <script src="../../Content/Ztree/JS/ztreeInit.js" type="text/javascript"></script>

    <style type="text/css">
        .style1
        {
             121px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <input type="text" style="display: none" id="sourceidval" runat="server" />
    <input type="text" style="display: none" id="desidval" runat="server" />
    <div>
        <table cellpadding="0" cellspacing="0" class="table2">
            <tr>
                <td colspan="3" class="title">
                    文章转移
                </td>
            </tr>
            <tr>
                <td class="style1" style=" 300px" rowspan="2">
                    <b>转换前文章类别ID为</b>：
                    <input id="citySel" type="text" readonly value="" style=" 120px;" onclick="showMenu();" />
                </td>
                <td rowspan="2" style=" 300px">
                    <b>转换后文章类别ID为</b>：
                    <input id="citySe2" type="text" readonly value="" style=" 120px;" onclick="showMenu1();" />
                    
                </td>
            </tr>
           <tr>
                <td class="style1">
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td colspan="3" style="padding: 8px 0">
                    <center>
                        <asp:Button ID="Button1" runat="server" Text="开始转移>>" OnClick="Button1_Click" CssClass="button" /></center>
                </td>
            </tr>
            
        </table>
    </div>
    </form>
    
    <div id="menuContent" class="menuContent" style="display: none; position: absolute;">
                        <ul id="treesourceID" class="ztree" style="margin-top: 0;  180px; height: 300px;">
                        </ul>
                    </div>
                    
                    <div id="menuContent1" class="menuContent" style="display: none; position: absolute;">
                        <ul id="treedesID" class="ztree" style="margin-top: 0;  180px; height: 300px;">
                        </ul>
                    </div>
</body>
</html>
View Code

PS：1.

<div id="menuContent" class="menuContent" style="display: none; position: absolute;">
                        <ul id="treesourceID" class="ztree" style="margin-top: 0;  180px; height: 300px;">
                        </ul>
                    </div>
View Code

这个div放在末尾form外，position为绝对

2. 在放ztree文件时最好不要改变它原始的文件目录结构

JS

var setting = {
    check: {
        enable: true,
        chkboxType: { "Y": "", "N": "" }
    },
    view: {
        dblClickExpand: false
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        beforeClick: beforeClick,
        onCheck: onCheck,
//        onAsyncSuccess: zTreeOnAsyncSuccess
    },
    async: {
        enable: true,
        url: "/admin/Article/ClassIdTree.aspx",
        dataType: 'json',
        type: 'post',
        autoParam: ["id"]
    }
};
var zNodes;
//var zNodes = [
//            { id: 1, pId: 0, name: "北京" },
//            { id: 2, pId: 0, name: "天津" },
//            { id: 3, pId: 0, name: "上海" },
//            { id: 6, pId: 0, name: "重庆" },
//            { id: 4, pId: 0, name: "河北省", open: true, nocheck: true },
//            { id: 41, pId: 4, name: "石家庄" },
//            { id: 42, pId: 4, name: "保定" },
//            { id: 43, pId: 4, name: "邯郸" },
//            { id: 44, pId: 4, name: "承德" },
//            { id: 5, pId: 0, name: "广东省", open: true, nocheck: true },
//            { id: 51, pId: 5, name: "广州" },
//            { id: 52, pId: 5, name: "深圳" },
//            { id: 53, pId: 5, name: "东莞" },
//            { id: 54, pId: 5, name: "佛山" },
//            { id: 6, pId: 0, name: "福建省", open: true, nocheck: true },
//            { id: 61, pId: 6, name: "福州" },
//            { id: 62, pId: 6, name: "厦门" },
//            { id: 63, pId: 6, name: "泉州" },
//            { id: 64, pId: 6, name: "三明" }
//         ];

function beforeClick(treeId, treeNode) {
   // var zTree = $.fn.zTree.getZTreeObj("treesourceID");
//    zTree.checkNode(treeNode, !treeNode.checked, null, true);
var zTree = $.fn.zTree.getZTreeObj("treesourceID");
var id = treeNode.id;
if(!treeNode.nocheck){
$.ajax({
       url: '/admin/Article/ArticleTree.aspx',
       type: 'post',
       data:{articleId:id},
       dataType: 'json',
       async: false,
       success: function(data) {
//       for (var i = 0; i<data.length; i++)
//       {
//       var articleNode = data[i];
       zTree.addNodes(treeNode, data);
//       } 
//        zTree.removeNode(treeNode);
        
       }
   });
}
 
    return false;
}

//function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
//    zNodes = msg;
//    $.fn.zTree.init($("#treesourceID"), setting, zNodes);
//};

function onCheck(e, treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("treesourceID"),
            nodes = zTree.getCheckedNodes(true),
            v = "",
            vid = "";
           
    for (var i = 0, l = nodes.length; i < l; i++) {
        v += nodes[i].name + ",";
        vid += nodes[i].id + ",";
    }
    if (v.length > 0) v = v.substring(0, v.length - 1);
    var cityObj = $("#citySel");
    var sourceidval = $("#sourceidval");
    cityObj.attr("value", v);
    sourceidval.attr("value", vid);
}

function showMenu() {
    var cityObj = $("#citySel");
    var cityOffset = $("#citySel").offset();
    $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");

    $("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
    $("#menuContent").fadeOut("fast");
    $("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
    if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
        hideMenu();
    }
}



var setting1 = {
    check: {
        enable: true,
        chkboxType: { "Y": "", "N": "" }
    },
    view: {
        dblClickExpand: false
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        beforeClick: beforeClick1,
        onCheck: onCheck1,
//        onAsyncSuccess: zTreeOnAsyncSuccess1,
        beforeCheck: zTreeBeforeCheck
    },
    async: {
        enable: true,
        url: "/admin/Article/ClassIdDesTree.aspx",
        dataType: 'json',
        type: 'post',
        autoParam: ["id"]
    }
};
var zNodes1;
//var zNodes = [
//            { id: 1, pId: 0, name: "北京" },
//            { id: 2, pId: 0, name: "天津" },
//            { id: 3, pId: 0, name: "上海" },
//            { id: 6, pId: 0, name: "重庆" },
//            { id: 4, pId: 0, name: "河北省", open: true, nocheck: true },
//            { id: 41, pId: 4, name: "石家庄" },
//            { id: 42, pId: 4, name: "保定" },
//            { id: 43, pId: 4, name: "邯郸" },
//            { id: 44, pId: 4, name: "承德" },
//            { id: 5, pId: 0, name: "广东省", open: true, nocheck: true },
//            { id: 51, pId: 5, name: "广州" },
//            { id: 52, pId: 5, name: "深圳" },
//            { id: 53, pId: 5, name: "东莞" },
//            { id: 54, pId: 5, name: "佛山" },
//            { id: 6, pId: 0, name: "福建省", open: true, nocheck: true },
//            { id: 61, pId: 6, name: "福州" },
//            { id: 62, pId: 6, name: "厦门" },
//            { id: 63, pId: 6, name: "泉州" },
//            { id: 64, pId: 6, name: "三明" }
//         ];

function beforeClick1(treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("treedesID");
//    zTree.checkNode(treeNode, !treeNode.checked, null, true);
    var id = treeNode.id;
    if(!treeNode.nocheck){
     $.ajax({
       url: '/admin/Article/ArticleTree.aspx',
       type: 'post',
       data:{articleId:id},
       dataType: 'json',
       async: false,
       success: function(data) {
//       for (var i = 0; i<data.length; i++)
//       {
//       var articleNode = data[i];
       zTree.addNodes(treeNode, data);
//       } 
//        zTree.removeNode(treeNode);
        
       }
   });
    }
    
    return false;
}

//function zTreeOnAsyncSuccess1(event, treeId, treeNode, msg) {
//    zNodes1 = msg;
//    $.fn.zTree.init($("#treedesID"), setting1, zNodes1);
//};

function onCheck1(e, treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("treedesID"),
            nodes = zTree.getCheckedNodes(true),
            v = "",
            vid="";
    for (var i = 0, l = nodes.length; i < l; i++) {
        v += nodes[i].name + ",";
        vid += nodes[i].id + ",";
    }
    if (v.length > 0) v = v.substring(0, v.length - 1);
    var cityObj = $("#citySe2");
    var desidval = $("#desidval");
    cityObj.attr("value", v);
    desidval.attr("value", vid);
}

function zTreeBeforeCheck(treeId, treeNode) {
    var desidval = $("#desidval");
    var nodeId = treeNode.id+",";
    if (desidval.val().length > 0) {
        if (desidval.val() == nodeId) {
            return true;
        }
        else {
            alert("目标栏目只能选一个！")
            return false; 
        } 
    }
    else {
        return true;
    }
    
};

function showMenu1() {
    var desidval = $("#desidval");
    desidval.val("");
    var cityObj = $("#citySe2");
    var cityOffset = $("#citySe2").offset();
    $("#menuContent1").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");

    $("body").bind("mousedown", onBodyDown1);
}
function hideMenu1() {
    $("#menuContent1").fadeOut("fast");
    $("body").unbind("mousedown", onBodyDown1);
}
function onBodyDown1(event) {
    if (!(event.target.id == "menuBtn" || event.target.id == "citySe2" || event.target.id == "menuContent1" || $(event.target).parents("#menuContent1").length > 0)) {
        hideMenu1();
    }
}

$(document).ready(function() {
    //$.ajax({
    //    url: '/admin/Article/ClassIdTree.aspx',
    //    type: 'post',
    //    dataType: 'json',
    //    async: false,
    //    success: function(data) {
    //    zNodes = data;
    //    }
    //});
$.fn.zTree.init($("#treedesID"), setting1);
$.fn.zTree.init($("#treesourceID"), setting);
});
View Code

这个可以参照官方demo根据需要修改

PS：1. 如果要异步加载则在setting中添加，异步返回的数据会自动绑定

  async: {
        enable: true,
        url: "/admin/Article/ClassIdTree.aspx",
        dataType: 'json',
        type: 'post',
        autoParam: ["id"]
    }
View Code

2. 如果是使用简单的数据类型则simpledata(id,pid)设置为true。弊端：child可能加载错的位置上

  data: {
        simpleData: {
            enable: true
        }
    },
View Code 
public class TreeNodes
    {
       public int id { get; set; }
       public int pId { get; set; }
       public string name { get; set; }
       public bool open { get; set; }
       public bool nocheck { get; set; }
    }
View Code

如果要使用自定义的数据类型则首先将simpledata设置为false

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Newtonsoft.Json;

namespace HuaweiSoftware.IPSP_JCW.CheckEntity
{
    [Serializable]
    public class SectionTreeNode
    {
        [JsonProperty(PropertyName = "id")]
        public int ID { get; set; }

        //[JsonProperty(PropertyName = "pId")]
        //public int PID { get; set; }

        [JsonProperty(PropertyName = "name")]
        public string Name { get; set; }

        /// <summary>
        /// 是否展开
        /// </summary>
        [JsonProperty(PropertyName = "open")]
        public bool Open { get; set; }

        /// <summary>
        /// 是否勾选
        /// </summary>
        [JsonProperty(PropertyName = "checked")]
        public bool Checked { get; set; }

        /// <summary>
        /// 不可选
        /// </summary>
        [JsonProperty(PropertyName = "nocheck")]
        public bool Nocheck { get; set; }

         [JsonProperty(PropertyName = "children")]
        public List<SectionTreeNode> Children { get; set; }
    }
}
View Code

CS逻辑

 public partial class ArticleTree : System.Web.UI.Page
    {
        ArticleMoveBLL articleMoveBLL = new ArticleMoveBLL();
        protected void Page_Load(object sender, EventArgs e)
        {
            int classId;
            if (Request.Form["articleId"] != null)
            {
                classId = Convert.ToInt32(Request.Form["articleId"].ToString());
                 IList<TreeNodes> articleNodes =  articleMoveBLL.GetArticleByClassId(classId);
           


            string json = JsonConvert.SerializeObject(articleNodes);

            Response.Write(json);
            Response.End();
            }
        }
    }
View Code

这里只要注意一点就是返回json数据

相关推荐