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

随机推荐

一年成为Emacs高手(像神一样使用编辑器)
作者: 陈斌(redguardtoo) 版本号: 20150424 更新时间: <2015-04-24 Fri> 原创时间: <2012-01-31 Tue> 版权: 本文采用 ...
委托传参，lambda
今天一朋友问到一问题,怎么在timer的委托里面传参数,我初一想Invoke 可以传参数吧,我就说了. 后来他说这个委托是微软定义,不能变参数,于是我就自己写了一段代码试试. 我最初写的代码如下 p ...
Java集合——Map接口
1.定义 Map用于保存存在映射关系<key,value>的数据.其中,key值不能重复(使用equals()方法比较),value值可以重复 2.方法 V put(key,value) ...
PHP超级全局变量——Session 变量
PHP session 变量用于存储有关用户会话的信息,或更改用户会话的设置.Session 变量保存的信息是单一用户的,并且可供应用程序中的所有页面使用. PHP Session 变量当您运行一个 ...
getWritableDatabase()与getReadableDatabase()方法
一旦在程序中得到了SQLiteOpenHelper对象之后,程序无须使用SQLiteDatabase的静态方法创建SQLiteDatabase实例,而且可以使用getWritableDatabase( ...
S1：函数上下文
函数的上下文是可以变化的,因此,函数内的this也是可以变化的,函数可以作为一个对象的方法,也可以同时作为另一个对象的方法,总之,函数本身是独立的.可以通过Function对象上的call或者appl ...
bzoj 2037: [Sdoi2008]Sue的小球
#include<cstdio> #include<iostream> #include<algorithm> using namespace std; struc ...
[转载]查看基于Android 系统单个进程内存、CPU使用情况的几种方法
转载自: http://www.linuxidc.com/Linux/2011-11/47587.htm 一.利用Android API函数查看1.1 ActivityManager查看可用内存. A ...
COleDateTime类型的应用
使用COleDateTime类1) 获取当前时间. CTime time; time = CTime::GetCurrentTime();2) 获取时间元素. int y ...
（转载）重新对APK文件签名
1.将证书(debug.keystore)复制到与需要重新签名的apk文件相同的目录下(如:复制到D:\Sign) 2.在cmd中切换到需要重新签名的apk文件的目录下 3.使用WinRAR打开要重新 ...

Ztree实现带checkBox的下拉框

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

随机推荐

热门专题