Ztree实现带checkBox的下拉框

最新推荐文章于 2020-05-13 15:17:15 发布
最新推荐文章于 2020-05-13 15:17:15 发布
阅读量111 收藏
点赞数
文章标签： json xhtml ui
原文链接：http://www.cnblogs.com/lihongchen/p/4097387.html
版权

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
        {
            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="" style="width: 120px;" οnclick="showMenu();" />
                </td>
                <td rowspan="2" style="width: 300px">
                    <b>转换后文章类别ID为</b>：
                    <input id="citySe2" type="text" readonly value="" style="width: 120px;" οnclick="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数据

转载于:https://www.cnblogs.com/lihongchen/p/4097387.html

weixin_30376083
关注
zTree实现多选下拉框
08-14
使用zTree实现的可以多选的下拉框控件Demo
ztree节点后面复选下拉框
03-04
在ztree节点后面加了个复选下拉框,打开demo/cn/index.html,点击组合功能演示-radio_checkbox_mulitselect 共存节点看效果
49zTree - 带 checkbox 的多选下拉菜单
阿甘兄
04-26 761
效果图： 代码： <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - checkbox select menu</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> &lt...
下拉树形复选框
05-15
基于bootstrap, jQuery，ztree的下拉树状复选框
layer 下拉树形菜单带有复选框
05-22
该插件是改良的layer的树形插件，在原始的layer插件中的树形结构是没有复选框的，改良后可用以拿来做权限系统的权限选择
前端web select 多层级选择。利用 ztree.js 实现下拉框的多选和单选demo.有兴趣的可以了解一下。
03-02
在本教程中，我们将深入探讨如何利用 zTree.js 实现下拉框的多选和单选功能。 首先，zTree.js 提供了丰富的 API 和配置选项，使得我们可以自定义树状结构的显示样式、交互行为等。在创建 zTree 时，我们需要提供 ...
zTree可以添加到下拉框中
最新发布
09-25
如果你想将zTree添加到下拉框中作为选项，通常步骤如下： 1. 首先，在HTML中设置一个`<select>`元素作为下拉框，比如： ```html <select id="treeSelect" multiple="multiple"></select> ``` 2. 引入zTree的JS文件...
结合ztree的下拉框树形结构数据多选，单选
07-12
这通常通过设置zTree的配置参数来实现，例如设置`check.enable`为`true`启用复选功能，然后通过`check.chkStyle`设置为`radio.type`或`checkbox.type`来切换单选或多选模式。 在实际应用中，"数据可以是固定数据或...
zTree学习笔记一：实现checkbox、全选、取消全选功能
Gblfy_Blog
01-07 441
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css"&gt...
C# 带checkbox的多选下拉框
11-07
带checkbox的多选下拉框 原地址： http://www.codeproject.com/KB/miscctrl/customcombos.aspx
Ztree节点后面自定义checkbox
足迹
02-02 1768
1.引用JS，Css文件 2.html页面 3.JS代码 var GroupEdit = function () { var o = this; $(document).ready(function () { o.initialize(); }); }; var p = GroupEdit.prototype; p.i
zTree插件生成下拉复选树（可选择点击）
qq_33416416的博客
03-27 1362
之前看了很多 但都不是很详细，这次贴上的代码，希望新手能少走弯路，与君共勉 参考文献： http://www.php.cn/js-tutorial-352583.html https://www.cnblogs.com/julinhuitianxia/p/6817927.html 注意ztree接收的json格式一定要是 id pId name 一模一样否则报错undfind ...
ztree radio 树形的radio勾选操作（只能单选）
热门推荐
蓝色晴天
09-29 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;TITLE&gt; ZTREE DEMO &lt;/TITLE&gt;         &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;       
ztree做的选择带回（带 checkbox 的多选下拉菜单 ）
u010222318的专栏
04-14 2575
效果：
zTree点击文字勾选复选框
牛栏山矿泉水
09-08 897
1、问题背景 系统利用zTree插件生成下拉复选树，点击文字勾选复选框 2、实现源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;zTree点击文字勾选复选框&lt;/title&gt; &lt;meta http-equiv="content-type" content="text/html; char
element-ui el-tree 设置指定级别节点显示复选框el-checkbox
weixin_43899694的博客
05-13 5817
将一个选择框去掉，变成下图↓ 开始想到 选中第一个el-checkbox 隐藏 .my-tree .el-tree-node__content label.el-checkbox:nth-child(1) { display: none; } 但是这样写无效，选不到 百度到一些大神通过修改elementui源码实现 emm咸鱼不想看 最后想到可以既然不能单独去掉父级的，那就先全部去掉，再给子级的加上↓ .my-tree .el-tree-node__content label.el-checkbo.
js+css实现带复选框的下拉列表
huhengbin的博客
09-21 548
&lt;html&gt; &lt;body&gt; &lt;script language=javascript&gt; ie4=(document.all)?true:false; ns4=(document.layers)?true:false; function toExit(){ var args=toExit.arguments; var visible=args[0]; if(ns4...
实现基于select2和jquery-ztree的树形下拉框功能
资源摘要信息: "select2ztree.zip是一个基于select2和jquery-ztree实现的树形下拉框组件的压缩包文件。select2是一个广泛使用的jQuery插件，它可以将普通的HTML的元素转化为具有搜索功能的下拉框；而jquery-ztree是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值