1

树视图示例

野兔是我的模特：

public class EditUser
{
    public int Id { get; set; }
    public string UserId { get; set; }
    public string UserName { get; set; }
    public string Description { get; set; }
    public int ServiceCount { get; set; }
    public int TransCount { get; set; }
    public string Email { get; set; }

    public List<ServiceEnrolled> Services { get; set; }
}

public class ServiceEnrolled
{
    public string UserId { get; set; }
    public int ServiceId { get; set; }
    public string ServiceName { get; set; }
    public List<ServiceTransaction> Transactions { get; set; }
}

public class ServiceTransaction
{
    public int Id { get; set; }
    public string UserId { get; set; }
    public int ServiceId { get; set; }
    public string TransactionName { get; set; }
    public bool IsChecked { get; set; }
}

野兔是我的观点：

@model ServiceCatalogUpgrade.Models.EditUser
for (int i = 0; i < Model.Services.Count(); i++)
        {
    @Html.HiddenFor( x => x.Services[i].ServiceId)
            <div class="wtree">
                <ul class="ulclass">
                    <img alt="" width="18" height="18" class="expand" src="~/Images/minus.ico" /> 
                    <img alt="" width="18" height="18" class="collapse" src="~/Images/plus.ico" />
                    <input class="checkbox" type="checkbox"  />
                    <span style="font-weight: bold;">@Html.DisplayFor(x =>x.Services[i].ServiceName)</span>

                    @for (int j = 0; j < Model.Services[i].Transactions.Count(); j++)
                    {
                        <li style="list-style:none;">
                            @Html.EditorFor(x => x.Services[i].Transactions[j].IsChecked)
                            @Html.DisplayFor(x =>x.Services[i].Transactions[j].TransactionName)  
                        </li>
                        @Html.HiddenFor( x => x.Services[i].Transactions[j].ServiceId)
                        @Html.HiddenFor( x => x.Services[i].Transactions[j].UserId)
                        @Html.HiddenFor( x => x.Services[i].Transactions[j].TransactionName)     
                    }

                </ul> 
            </div> 
        }

野兔是我的 Jquery：

<script type="text/javascript">

$(".expand").click(function () {
    $(this).toggle();
    $(this).parent().find('.collapse').toggle();
    $(this).parent().find('li').toggle();
});
$(".collapse").click(function () {
    $(this).toggle();
    $(this).parent().find('.expand').toggle();
    $(this).parent().find('li').toggle();
});
//select all or deselect all checkboxs
$(".checkbox").click(function () {
    if ($(this).attr("checked") == undefined) {
        $(this).parent().parent().find("input[type='checkbox']").each(function () {
            $(this).removeAttr("checked");
        });
    }
    else {
        $(this).parent().parent().find("input[type='checkbox']").each(function () {
            $(this).attr("checked", "checked");
        });
    }
});

当我在互联网上搜索 TreeView 时，我认为所有 TreeView 示例都比看起来更难。我决定写代码。
我自己编写了这段代码。这种 Treeview 构建方法好吗？我可以优化这个 Jquery 代码吗？

4

0 回答 0