Question

我寻求解决方案并通过类似的问题，这些都没有帮助我实现我想要做的事情。我希望为我的复选框实现这种样式，以便它有点类似于树视图：

这就是我想要的风格和功能。但是，如果您使用此代码并将其粘贴到像我一样的c＃视图中，结果更像是：

当前样式表：

ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
    margin: 0 0 0 20px;
}

你可以看到这里生成的代码与上面的小提琴相同，但是每个父代的第一个后代都被推到了右边。我想做到这一点，所有这一切都很好地调整，就像在小提琴，但我似乎无法实现这一点。任何人有任何想法或知道如何做到这一点？

编辑：

<div>
    <ul style="display: list-item" id="root"></ul>
</div>

<script>
    var data = {
        id: 0,
        title: "root - not displayed",
        children: [
            <%int x = 0;
    int y = 0;
    int a = 0;

    foreach (var areaOfBusiness in Model.Regions)
       {
           x = x + 1;%>
{
                id: '<%: "id-" + x %>',
                title: '<%: areaOfBusiness.Text %>',

            children: [

                <% foreach (var sub in Model.SubRegions)
                       {
                           if (sub.RegionId.ToString() == areaOfBusiness.Value)
    { y = y + 1;%>
                {
                    id: '<%: "id-" + x + "-" + y%>',
                    title: '<%: sub.Name %>',

                    children: [
                        <% foreach (var country in Model.AOBCountries)
                           {
                               if (country.SubRegionId == sub.Id)
                               {
                                   a = a + 1;%>
                        {
                            id: '<%: "Country_id-" + x + "-" + y + "-" + a %>',
                            title: '<%: country.Name %>',
                            value: '<%: "Country_id-" + country.Id %>'
                        },
                        <% } %>
                        <% } %>
                    ]
                },
                <% } %>
             <% } %>  
           ]
},
<% } %>  
            ]
        };

    function addItem(parentUL, branch) {
        for (var key in branch.children) {
            var item = branch.children[key];
            $item = $('<li>', {
                id: item.id
            });
          $item.append($('<input>', {
                type: "checkbox",
                id: item.id,
                name: item.value
            }));
            $item.append($('<label>', {
                for: item.id,
                text: item.title
            }));
            parentUL.append($item);
            if (item.children) {
                var $ul = $('<ul>', {
                    style: 'display: none'
                }).appendTo($item);
                $item.append();
                addItem($ul, item);
            }
        }
    }

    $(function () {
        addItem($('#root'), data);
        $(':checkbox').click(function () {
            $(this).find(':checkbox').trigger('click');
            var matchingId = $(this).attr('id');
            if ($(this).attr('checked')) {
                $('input[id*=' + matchingId + ']').each(function () {
                    $(this).removeAttr('checked');
                    $(this).prop('checked', $(this).attr('checked'));
                });
            }
            else {
                $('input[id*=' + matchingId + ']').each(function () {
                    $(this).attr('checked', 'checked');
                    $(this).prop('checked', $(this).attr('checked'));
                });
            }
        });
        $('label').click(function () {
            $(this).closest('li').children('ul').slideToggle();

        });
    });

更新：代码包含在底部，希望这有帮助，而且我只需要它。

复选框样式像Treeview

0 个答案: