首页 > 代码库 > Ztree实现带checkBox的下拉框

Ztree实现带checkBox的下拉框

2024-08-02 03:27:32   226人阅读

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=http://www.mamicode.com/"../../Content/Ztree/Css/demo.css" rel="stylesheet" type="text/css" />    <link href=http://www.mamicode.com/"../../Content/Ztree/Css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />    <script src=http://www.mamicode.com/"../../Content/jquery-1.4.2.min.js" type="text/javascript"></script>    <script src=http://www.mamicode.com/"../../Content/Ztree/JS/jquery.ztree.core-3.5.js" type="text/javascript"></script>    <script src=http://www.mamicode.com/"../../Content/Ztree/JS/jquery.ztree.excheck-3.5.js" type="text/javascript"></script>    <script src=http://www.mamicode.com/"../../Content/Ztree/JS/ztreeInit.js" type="text/javascript"></script>    <style type="text/css">        .style1        {            width: 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="width: 300px" rowspan="2">                    <b>转换前文章类别ID为</b>：                    <input id="citySel" type="text" readonly value=http://www.mamicode.com/"" style="width: 120px;" onclick="showMenu();" />                </td>                <td rowspan="2" style="width: 300px">                    <b>转换后文章类别ID为</b>：                    <input id="citySe2" type="text" readonly value=http://www.mamicode.com/"" style="width: 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; width: 180px; height: 300px;">                        </ul>                    </div>                                        <div id="menuContent1" class="menuContent" style="display: none; position: absolute;">                        <ul id="treedesID" class="ztree" style="margin-top: 0; width: 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; width: 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数据

Ztree实现带checkBox的下拉框


联系
我们