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 ...

随机推荐

Java 集合系列 02 Collection架构
java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...
《转》---使用递归方法DataTable 绑定 TreeView
转自:http://blog.sina.com.cn/s/blog_8944756d01016yaj.html 前台: <asp:View ID="view0" runat= ...
声明式编程——抽象程度更高，关注是什么（what），而非如何做（how）
CSDN:AngularJS的设计理念是什么?灵感来自于什么? Misko:AngularJS遵循的设计理念是--构建UI应该是声明式的.这也是AngularJS中标识符(directives)想法的 ...
iOS App Icon图标尺寸规范
Commit to AppStore:1024*1024 //for App IconIcon-60@3x.png:180*180 //iPhone 6 Plus (@3x)Icon-60@2x.pn ...
bzoj 2561: 最小生成树
#include<cstdio> #include<iostream> #include<cstring> #define M 100009 #define inf ...
ARM安装ROS- indigo
Ubuntu ARM install of ROS Indigo 溪西创客小屋 There are currently builds of ROS for Ubuntu Trusty armhf. T ...
在oracle中使用Trigger
1.初始目标在对表h1插入一条数据时,同时插入一条重复的数据(只有主键不同) 2.在PL/SQL里New一个Trigger或者手动敲入代码先说明一下,表h1包括4列ID.C1.C2.C3 crea ...
JSP中的EL
1.为什么要使用EL 使用<jsp:getProperty>,只能访问bean属性的性质,不能访问嵌套性质.例如一个含有Dog对象的Person对象. 当然使用脚本可以工作,但是如果不想使 ...
入門必學NO.1 Android 初學特訓班(第四版) 目錄
第 01 章敲開 Android 的開發大門工欲善其事,必先利其器,要學習 Android 應用程式,先取得功能強大的開發工具,就可讓學習事半功倍. 1.1 Android 是啥米?1.2 建構 A ...
SQlServer 从系统表 sysobjects 中获取数据库中所有表或存储过程等对象
[sysobjects] 一.概述系统对象表. 保存当前数据库的对象,如约束.默认值.日志.规则.存储过程等,该表中包含该数据库中的表存储过程视图等所有对象在sqlserver2005,sql ...

Ztree实现带checkBox的下拉框

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

随机推荐

热门专题