读书人

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

发布时间: 2012-05-13 16:39:43 作者: rapoo

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');              }          }        }    } 

读书人网 >asp.net

热点推荐