如何使用 jquery 在 MVC 中创建动态文件夹树结构

Question

这是一个动态文件夹树结构，适用于最近从普通 ASP.Net 转换到 MVC 版本的用户： 我没有在这里发布任何问题，只是给出一个场景和它可以帮助某人的解决方案......所以请不要为此感到冒犯

场景是我在数据库中的一个表中有一些数据，它就像一个典型的父子表，一个包含唯一 ID 的表及其父 ID，它也是该表的 ID

像这样：

MemberID                       UplineID
 admin                          self
 C1                             admin
 C2                             admin
 C3                             C1
 C4                             C2

所以树对于管理员来说是这样的：

    C1
     |
      --- C3
    C2
     |
      --- C4

Answer 1

这是我为实现这一目标所做的：

这是一个存储过程：

CREATE proc [dbo].[getTreeStructureForMember]
(
   @uplineID nvarchar(50)
)
as
begin

    select * from Member_detail where SponsorID=@uplineID order by JoiningDate

end

在控制器中：

    public ActionResult MemberTreeStructure()
    {
        return View();
    }

    public List<getTreeStructureForMember_Result> getTree(string MemberID)
    {
        var data = db.getTreeStructureForMember(MemberID).ToList();

        return data;
    }

    public JsonResult getTreeDownline(string MemberID)
    {
        var data = getTree(MemberID);

        return Json(data, JsonRequestBehavior.AllowGet);
    } 

在视图中：

    <script type="text/javascript">
    $(document).ready(function () {
    $('#btnShow').click(function () {
        var memberid = $('#txtMemberID').val();
        if (memberid == '') {
            $('#txtMemberID').addClass('ErrorControl');
            return false;
        }

        $("#btnShow").css({ display: "none" });
        $("#loader").css({ display: "inline" });

        $.post('/Member/tree',
        {
            "MemberID": memberid
        },
        function (data, status) {


            $("#loader").css({ display: "none" });
            $("#btnShow").css({ display: "inline" });
            $("#result").html(data);

        });

    });

     $(document).on('click','.tree li.parent_li > span', function (e) {
            var children = $(this).parent('li.parent_li').find(' > ul > li');
            if (children.is(":visible")) {
                children.hide('fast');
                $(this).attr('title', 'Expand this tree').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
            } else {
                children.show('fast');
                $(this).attr('title', 'Collapse this tree').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
            }
            e.stopPropagation();
        }); 

});
 </script>

 <div class="table-section">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table-style">
    <tr>
        <td style="width: 25%">
        </td>
        <td style="width: 25%">
            <input type="text" id="txtMemberID" class="textfield" />
        </td>
        <td style="width: 25%">
            <input type="button" value="Show" class="normal-button2" id="btnShow" />
            <img id="loader" src="../../Content/BlueOpal/loading.gif" style="display: none; vertical-align: bottom" />
        </td>
        <td style="width: 25%">
        </td>
    </tr>
</table>
</div>
<div id="result" class="tree">
</div>

在 css 中：

  .tree
{
    /*min-height: 20px;*/
    height:auto;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #fbfbfb;
    border: 1px solid #999;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.tree li
{
    list-style-type: none;
    margin: 0 0 0 70px;
    padding: 10px 5px 0 5px;
    position: relative;
}
.tree li::before, .tree li::after
{
    content: '';
    left: -36px;
    position: absolute;
    right: auto;
}
.tree li::before
{
    border-left: 1px solid #999;
    bottom: 50px;
    height: 100%;
    top: 0;
    width: 1px;
}
.tree li::after
{
    border-top: 1px solid #999;
    height: 20px;
    top: 25px;
    width: 41px;
}
.tree li span
{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #999;
    border-radius: 5px;
    display: inline-block;
    padding: 3px 8px;
    text-decoration: none;
}
.tree li.parent_li > span
{
    cursor: pointer;
}
.tree > ul > li::before, .tree > ul > li::after
{
    border: 0;
}
.tree li:last-child::before
{
    height: 30px;
}
.tree li.parent_li > span:hover, .tree li.parent_li > span:hover + ul li span
{
    background: #eee;
    border: 1px solid #94a0b4;
    color: #000;
}
.icon-minus-sign
{
        background: url(../Images/minusTree.png) no-repeat;
        margin: 0;
        padding: 0 6px 0 9px;
}
.icon-plus-sign
{
        background: url(../Images/plusTree.png) no-repeat;
        margin: 0;
        padding: 0 6px 0 9px;
}