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

随机推荐

在Handler.ashx文件中使用session
使用jquery调用handler文件中的方法,需要使用session,默认生成的文件中,不可以直接使用session.按照以下步骤,即可以通过session与其他的aspx页面的session进行数 ...
Prim算法与Dijkstra算法的联系与区别
/* 图结构,邻接矩阵形式 */ ElemType nodes[n]; int edges[n][n]; prim_or_dijkstra( int index, bool usePrim ) /* ...
Check the difficulty of problems（POJ 2151）
Check the difficulty of problems Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 5457 ...
java转义字符探究恢复
今天工作的时候,遇到了个奇怪的问题,是关于字符串转义与替换的.最后终于解决了,特总结下. 小demo, package com.westward; public class Demo { /** * ...
安卓Json介绍（转）。
1.JSON(JavaScript Object Notation) 定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式, ...
jQuery中的quickExpr
jQuery 源码中的 quickExpr 是用来检测参数 selector 是否是复杂的 HTML 代码(如“abc<div>”)或 #id,匹配结果存放在数组 match 中 // A ...
bzoj 2440: [中山市选2011]完全平方数
#include<cstdio> #include<iostream> #include<cstring> #include<cmath> #defin ...
strstr strchr strrchr
通过函数的定义来区分: 1.strstr: 返回子串出现的第一次位置 char *strstr(const char *haystack, const char *needle) 可见,strstr函 ...
防止忘记初始化NSMutableArray的方法
在写项目的过程中,经常会遇到一些郁闷的事,往一个可变数组中添加一个模型数据时,经常会发现程序运行很正常,可是可变数组中就是没有任何数据,久病成医,我发现自己总是放一个错,就是NSMutableArra ...
[__NSCFString absoluteURL]错误的解决方案
Xcode提醒错误: -[__NSCFString absoluteURL]: unrecognized selector sent to instance 0x8c4d3a0 *** Termina ...

Ztree实现带checkBox的下拉框

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

随机推荐

热门专题