结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
-
Treeview 参数解读
-
作为表格使用 Treeview
-
作为树使用 Treeview
-
Treeview 插入子节点
-
Treeview 事件
-
如何获取当前选中项
-
单选项获取
-
多选项获取
-
Tree 选中子节点
创建 Treeview 控件
创建 Treeview 使用 ttk.Treeview
类,语法如下:
tree = ttk.Treeview(master, options)
Treeview 参数解读
| 参数 | 作用 |
| — | — |
| columns | 接收一个列表(tuple),列表中的每个元素都代表表格中的一列(可以理解为 ID),列表的长度就是表格的列数。 |
| displaycolumns | 接收一个列表(tuple),列表每个元素都代表 columns
中列的编号,用于设置列表要显示的列,以及显示列的顺序(没有在列表中的列不会显示)。传入"#all"
显示所有列。 |
| height | 表格的高度,也就是能够显示的行数。 |
| padding | 内容距离组件边缘的距离。 |
| selectmode | 有 "extended"
(默认选项)、"browse"
、"none"
三种选项,分别代表多选(Ctrl
+鼠标左键),单选以及不能改变选项。 |
| show | 有 "tree"
、"headings"
、"tree headings"
三种选项,分别代表显示图标列(编号为 "#0"
)、不显示图标列(仅显示数值列)以及显示所有列(图标列和数值列)。 个人理解:用作树需要加上"tree"
,用作表使用"headings"
。 |
作为表格使用 Treeview
以下代码展示了将 Treeview 控件作为表格使用,展示一系列数据的方法:
from tkinter import *
from tkinter import ttk
“”"
魏大王学编程(www.weidawang.xyz)
tkinter 实用教程系列
Treeview 作为表格使用的简单案例
“”"
main = Tk()
data = [(1, “小明”, 23, ‘男’, ‘2021-09-21’), (2, “小强”, 23, ‘男’, ‘2021-09-21’),
(3, “小红”, 23, ‘女’, ‘2021-09-21’), (4, “铁头”, 23, ‘男’, ‘2021-09-21’)]
tree = ttk.Treeview(main, columns=(‘id’, ‘name’, ‘age’, ‘sex’, ‘birth’), show=“headings”, displaycolumns=“#all”)
tree.heading(‘id’, text=“编号”, anchor=W)
tree.heading(‘name’, text=“姓名”, anchor=W)
tree.heading(‘age’, text=“年龄”, anchor=W)
tree.heading(‘sex’,text=“性别”,anchor=W)
tree.heading(‘birth’, text=“出生日期”, anchor=W)
for itm in data:
tree.insert(“”,END,values=itm)
tree.pack(expand=1, fill=BOTH)
main.mainloop()
代码执行结果如下图所示:
作为树使用 Treeview
from tkinter import *
from tkinter import ttk
“”"
魏大王学编程(www.weidawang.xyz)
tkinter 实用教程系列
Treeview 作为树使用的简单案例
“”"
main = Tk()
data = [(1, “小明”, 23, ‘男’, ‘2021-09-21’), (2, “小强”, 23, ‘男’, ‘2021-09-21’),
(3, “小红”, 23, ‘女’, ‘2021-09-21’), (4, “铁头”, 23, ‘男’, ‘2021-09-21’)]
tree = ttk.Treeview(main, columns=(‘id’, ‘name’, ‘age’, ‘sex’,‘birth’), show=“tree headings”, displaycolumns=“#all”)
tree.heading(“#0”, text=“学校”, anchor=W)
tree.heading(‘id’, text=“编号”, anchor=W)
tree.heading(‘name’, text=“姓名”, anchor=W)
tree.heading(‘age’, text=“年龄”, anchor=W)
tree.heading(‘sex’, text=“性别”, anchor=W)
tree.heading(‘birth’, text=“出生日期”, anchor=W)
stu_root = tree.insert(“”, END, text=“学生”)
man = tree.insert(stu_root, END, text=“男”)
wom = tree.insert(stu_root, END, text=“女”)
for itm in data:
if(itm[3]==“男”):
tree.insert(man,END,text=itm[1],values=itm)
else:
tree.insert(wom,END,text=itm[1],values=itm)
tree.pack(expand=1, fill=BOTH)
main.mainloop()
代码执行结果:
如果将代码中 displaycolumns="#all"
修改为 displaycolums=()
,树的效果如下:
Treeview 插入子节点
向 Treeview 对象中插入一个子节点,需要使用 insert
方法:
itm = tree.insert(options)
insert
函数的返回值,就是插入节点的对象。
参数列表如下:
| 参数 | 描述 |
| — | — |
| parent | 指定父节点,如果需要插入根节点,传入""
。 |
| index | 指定插入位置,0
表示在头部插入,END
表示在尾部插入。 |
| text | 指定在图标栏展示的内容,也就是在编号"#0"
列展示的内容,只有 show
参数包含 tree
时才能看到。 |
| values | 指定在数据列展示的内容,也就是 columns
指定的列。 |
| image | 指定图标栏显示的图标,是一个PhotoImage
对象 |
Treeview 事件
Treeview 有三个虚拟事件分别是:
-
<<TreeviewSelect>>
:选中项发生变化时触发该事件; -
<<TreeviewOpen>>
:当菜单项open=True时触发该事件; -
<<TreeviewClose>>
:当菜单项open=False时触发该事件;
这些事件的使用方法和之前的控件一样,比较简单,下文有案例,不过多解释。
如何获取当前选中项
获取当前选中项有两种情况,第一种就是单选项的获取,比较简单,而多选项的获取稍微复杂了一点。
单选项获取
先使用 Treeview 的 focus() 方法获取当前焦点项,再利用 set
方法获取焦点项的值。
获取到的值就是在插入表、树子节点时时指定的 values
值。
foc = tree.focus()
val = tree.set(foc)
示例代码如下:
from tkinter import *
from tkinter import ttk
“”"
魏大王学编程(www.weidawang.xyz)
tkinter 实用教程系列
Treeview 事件案例
“”"
def onSelect(e):
itm = tree.set(tree.focus())
print(itm)
pass
main = Tk()
data = [(1, “小明”, 23, ‘男’, ‘2021-09-21’), (2, “小强”, 23, ‘男’, ‘2021-09-21’),
(3, “小红”, 23, ‘女’, ‘2021-09-21’), (4, “铁头”, 23, ‘男’, ‘2021-09-21’)]
tree = ttk.Treeview(main, columns=(‘id’, ‘name’, ‘age’, ‘sex’,
‘birth’), show=“headings”, displaycolumns=“#all”)
tree.heading(‘id’, text=“编号”, anchor=W)
tree.heading(‘name’, text=“姓名”, anchor=W)
tree.heading(‘age’, text=“年龄”, anchor=W)
tree.heading(‘sex’,text=“性别”,anchor=W)
tree.heading(‘birth’, text=“出生日期”, anchor=W)
for itm in data:
tree.insert(“”,END,values=itm)
tree.pack(expand=1, fill=BOTH)
tree.bind(“<>”,onSelect)
main.mainloop()
专业技能
一般来说,面试官会根据你的简历内容去提问,但是技术基础还有需要自己去准备分类,形成自己的知识体系的。简单列一下我自己遇到的一些题
- HTML+CSS
- JavaScript
- 前端框架
- 前端性能优化
- 前端监控
- 模块化+项目构建
- 代码管理
- 信息安全
- 网络协议
- 浏览器
- 算法与数据结构
- 团队管理
- 开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最近得空把之前遇到的面试题做了一个整理,包括我本人自己去面试遇到的,还有其他人员去面试遇到的,还有网上刷到的,我都统一的整理了一下,希望对大家有用。
其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等
由于文章篇幅有限,仅展示部分内容