asp.net

Question

我在asp.net中创建treeview并能够完美地绑定treeview。但是我的树视图看起来是下面的图像，它是树视图控件的默认布局。

我正在使用以下代码

 $(document).ready(function () {

            $("div[id=tvCategories] input[type=checkbox]").click(function () {
                $(this).closest('table').next('div').find('input[type=checkbox]').attr('checked', this.checked);

                $(this).parents('div').each(function (index) {
                    if ($(this).find('input[type=checkbox]:checkbox').length > 0) {
                        $(this).prev('table').find('input[type=checkbox]').attr('checked', true);
                    }
                });
            });

        });

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TreeView ID="tvCategories" NodeIndent="25"  OnTreeNodeDataBound="tvCategories_TreeNodeDataBound"   Style="font-family: 'Lato', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: 5px; margin-bottom: 5px; margin-left: 50px; color: Black; font-size: 12px"
                    runat="server" ShowCheckBoxes="All">

                </asp:TreeView>
            </ContentTemplate>
        </asp:UpdatePanel>

但我想要以下布局。我无法创建这个

请帮我创建一个。Trieeview控件是否符合此布局或通过其他方式绑定？

Answer 1

由于TreeView控件呈现的默认HTML（表 - ＆gt; Div - ＆gt; Table，Div等），您打算做的事情不可能优雅。

然而，您可以使用CSS控件适配器来更改默认HTML的呈现方式（UI - > Li - ＆gt;＆gt;＆gt; Li）。使用此方法呈现的HTML是嵌套的，因此可以使用CSS进行定位，以获得您想要实现的外观。您可能必须重写一些代码并创建自定义实现。

有关代码示例，请参阅http://samples.asp.net/cssadapters/TreeView.aspx。

我希望有所帮助！