您的位置: 首页  >  IT文章  >  ASP.NET  >  asp.net mvc3 中无限分类的实现方法,该如何处理

asp.net mvc3 中无限分类的实现方法,该如何处理

分类: IT文章 • 2022-05-02 23:45:39
asp.net mvc3 中无限分类的实现方法
有一个分类：
ID, Name, ParentID
1 分类一 0
2 分类二 0
3 分类三 1
4 分类四 1

需要实现功能：

<ul>
  <li> <a href="">分类一</a>
  <ul>
  <li>分类三</li>
  <li>分类四</li>
  <ul>
  </li>
  <li><a href="">分类二</a></li>
<ul>

需要在MVC3中用PartialViewResult实现，不要存储过程。

------解决方案--------------------
递归可以实现
------解决方案--------------------
没具体做过MVC，但是我想具体的实现逻辑是不变的，你可以先用递归把数据库里面的数据转换自己想要的格式，然后功过view传到前台，然后显示你想要的结构就可以了
------解决方案--------------------
探讨

没具体做过MVC，但是我想具体的实现逻辑是不变的，你可以先用递归把数据库里面的数据转换自己想要的格式，然后功过view传到前台，然后显示你想要的结构就可以了

------解决方案--------------------
看看这个对你有帮助吗!
http://www.cnblogs.com/liulikui/archive/2011/05/16/2047799.html
------解决方案--------------------
HTML code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="56gee 39℃" />
<title>Jquery实现无限极树状结构并动态添加增删改等编辑功能——56gee</title>
<link href="../styles/publicDefine.css" rel="stylesheet" type="text/css" />
<style type="text/css">
div, ul, li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

body {
    background-color: #FFFFFF;
    font-size: 12px;
    margin: 0px;
    padding: 0px;
}

#TreeList {
    background-color: #FFFFFF;
    margin-top: 6px;
    margin-right: 9px;
    margin-bottom: 6px;
    margin-left: 9px;
    border: 1px solid #5d7b96;
    padding-bottom: 6px;
    padding-left: 6px;
}
#TreeList .mouseOver {
    background-color: #FAF3E2;
}

#TreeList .ParentNode {
    line-height: 21px;
    height: 21px;
    margin-top: 2px;
    clear: both;
}

#TreeList .ChildNode {
    background-image: url(../demoImgs/Sys_ModuleIcos.png);
    background-position: 15px -58px;
    padding-left: 39px;
    line-height: 21px;
    background-repeat: no-repeat;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: dashed;
    border-right-style: dashed;
    border-bottom-style: dashed;
    border-left-style: dashed;
    border-top-color: #aabdce;
    border-right-color: #aabdce;
    border-bottom-color: #aabdce;
    border-left-color: #aabdce;
    cursor: default;
    clear: both;
    height: 21px;
    color: #314f6a;
}

#TreeList .title {
    float: left;
}
#TreeList .input {
    font-size: 12px;
    line-height: 18px;
    color: #FFF;
    height: 16px;
    background-color: #3F6B8F;
    width: 120px;
    text-align: center;
    margin-top: 1px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #1F3547;
    border-right-color: #FFF;
    border-bottom-color: #FFF;
    border-left-color: #1F3547;
    float: left;
}
#TreeList .editBT {
    float: left;
    overflow: visible;
}
#TreeList .editBT .ok {
    background-image: url(../demoImgs/Sys_ModuleIcos.png);
    background-repeat: no-repeat;
    background-position: 0px -89px;
    height: 13px;
    width: 12px;
    float: left;
    margin-left: 3px;
    padding: 0px;
    margin-top: 3px;
    cursor: pointer;
}
#TreeList .editBT .cannel {
    background-image: url(../demoImgs/Sys_ModuleIcos.png);
    background-repeat: no-repeat;
    background-position: 0px -120px;
    float: left;
    height: 13px;
    width: 12px;
    margin-left: 3px;
    padding: 0px;
    margin-top: 3px;
    cursor: pointer;
}

#TreeList .editArea {
    float: right;
    color: #C3C3C3;
    cursor: pointer;
    margin-right: 6px;
}

#TreeList .editArea span {
    margin: 2px;
}

#TreeList .editArea .mouseOver {
    color: #BD4B00;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #C9925A;
    border-right-color: #E6CFBB;
    border-bottom-color: #E6CFBB;
    border-left-color: #C9925A;
    background-color: #FFFFFF;
    margin: 0px;
    padding: 1px;
}

#TreeList .ParentNode .title {
    color: #314f6a;
    cursor: pointer;
    background-image: url(../demoImgs/Sys_ModuleIcos.png);
    background-repeat: no-repeat;
    padding-left: 39px;
}

#TreeList .ParentNode.show .title {
    font-weight: bold;
    background-position: 3px -27px;
}

#TreeList .ParentNode.hidden .title {
    background-position: 3px 4px;
}

#TreeList .ParentNode .editArea {
    color: #999;    
}
#TreeList .ParentNode.show {
    background-color: #d1dfeb;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #5d7b96;
    border-right-color: #5d7b96;
    border-bottom-color: #5d7b96;
    border-left-color: #5d7b96;
}

#TreeList .ParentNode.hidden {
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: dashed;
    border-right-style: dashed;
    border-bottom-style: dashed;
    border-left-style: dashed;
    border-top-color: #aabdce;
    border-right-color: #aabdce;
    border-bottom-color: #aabdce;
    border-left-color: #aabdce;
}

#TreeList .Row {
    clear: both;
    margin-left: 24px;
    background-image: url(../demoImgs/Sys_ModuleIcos2.png);
    background-repeat: repeat-y;
    background-position: 7px 0px;
}
</style>
<script type="text/javascript" src="../../js/jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    var PrentNodeClass = 'ParentNode';//父节点的标识
    var ChildNodeClass = 'ChildNode';//没有下级子节点的标识
    var ChildrenListClass = 'Row';//子节点被包着的外层样式
    var NewNodeName = '新建目录';//默认新建节点的名称
    var Orititle = 'Temptitle';//保存原来名称的属性名称
    
    var TModuleNode,TChildNode,TModuleNodeName;
    TModuleNode = $('#TreeList .'+PrentNodeClass);//顶层节点
    TChildNode = $('.'+ChildNodeClass);
    TModuleNodeName = $('#TreeList .' + PrentNodeClass + ' .title');//顶层节点名称
    TModuleNode.removeClass('show').addClass('hidden');
    if(TModuleNode.next().hasClass(ChildrenListClass)){
        TModuleNode.next().css('display','none');//紧跟的下一个是子节点
    }
    
    //========================编辑区域的HTML源码==============================
    function EditHTML(NewName){
      var str = '<div class="title">' + NewName + '</div>';
      str    += '<div class="editBT"></div>';
      str    += '<div class="editArea"><span>[编辑]</span><span>[添加同级目录]</span><span>[添加下级目录]</span><span>[删除]</span></div>';
      return str;
    }    
    
    //==========================树状展开收缩的效果============================
    TModuleNodeName.click(function(){
        TModuleNodeName_Click($(this));
    });
    
    //-------------------------------(定义)----------------------------------
    function TModuleNodeName_Click(Obj){
        if(Obj.has('input').length==0){//非编辑模式下进行
          var tempNode = Obj.parent();
          if(tempNode.hasClass('hidden')){
              tempNode.removeClass('hidden').addClass('show');
              if(tempNode.next().hasClass(ChildrenListClass)){
                tempNode.next().css('display','');
              }
          }
          else{
              tempNode.removeClass('show').addClass('hidden');
              if(tempNode.next().hasClass(ChildrenListClass)){
                  tempNode.next().css('display','none');
              }
          }
        }
    }

相关推荐