Giới thiệu
Gần đây, tôi đã phải đối mặt với một yêu cầu để cung cấp số tự động cho một ASP.NET TreeView và tôi đã sử dụng CSS quầy. Tôi cung cấp CSS tôi được sử dụng và TreeView đánh dấu để người khác có thể tìm thấy nó hữu ích.
Sử dụng Mã
Dưới đây là đánh dấu HTML cho ASP.NET TreeView kiểm soát tôi đang sử dụng. Xin vui lòng lưu ý của lớp CSS LinksTreeView tôi sử dụng cho TreeView và CSS class TreeItem được sử dụng cho các nút ( NodeStyle ).
Collapse | Sao chép Mã
Trích:
<asp:TreeView ID="LinksTreeView" Font-Names="Arial" Font-Size="12px" ForeColor="Black"
runat="server" CssClass="LinksTreeView">
<SelectedNodeStyle BackColor="#6699FF" ForeColor="White" />
<NodeStyle CssClass="TreeItem" />
</asp:TreeView>
|
Việc kiểm soát TreeView được hiển thị bên trong một container div với lớp chúng tôi chỉ định. Đối với mỗi nút của TreeView , có một bảng HTML. Tôi đang tạo ra CSS quầy cho các bảng bên trong div container và bằng cách sử dụng các phần tử HTML giả : trước với thẻ neo mà được tạo ra cho mỗi nút hiển thị phần số tại chỗ.
Collapse | Sao chép Mã
Trích:
<style type="text/css">
div.LinksTreeView bảng: first-child
{
truy cập thiết lập lại : treecount ;
}
div.LinksTreeView bảng
{
counter-increment : treecount ;
}
div.LinksTreeView td.TreeItem> a: trước khi
{
nội dung : quầy (treecount, ".") "."
font-weight : in đậm ; }
</ style>
|
Khi được sử dụng bên trong một UpdatePanel có một lỗi IE gây ra tất cả các số được thiết lập lại để 0 trên postbacks. Có một vài cách giải quyết liên quan đến một div trống và chèn một không gian vào nó. Nhưng tôi đã không thể giải quyết vấn đề hoàn toàn và tôi đã có để loại bỏ các UpdatePanel để sửa chữa vấn đề này trên IE.
Các điểm hấp dẫn
Đây là lần đầu tiên tôi đi qua quầy CSS và dễ dàng mà tôi có thể thêm số để một TreeView thực sự làm tôi viết mẹo này. Trước đây tôi đã được sửa đổi Node.Text bao gồm số đã chứng tỏ là một nỗi đau như tôi cũng phải thực hiện TreeView chỉnh sửa (cả hai cấu trúc và dữ liệu).
Các chủ đề khác cùng chuyên mục này:
