Ztree实现带checkBox的下拉框

<%@ 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="" cellspacing="" class="table2">

            <tr>

                <td colspan="" class="title">

                    文章转移

                </td>

            </tr>

            <tr>

                <td class="style1" style="width: 300px" rowspan="">

                    <b>转换前文章类别ID为</b>：

                    <input id="citySel" type="text" readonly value="" style="width: 120px;" onclick="showMenu();" />

                </td>

                <td rowspan="" style="width: 300px">

                    <b>转换后文章类别ID为</b>：

                    <input id="citySe2" type="text" readonly value="" style="width: 120px;" onclick="showMenu1();" />

                </td>

            </tr>

           <tr>

                <td class="style1">

                    &nbsp;

                </td>

                <td>

                    &nbsp;

                </td>

            </tr>

            <tr>

                <td colspan="" 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>

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>

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

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

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 = , l = nodes.length; i < l; i++) {

        v += nodes[i].name + ",";

        vid += nodes[i].id + ",";

    }

    if (v.length > ) v = v.substring(, v.length - );

    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 > )) {

        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 = , l = nodes.length; i < l; i++) {

        v += nodes[i].name + ",";

        vid += nodes[i].id + ",";

    }

    if (v.length > ) v = v.substring(, v.length - );

    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 > ) {

        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 > )) {

        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);

});

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

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

  async: {

        enable: true,

        url: "/admin/Article/ClassIdTree.aspx",

        dataType: 'json',

        type: 'post',

        autoParam: ["id"]

    }

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

  data: {

        simpleData: {

            enable: true

        }

    },

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; }

    }

如果要使用自定义的数据类型则首先将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; }

    }

}

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();

            }

        }

    }

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

Ztree实现带checkBox的下拉框的更多相关文章

Extjs4中用combox做下拉带图片的下拉框
今天,莫名的来个一个需求,需要做的一个下拉框中,需要有图片,这不...谷歌+度娘然后找网友,终于搞定.现在感谢这些提供资料的友友... 效果如图:
kendo 级联加带搜索的下拉框以及js赋值
1‘.js给下拉框赋值 $("#UserRole").data("kendoDropDownList").value(dataItem.RoleName); $ ...
ajax版本带搜索的下拉框
demo地址:https://github.com/aa1356889/MyAjaxSelectSearch
带搜索的下拉框Chosen
一:参考 https://harvesthq.github.io/chosen/ Chosen是一个jQuery插件二:引入js文件 <link href="plug-in/chos ...
【Select2】带搜索框的下拉框美化插件
1 引入js css 文件 <script src="js/jquery-1.11.1.min.js"></script> <script src= ...
Jquery+json绑定带层次下拉框（select控件）
一.实现的效果图备注: 1.主要实现添加类别绑定到Ztree树之后,select下拉框在不刷新页面的情况下,通过Jquery重新绑定问题,增加用户体验度: 2.这个只是实现两层的绑定,通过sql语句 ...
树形下拉框ztree、获取ztree所有父节点，ztree的相关方法
参考:jQuery树形控件zTree使用小结需求添加.修改的终端需要选择组织,组织是多级架构(树状图显示). 思路 1.因为下拉框需要树状图显示,所以排除使用select做下拉框,改用input ...
一分钟掌握Android spinner下拉框
Android 自带的spinner下拉框控件是一个不错的系统控件.主要有两种实现方式: 1.静态的spinner 在res\values中加入一个city资源数组文件 2 <resources ...
pentaho cde 自定义复选下拉框 checkbox select
pentaho 自带的component 虽多,但是当用户需要在一个表格中查看多个组别的数据时,pentaho自带的单选框就不能实现了,所以复选下拉框势在必行,实现效果如下: 实现原理是借用了jqu ...

随机推荐

mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效
引用的css和图片失效的解决办法把样式引用文件的相对路径改成绝对路径就可以了比如原先的引用路径为:<link href="~/Content/css/style.css" ...
Java 集合系列 12 TreeMap
java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...
最小生成树练习2（Kruskal）
两个BUG鸣翠柳,一行代码上西天... hdu4786 Fibonacci Tree(生成树)问能否用白边和黑边构成一棵生成树,并且白边数量是斐波那契数. 题解:分别优先加入白边和黑边,求出生成树能包 ...
B+树索引和哈希索引的区别——我在想全文搜索引擎为啥不用hash索引而非得使用B+呢？
哈希文件也称为散列文件,是利用哈希存储方式组织的文件,亦称为直接存取文件.它类似于哈希表,即根据文件中关键字的特点,设计一个哈希函数和处理冲突的方法,将记录哈希到存储设备上. 在哈希文件中,是使用一个 ...
journal
dec 5 rpt prep exam dec 4 lie to me dec 3 exam dec 2 preparation for exam dec 1 preparation for exam ...
Flume数据传输事务分析[转]
本文基于ThriftSource,MemoryChannel,HdfsSink三个组件,对Flume数据传输的事务进行分析,如果使用的是其他组件,Flume事务具体的处理方式将会不同.一般情况下,用M ...
String类的写时拷贝
#include<iostream>using namespace std; class String;ostream& operator<<(ostream & ...
二模（3） day2
第一题: 题目大意:(难以概括,就不贴了把.) 解题过程: 1.担心被精度问题恶心,就把平均数的地方乘了N,这样只有最后计算的时候才会是小数.. 2.数组保存的时候蛋疼的没改成double.结果全部 ...
MongoDB Aggregate Methods(2) MonoDB 的 3 种聚合函数
aggregate(pipeline,options) 指定 group 的 keys, 通过操作符 $push/$addToSet/$sum 等实现简单的 reduce, 不支持函数/自定义变量 g ...
神奇的NOIP模拟赛 T2 LGTB 学分块
LGTB 学分块 LGTB 最近在学分块,但是他太菜了,分的块数量太多他就混乱了,所以只能分成3 块今天他得到了一个数组,他突然也想把它分块,他想知道,把这个数组分成3 块,块可以为空.假设3 块各自 ...

Ztree实现带checkBox的下拉框

Ztree实现带checkBox的下拉框的更多相关文章

随机推荐

热门专题