现在位置首页 / 项目实战 /正文

asp.net+ztree开发树形结构的自定义控件

作者: IT小兵 | 2015年3月19日| 热度:℃ | 评论: |参与:

先看效果图。

  1. 支持多级分类

  2. 支持单选

  3. 封装为asp.net自定义控件

Html代码:

自己引用jquery。我这里用到母版,没有在控件里引用jquery。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GoodsCategory.ascx.cs" Inherits="Kaitone.CommunityEBusiness.Web.UserControl.GoodsCategory" %>
<input type="text" id="citySel" style="cursor:default; " class="col-xs-12 col-sm-12" readonly="readonly" placeholder="选择商品分类" onclick="showMenu();"/>
<div id="menuContent" class="menuContent" style="display: none; position: absolute;z-index:9999">
    <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 200px; height: 260px;"></ul>
</div>
<script type="text/javascript" src="../../JScripts/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../../JScripts/jquery.ztree.excheck-3.5.js"></script>
<link href="../../Css/treecss/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script type="text/javascript" src="../../BusinessJs/Product/ProductCat.js"></script>

Js代码实现数据获取和业务逻辑:ProductCat.js

$(document).ready(function () {
    GetProductCat();
});
function GetProductCat() {
    var ajaxUrl = "../../Service/ProductHand.ashx";
    $.ajax({
        async: false,
        type: "post",
        url: ajaxUrl,
        data: { Operate: "catlist" },
        success: function (data, textStatus) {
            if (data != null) {
                zNodes = eval(data);
                if (zNodes != null && zNodes != "undefined") {
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                }
                else { alert("商品分类数据为空!"); return; }
            }
        },
        complete: function (XMLHttpRequest, textStatus) { },
        error: function (e) { alert("获取商品分类数据失败!"); return; }
    })
}
var setting = {
    view: {
        dblClickExpand: false
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        beforeClick: beforeClick,
        onClick: onClick,
        onDblClick: function (e,treeId, treeNode) {
            var check = (treeNode && !treeNode.isParent);
            if (check) hideMenu();
        }
    }
};
function beforeClick(treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
    zTree.expandNode(treeNode);
    var check = (treeNode && !treeNode.isParent);
    return check;
}
function onClick(e, treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
		nodes = zTree.getSelectedNodes(),
		v = "";
    nodes.sort(function compare(a, b) { return a.id - b.id; });
    for (var i = 0, l = nodes.length; i < l; i++) {
        v += nodes[i].name + ",";
    }
    if (v.length > 0) v = v.substring(0, v.length - 1);
    $("#citySel").attr("value", v);
}
function showMenu() {
    var cityObj = $("#citySel");
    var cityOffset = $("#citySel").offset();
    //$("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
    $("#menuContent").css({ left: "0px", 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 == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
        hideMenu();
    }
}
function GetCatSelected() {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
        nodes = zTree.getSelectedNodes(true),
        v = "";
    for (var i = 0, l = nodes.length; i < l; i++) {
        if (v.indexOf(nodes[i].id) == -1) v += "," + nodes[i].id;
    }
    if (v.length > 0) v = v.substr(1);
    return v;
}
function SetCatSelected(values) {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
    var node = zTree.getNodeByParam("id", values);
    zTree.selectNode(node);
    onClick(null, "treeDemo", node);
}

服务端提供数据:ProductHand.ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
using System.Web.SessionState;
using Kaitone.CommunityEBusiness.Common.Utilitiy;
using Kaitone.CommunityEBusiness.Common.Contract.Models;
using Kaitone.CommunityEBusiness.Common.Contract.ServiceInterface;
using Kaitone.CommunityEBusiness.Common.Contract;
using Kaitone.CommunityEBusiness.Common.Contract.WebModel;
namespace Kaitone.CommunityEBusiness.Web.Service
{
    /// <summary>
    /// ProductHand 的摘要说明
    /// </summary>
    public class ProductHand : IHttpHandler, IRequiresSessionState
    {
        IProduct IService = new ClientProxy<IProduct>().Instance;
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/json";
            string oper = CheckResponse.GetResponse("Operate");
            object returnobj = null;
            switch (oper.ToLower())
            { 
                case "catlist":
                    returnobj = GetCatList();
                    break;
                default:
                    break;
            }
            string returnvalue = CheckResponse.GetObjectJson(returnobj);
            context.htm = htm&(returnvalue);
            HttpContext.Current.ApplicationInstance.CompleteRequest();
        } 
        #region 获取商品分类的树的数据
        private string GetCatList()
        {
            IInfrastructureData IService1 = new ClientProxy<IInfrastructureData>().Instance;
            List<WY_Product_Cat> cats = IService1.GetWYProductCategoryList("", 1, 100000).Instance;
            StringBuilder sbList = new StringBuilder("[");
            BindTreeData(cats, 0, ref sbList);
            sbList.Append("]");
            return sbList.ToString();
        }
        //递归遍历列表
        private void BindTreeData(List<WY_Product_Cat> cats, int pid, ref StringBuilder spstr)
        {
            List<WY_Product_Cat> plst = cats.Where(i => i.ParentId == pid).ToList();
            foreach (WY_Product_Cat model in plst)
            {
                spstr.Append("{id:" + model.Id + ",pId: " + pid + ", name:\"" + model.Name + "\"},");
                BindTreeData(cats, model.Id, ref spstr);
            }
        }
        #endregion
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询