效果图

使用图标

CSS样式

/*商品分类*/
.goodsCategory .firstCategory { background: url("/admin_icon.gif") no-repeat scroll 0 -296px transparent; padding-left: 10px; }
.goodsCategory .category { background: url("/admin_icon.gif") no-repeat scroll 0 -358px transparent; padding-left: 10px; }
.pointer { cursor: pointer; }
/*查看品牌*/
.BrandDivDialog{  height: 120px;overflow-y: scroll; border: 1px solid #cccccc; line-height:20px; width:350px;}
.BrandDivDialog div.htm{ padding:5px;color: #1A54B0;}

JS代码

$(document).ready(function ()
{
    var $goodsCategoryName = $(".goodsCategory .goodsCategoryName");
    // 树折叠
    $goodsCategoryName.click(function ()
    {
        var grade = $(this).parent().attr("grade");
        var isHide;
        $(this).parent().nextAll("tr").each(function ()
        {
            var thisLevel = $(this).attr("grade");
            if (thisLevel <= grade)
            {
                return false;
            }
            if (isHide == null)
            {
                if ($(this).is(":hidden"))
                {
                    isHide = true;
                } else
                {
                    isHide = false;
                }
            }
            if (isHide)
            {
                $(this).show();
            } else
            {
                $(this).hide();
            }
        });
    });
    $(".goodsCategory tr.Others").hide();    
    $(function () {
        $(".ClickBrandDiv").live("click", function () {
            $(".BrandDivDialog div.htm").html($(this).next(".BrandDivHtml").html());
            Dialog($(".BrandDivDialog"), $(this).attr("tit") + "--品牌", null, false); 
        });
    });
});
function DeleteProductType(productTypeId) {
    if (confirm("确定删除此商品分类?")) {
        $.ajax({
            url: '<%=Url.Action("DeleteXShop_ProductCategory") %>',
            tpye: 'Post',
            data: 'ids=' + productTypeId,
            success: function (msg) {
                if (msg == "true") {
                    $("body").showMessage("删除商品分类成功");
                    window.location = location;
                }
                else {
                    $("body").showMessage("操作失败，请稍后再试");
                }
            }
        });
    }
}

展示数据代码

<table class="table1 goodsCategory" style="display: none;">
    <tr>
        <th class="C_olumn PC_Title">分类名称 </th>
        <th class="C_olumn PC_SPKSum">商品库数量 </th>
        <th class="C_olumn PC_Sort">排序 </th>
        <th class="C_olumn PC_Sign">标识 </th>
        <th class="C_olumn PC_IsHomeShow">首页 </th>
        <th class="C_olumn PC_HomeShowSort">首页排序 </th>
        <th style="width: 250px;">操作 </th>
    </tr>
    <%int i = 0; foreach (KeyValuePair<DealMvc.Model.XShop_ProductCategory, string> DE in _Pager)
        {
            DealMvc.Model.XShop_ProductCategory _XShop_ProductCategory = (DealMvc.Model.XShop_ProductCategory)DE.Key;
            bool is_del_onclick = XShop_ProductCategory.GetModelList(t => t.ProductCategory_ID == _XShop_ProductCategory.id).Count == 0;
             
            i++;%>
    <tr cid='<%=_XShop_ProductCategory.id %>' grade="<%=_XShop_ProductCategory.PC_Level-1 %>" class="<%=_XShop_ProductCategory.PC_Level==1?"":"Others" %>">
        <td class="C_olumn PC_Title goodsCategoryName"><span class="pointer <%=_XShop_ProductCategory.PC_Level==1?"firstCategory":"category" %>" style="margin-left: <%=(_XShop_ProductCategory.PC_Level)*20%>px;">
            <%=_XShop_ProductCategory.PC_Title%></span> </td>
        <td class="C_olumn PC_SPKSum">
            <a class='SmallButton' onclick='top.AddLabel("商品库列表","<%=Url.Action("GoodsLibraryList", new { ProductCategoryID = _XShop_ProductCategory.id })%>", location.href )'>[<%=_XShop_ProductCategory.Get商品库数量()%>]</a>
        </td>
        <td class="C_olumn PC_Sort">
            <%=_XShop_ProductCategory.PC_Sort.JSubString(30)%>
        </td>
        <td class="C_olumn PC_Sign">
            <%=_XShop_ProductCategory.PC_Sign%>
        </td>
        <td class="C_olumn PC_IsHomeShow"><%=_XShop_ProductCategory.PC_IsHomeShow ? "[显示]" : "[隐藏]"%> </td>
        <td class="C_olumn PC_HomeShowSort"> <%=_XShop_ProductCategory.PC_HomeShowSort.JSubString(30)%> </td>
        <td>
            <%--<a class='SmallButton' href="<%=Url.Action("List","Product", new {pcid=_XShop_ProductCategory.id })%>" target="_blank">[浏览]</a>--%>
            <a class='SmallButton' onclick='top.AddLabel("编辑/查看商品分类","<%=Url.Action("XShop_ProductCategoryAE", new { id = _XShop_ProductCategory.id })%>", location.href )'>[编辑/查看]</a>
            <a class='SmallButton ProductNoType' <%if (is_del_onclick){ %> onclick="DeleteProductType(<%=_XShop_ProductCategory.id.ToInt32() %>)" <%}else{ %>style="cursor:default; color:#999" <%} %>>[删除信息]</a>
            <%string brandstr = _XShop_ProductCategory.BrandNameList.JshowWebText();
                if (brandstr != "[暂无]" && _XShop_ProductCategory.PC_Level==3)
                {%>
            <a class='SmallButton ClickBrandDiv' tit="<%=_XShop_ProductCategory.PC_Title%>" >[查看品牌]</a>
            <div class="hide BrandDivHtml"><%=_XShop_ProductCategory.BrandNameList.JshowWebText()%></div>
            <%} %>
        </td>
    </tr>
    <%}
        if (_Pager.Count == 0)
        { %>
        <tr>
            <td style="text-align:center; color:red" colspan="4">没有分类，请添加...</td>
        </tr>
    <%} %>
</table>
<div class="BrandDivDialog hide"><div class="htm"></div><div class="cb"></div></div>

业务逻辑方法

/// <summary>
/// 商品分类列表
/// </summary>
/// <param name="Page"></param>
/// <returns></returns>
public ActionResult XShop_ProductCategoryList(int? Page)
{
    Dictionary<Model.XShop_ProductCategory, string> _Pager = b_BLL_XShop_ProductCategory.GetTreePageList(0, 0);
    ViewData["Pager"] = _Pager;
    IsSaveForm = true;
    return View();
}

/// <summary>
/// list pager
/// </summary>
/// <param name="SelectID"></param>
/// <param name="StopID"></param>
/// <returns></returns>
public Dictionary<Model.XShop_ProductCategory, string> GetTreePageList(int SelectID, int StopID)
{
    Dictionary<Model.XShop_ProductCategory, string> list = new Dictionary<Model.XShop_ProductCategory, string>();

    GetTreeListPage_Sub(list, 0, "", SelectID, StopID);

    return list;
}

private void GetTreeListPage_Sub(Dictionary<Model.XShop_ProductCategory, string> list, int NowID, string Index, int SelectID, int StopID)
{
    DealMvc.WebCache.WebCache.Close();
    List<Model.XShop_ProductCategory> XShop_ProductCategoryList = Model.XShop_ProductCategory.GetModelList(int.MaxValue, t => t.ProductCategory_ID == NowID, t => t.PC_Sort.lb_Desc()).List;
    DealMvc.WebCache.WebCache.Reset();
    foreach (Model.XShop_ProductCategory _XShop_ProductCategory in XShop_ProductCategoryList)
    {
        if (StopID == (_XShop_ProductCategory.id ?? 0)) continue;
        string select = SelectID == (_XShop_ProductCategory.id ?? 0) ? " selected='selected' " : "";

        _XShop_ProductCategory.PC_Title = Index + _XShop_ProductCategory.PC_Title;
        list.Add(_XShop_ProductCategory, string.Format("<option {2} value='{0}'>{1}</option>", _XShop_ProductCategory.id, _XShop_ProductCategory.PC_Title, select));

        GetTreeListPage_Sub(list, _XShop_ProductCategory.id ?? 0, Index, SelectID, StopID);
    }
}