首页 > 代码库 > Ztree实现带checkBox的下拉框
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=http://www.mamicode.com/"../../Content/Ztree/Css/demo.css" rel="stylesheet" type="text/css" /> <link href=http://www.mamicode.com/"../../Content/Ztree/Css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" /> <script src=http://www.mamicode.com/"../../Content/jquery-1.4.2.min.js" type="text/javascript"></script> <script src=http://www.mamicode.com/"../../Content/Ztree/JS/jquery.ztree.core-3.5.js" type="text/javascript"></script> <script src=http://www.mamicode.com/"../../Content/Ztree/JS/jquery.ztree.excheck-3.5.js" type="text/javascript"></script> <script src=http://www.mamicode.com/"../../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="0" cellspacing="0" class="table2"> <tr> <td colspan="3" class="title"> 文章转移 </td> </tr> <tr> <td class="style1" style="width: 300px" rowspan="2"> <b>转换前文章类别ID为</b>： <input id="citySel" type="text" readonly value=http://www.mamicode.com/"" style="width: 120px;" onclick="showMenu();" /> </td> <td rowspan="2" style="width: 300px"> <b>转换后文章类别ID为</b>： <input id="citySe2" type="text" readonly value=http://www.mamicode.com/"" style="width: 120px;" onclick="showMenu1();" /> </td> </tr> <tr> <td class="style1"> </td> <td> </td> </tr> <tr> <td colspan="3" 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 = 0, l = nodes.length; i < l; i++) { v += nodes[i].name + ","; vid += nodes[i].id + ","; } if (v.length > 0) v = v.substring(0, v.length - 1); 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 > 0)) { 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 = 0, l = nodes.length; i < l; i++) { v += nodes[i].name + ","; vid += nodes[i].id + ","; } if (v.length > 0) v = v.substring(0, v.length - 1); 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 > 0) { 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 > 0)) { 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的下拉框
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。