用CSS 对TREEVIEW 的外观进行改造

最新推荐文章于 2021-06-22 16:17:30 发布
最新推荐文章于 2021-06-22 16:17:30 发布
阅读量2.1k 收藏
点赞数
文章标签： css table div tree
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/educast/article/details/3987335
版权
此代码来自 MS的 small business starter kit /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~* TREE VIEW CONTROL ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ .TreeView { border-bottom:1px dotted #B2B2B2 !important; } .TreeView div { margin-left:5px; } .TreeView table { border-top:1px dotted #B2B2B2 !important; } .TreeView div table { border-bottom:none !important; border-top:none !important; } .TreeView table td { padding:2px 0; } .LeafNodesStyle { } .RootNodeStyle { } /* ALL ELEMENTS */ .NodeStyle { } .ParentNodeStyle { background:yellow; } a.SelectedNodeStyle { background:#E5E5E5; display:block; padding:2px 0 2px 3px; } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ treeview 控件的代码 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

All Items

<%-- --%>
CodingSir
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ASP.NET -自定义 TreeView Web 服务器控件的外观
ulark的专栏
01-08 734
TreeView 控件的呈现是可完全自定义的，这使得可以使用多种多样的显示样式。　　若要自定义 TreeView 控件的外观，可以执行以下操作：　　 ·指定影响控件显示和呈现的 TreeView 控件属性。　　·指定一个 ImageSet 属性，该属性选择一组在运行时同控件一起呈现的内置图像。　　·指定用于控制 TreeView 控件内特定 TreeNode 对象组的显示及呈现特性的各图像和样式属
ASP.NET中的TreeView控件的使用
gengyudan的专栏
12-17 655
1、首先建立一个Default.aspx的主页面，再建立一个站点地图：Web.sitemap 2、Default.aspx的主页面的设计 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">
ASP.NET 中用TreeView实现树目录的实例
11-11
ASP.NET 中用TreeView实现树目录的实例
符合标准的TreeView实现(Div+CSS+JS+ASP.NET)
weixin_34357436的博客
03-19 128
01./// <summary> 02./// TreeView结点类 03./// </summary> 04.public class TreeNode 05.{ 06.private string name; 07.private string href; 08.private List<...
styletreeview.css--页面菜单
weixin_30908649的博客
02-12 117
此样式表用于修改页面菜单的显示样式 body { } div.AspNet-TreeView {margin: 2px 0px 20px 0px;padding: 0;} div.AspNet-TreeView ul { list-style: none; margin: 0px 0px 0px -20px; padding: 0;} .AspNet-TreeV...
使用CSS和JQueryHTML中的Treeview
04-07
2. **CSS样式**：接下来，我们使用CSS来美化Treeview。可以通过设置`display`属性来控制节点的展开和折叠状态，如`none`表示隐藏，`block`表示显示。还可以定义节点间的缩进，箭头图标等。例如： ```css .treeview...
纯HTML CSS JS目录树形框TreeView
07-15
如果数据是从服务器动态获取的，可以使用Ajax或者Fetch API进行异步请求，将数据动态渲染到TreeView中。 4. **无加载库**：不依赖任何外部库意味着所有的功能都需要手动编写，虽然这会增加开发工作量，但也提供了更...
js编写的treeview使用方法
10-21
JavaScript的TreeView可以通过添加额外的CSS样式进行美化，也可以通过扩展JavaScript代码来实现更复杂的交互功能，如异步加载、搜索、拖放等。 总的来说，使用JavaScript编写的TreeView是一种灵活的方式，可以在...
收集几款漂亮的CSS3按钮美化例子.rar
07-10
收集几款漂亮的CSS3按钮美化例子，这些按钮包括了背景渐变、圆角按钮、带图标的按钮、带序号的按钮、带外框阴影的按钮等，本演示代码更侧重于学习研究，代码的实际用途并不是很大。
好看的Winform.TreeView
03-25
自定义的美化TreeView源码和对应demo，样式好看，对初学者是很好的学习资料，然后也可用于项目中
div+css实现treeview功能
09-11
一个很实用的功能，div+css实现treeview功能
html5 tree view css,一个TreeView 样式表
weixin_39882948的博客
06-22 871
定义样式表1 HTML标记定义...`1、多个属性必须要用；分开·2、background-p_w_picpath:url(:/new/prefix1/p_w_picpaths/icon_num_1.png);设置背景图片background-position:center设置背景图片居中显...1.样式复用，方便网站的后期维护； 2.实现页面的精确控制，实现精美...
TreeView 设置样式
热门推荐
suntanyong88的专栏
11-02 1万+
参考微软demo做了 一个类似差不多样式
怎么双击对treeview进行编辑
最新发布
06-03
要实现双击编辑 Treeview 中的项目，你需要使用 Tkinter Treeview 组件的 `bind` 方法来绑定双击事件，并在事件处理函数中启用编辑功能。 以下是一个示例代码，可以实现双击 Treeview 中的项目进行编辑： ```python import tkinter as tk from tkinter import ttk class EditableTreeview(ttk.Treeview): def __init__(self, parent, **kwargs): super().__init__(parent, **kwargs) self.bind('<Double-1>', self.start_editing) def start_editing(self, event): """Start editing the item on double click""" # Get the item that was clicked item_id = self.identify_row(event.y) # Make sure an item was clicked and not the Treeview itself if item_id: # Get the text of the item that was clicked item_text = self.item(item_id)['text'] # Create an Entry widget to edit the item entry = tk.Entry(self, validate='key') entry.insert(0, item_text) # Set the Entry widget as the editor of the Treeview item self.item(item_id, text='', image='', tags=('editing',)) self.set(item_id, column=0, value='', text='', image='', tags=('editing',)) self.editing_id = item_id self.editing_widget = entry self.editing_value = item_text # Place the Entry widget in the Treeview self.pack_forget() self.place(in_=self, relx=1, anchor='w', x=self.bbox(item_id, column=0)['x'], y=self.bbox(item_id)['y']) entry.focus_set() entry.bind('<Return>', self.finish_editing) entry.bind('<Escape>', self.cancel_editing) entry.bind('<FocusOut>', self.cancel_editing) def finish_editing(self, event): """Finish editing the item""" new_value = self.editing_widget.get() self.set(self.editing_id, column=0, value=new_value) self.item(self.editing_id, text=new_value, image='', tags=('edited',)) self.editing_widget.destroy() self.editing_id = None self.editing_widget = None self.editing_value = None def cancel_editing(self, event): """Cancel editing the item""" self.set(self.editing_id, column=0, value=self.editing_value) self.item(self.editing_id, text=self.editing_value, image='', tags=('cancelled',)) self.editing_widget.destroy() self.editing_id = None self.editing_widget = None self.editing_value = None # Create the Treeview widget root = tk.Tk() treeview = EditableTreeview(root) treeview.pack() # Insert some items into the Treeview treeview.insert('', 'end', text='Item 1') treeview.insert('', 'end', text='Item 2') treeview.insert('', 'end', text='Item 3') # Start the main event loop root.mainloop() ``` 在这个示例中，我们创建了一个名为 `EditableTreeview` 的自定义 Treeview 组件，它继承自 Tkinter Treeview 组件，并覆盖了其 `__init__` 方法和 `start_editing` 方法。在 `__init__` 方法中，我们使用 `bind` 方法来绑定 `<Double-1>` 事件，即双击事件，当用户双击 Treeview 中的项目时，`start_editing` 方法会被调用。 在 `start_editing` 方法中，我们首先获取被点击的项目的 ID，然后创建一个 `Entry` 组件来编辑该项目。我们将 `Entry` 组件作为 Treeview 项目的编辑器，并将其放置在 Treeview 中。在 `Entry` 组件中，我们使用 `<Return>`、`<Escape>` 和 `<FocusOut>` 事件来完成、取消或离开编辑模式。 在 `finish_editing` 方法中，我们获取编辑器中的新值，并将其设置为 Treeview 项目的新值。在 `cancel_editing` 方法中，我们将编辑器中的值恢复为原始值。 最后，我们创建了一个 `EditableTreeview` 实例，并在其中插入了一些项目。运行程序后，你应该可以双击 Treeview 中的项目，并使用 `Entry` 组件编辑该项目。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值