标签:des style blog http io color ar os 使用
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="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="" style="width: 120px;" onclick="showMenu();" /> </td> <td rowspan="2" style="width: 300px"> <b>转换后文章类别ID为</b>: <input id="citySe2" type="text" readonly value="" 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数据
标签:des style blog http io color ar os 使用
原文地址:http://www.cnblogs.com/lihongchen/p/4097387.html