simpledata

simpledata

关注
发信
关注(28)粉丝(399)

Ztree实现带checkBox的下拉框

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="" 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文件时最好不要改变它原始的文件目录结构

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 = , 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数据

04-26 11:24
Powered by LMLPHP ©2024 simpledata 0.058054