当前位置： 首页 > news >正文

10. NSTableView Table 数据表格

news 2025/9/14 9:21:37

表格是非常重要和复杂的一个控件，本节会用大量篇幅来把表格这东西力求讲清楚。

基本设置

表格结构

表格是 OS X 组件中为数不多采用了MVC设计模式来实现的控件，即tableView–dataSource–Delegate，这种分层架构给处理数据带来了极大的便利性。先了解下表格的组成，如下：
在这里插入图片描述

  • NSTableView：由NSTableHeaderView + NSTableRowView组成；
  • NSScrollView：NSScrollView包装了NSTableView，它和NSTableView构成了最外围的对象，NSTableRowView 的视图由NSScrollView来管理；
  • NSTableHeaderView：为表头，由一组 NSTableHeaderCell 组成；
  • NSTableRowView：表示内容区，由一组 NSTableCellView组成；

  • NSTableViewDataSource：由多个NSTableColumn（即列视图）来定义；NSTableRowView 的数据由NSTableViewDataSource来定义，NSTableViewDataSource定义了一系列的显示回调方法；
  • NSTableViewDelegate：NSTableRowView 的代理由NSTableViewDelegate来定义，它提供了数据加载时的回调方法；

以下是UI的层级结构：
在这里插入图片描述

table 属性

  • content mode：设置table的cell模式，推荐使用view-based，cell-based是一种老设计；
  • columns：表示表格有多少列；
  • header：是否显示表头；
  • horizontal grid和 vertical grid：是否显示表格线；
  • background color：单元格背景色；
  • selection：是否允许行多选；

column 属性

  • title：标题；
  • state：是否可以编辑列名称；
  • identifer：列的唯一标识符，用于在数据源和代理回调中使用；
  • Table Cell View 的identifer：用于数据量大时可从缓存中获取可复用的cell单元视图，用于性能优化；

设置表格外观

主要是颜色等外观样式

    @IBOutlet weak var tableView: NSTableView!func tableStyleConfig() {//表格网格线设置self.tableView.gridStyleMask = [NSTableView.GridLineStyle.dashedHorizontalGridLineMask,NSTableView.GridLineStyle.solidVerticalGridLineMask]//表格背景self.tableView.backgroundColor = NSColor.white//背景颜色交替self.tableView.usesAlternatingRowBackgroundColors = true//表格行选中样式self.tableView.selectionHighlightStyle = .regular}

表格数据绑定

以下是三种表格数据绑定方法，推荐第二种方式。

Cell-Based表格数据

  1. 首先修改 Table View 的Content Mode 为Cell Based；

  2. 选择column，修改identifier，与程序代码中数据定义相匹配（参考下边代码示例）；
    在这里插入图片描述

  3. 可以往单元格中添加不同的 cell，注意是cell而不是控件，这样就可以实现表格中的个性化展示了，如下图：
    在这里插入图片描述

  4. 设置TableView的Deletegate和DataSource为默认的View Controller，拖动下图红框到UI导航的View Controller上面；
    在这里插入图片描述
    也可以通过代码设置 self.tableView.delegate = self和self.tableView.dataSource = self

  5. 定义表格数据，下面的updateData方法是自定义的，需要调用：

    //表格数据，这个datas属性会在协议实现时再加载使用var datas = [NSDictionary]()func updateData() {self.datas = [["name":"john","address":"USA","gender":"male","married":(1)],["name":"mary","address":"China","gender":"female","married":(0)],["name":"park","address":"Japan","gender":"male","married":(0)],["name":"Daba","address":"Russia","gender":"female","married":(1)],]}
  1. 扩展协议，加载数据
extension ViewController: NSTableViewDataSource {//返回表格数据行数func numberOfRows(in tableView: NSTableView) -> Int {return self.datas.count}//正常只读显示func tableView(_ tableView: NSTableView, objectValueFor tableColumn: NSTableColumn?, row: Int) -> Any? {let data = self.datas[row]//表格列的标识let key = tableColumn?.identifier//单元格数据let value = data[key!]return value} 
}

在这里插入图片描述

View-Based表格数据（推荐）

  1. 首先修改 Table View 的Content Mode 为View Based；
  2. 选择column，修改identifier，与数据相匹配；（同上）
  3. 可以往单元格中添加不同的控件，注意是控件而不是cell，这样就可以实现表格中的个性化展示了：
  4. 设置TableView的Deletegate和DataSource为默认的View Controller；（同上）
  5. 定义表格数据（同上）
  6. 扩展协议，加载数据，要实现两个协议
extension ViewController: NSTableViewDataSource {func numberOfRows(in tableView: NSTableView) -> Int {return self.datas.count}
}extension ViewController: NSTableViewDelegate {func tableView(_ tableView: NSTableView, viewFor tableColumn: NSTableColumn?, row: Int) -> NSView? {let data = self.datas[row]//表格列的标识let key = (tableColumn?.identifier)!//单元格数据let value = data[key]//根据表格列的标识,创建单元视图let view = tableView.makeView(withIdentifier: key, owner: self)let subviews = view?.subviewsif (subviews?.count)!<=0 {return nil}if key.rawValue == "name" || key.rawValue == "address" {let textField = subviews?[0] as! NSTextFieldif value != nil {textField.stringValue = value as! String}}if key.rawValue == "gender" {let comboField = subviews?[0] as! NSComboBoxif value != nil {comboField.stringValue = value as! String}}if key.rawValue == "married" {let checkBoxField = subviews?[0] as! NSButtoncheckBoxField.state = NSControl.StateValue(rawValue: 0)if (value != nil)  {checkBoxField.state = NSControl.StateValue(rawValue: 1)}}return view}}

Bindings 表格数据

  1. 添加ArrayControl 控件，然后绑定到View Controller的一个变量中；
    在这里插入图片描述
    实现代码如下：
import Cocoaclass ViewController: NSViewController {override func viewDidLoad() {super.viewDidLoad()updateData()}override var representedObject: Any? {didSet {// Update the view, if already loaded.}}dynamic var datas = [NSDictionary]()func updateData() {self.datas = [["name":"john","address":"USA"],["name":"mary","address":"China"],["name":"park","address":"Japan"],["name":"Daba","address":"Russia"],]}
}
  1. 添加一个NSTableView控件，设置tableColumn的identifier和上面的datas名称一样；
  2. 表格列绑定到Array Controller，Model Key Path可以省略；
  3. 单元格绑定到Model key path，选顶中的objectValue表示当前的行数据；
    在这里插入图片描述

动态编辑表格

在这里插入图片描述

协议实现

表格的操作，需要实现NSTableViewDataSource协议方法，否则无法保存数据：

    //动态编辑表格使用func tableView(_ tableView: NSTableView, setObjectValue object: Any?, for tableColumn: NSTableColumn?, row: Int) {let data = self.datas[row]//表格列的标识let key = tableColumn?.identifierlet editData = NSMutableDictionary.init(dictionary: data)editData[key!] = objectself.datas[row] = editData}

添加和删除行

    @IBAction func addTableRow(_ sender: NSButton) {let data = NSMutableDictionary()data["name"] = ""data["address"] = ""//增加数据到datas数据区self.datas.append(data)//刷新表数据self.tableView.reloadData()//定位光标到新添加的行self.tableView.editColumn(0, row: self.datas.count-1 , with: nil, select: true)}@IBAction func deleteTableRow(_ sender: NSButton) {//表格当前选择的行let  row = self.tableView.selectedRow//如果row小于0表示没有选择行if row<0 {return}//从数据区删除选择的行的数据self.datas.remove(at: row)//刷新表数据self.tableView.reloadData()}

表格行拖放

  1. 注册一个自定义事件；
  2. 实现 NSTableViewDataSource 把表格行号数据拷贝到剪切板对象中；
  3. 实现 NSTableViewDataSource 把表格行号数据复制到表格对象中；
//注册拖放事件，事件为一自定义的值
let kTableViewDragDataTypeName = "TableViewDragDataTypeName"
self.tableView.register(forDraggedTypes: [kTableViewDragDataTypeName])

实现协议方法

    func tableView(_ tableView: NSTableView, writeRowsWith rowIndexes: IndexSet, to pboard: NSPasteboard) -> Bool {//将表格行号拷贝到剪切板对象中let zNSIndexSetData = NSKeyedArchiver.archivedData(withRootObject: rowIndexes);pboard.declareTypes([kTableViewDragDataTypeName], owner: self)pboard.setData(zNSIndexSetData, forType: kTableViewDragDataTypeName)return true}func tableView(_ tableView: NSTableView, acceptDrop info: NSDraggingInfo, row: Int, dropOperation: NSTableViewDropOperation) -> Bool {let pboard = info.draggingPasteboard()let rowData = pboard.data(forType: kTableViewDragDataTypeName)let rowIndexes = NSKeyedUnarchiver.unarchiveObject(with: rowData!) as! NSIndexSetlet dragRow = rowIndexes.firstIndexlet temp = self.datas[row]self.datas[row] = self.datas[dragRow]self.datas[dragRow] = temptableView.reloadData()return true}

表格事件

定义表格常见的一些操作事件

数据选取

以下是表格行和列的选取方法，采用(X,Y)坐标系的方式：

        let row = self.selectedRowlet col = self.selectedColumn

行单击事件

需要实现 NSTableViewDelegate 协议中的方法，不需要设置绑定

    func tableViewSelectionDidChange(_ notification: Notification){let tableView = notification.object as! NSTableViewlet row = tableView.selectedRowprint("selection row \(row)")}

行双击事件

动态添加事件。

        //表格双击事件self.tableView.doubleAction = #selector(ViewController.doubleAction(_:))@IBAction func doubleAction(_ sender: AnyObject ) {let row = self.tableView?.selectedRowprint("double selection row \(row!)")}

表格右键菜单

  1. 拖动一个NSMenu到设计面板；
  2. 绑定menu对象到ViewController中；
  3. 实现NSMenuDelegate协议
@IBOutlet weak var tableMenu: NSMenu!
//表格菜单
self.tableView.menu = self.tableMenu
self.tableView.menu?.delegate = self

实现协议

//表格上下文菜单协议
extension ViewController: NSMenuDelegate {func menuNeedsUpdate(_ menu: NSMenu) {menu.removeAllItems()NSLog("menu clicked !")}}

不同菜单的写法

import Cocoaclass MyTableView: NSTableView {var menu1: NSMenu?var menu2: NSMenu?override func menu(for event: NSEvent) -> NSMenu? {let row = self.selectedRowlet col = self.selectedColumnif (row == 0 && col == 1) {return self.menu1}return  self.menu2}
}

表格排序

在这里插入图片描述

点击列头时出现排序升降箭头指示，其算法也可以自定义，在表格初始化后，可调用一次以下几个方法之一；

    //表格排序func tableSortConfig() {for tableColumn in self.tableView.tableColumns {//升序排序let sortRules = NSSortDescriptor(key: tableColumn.identifier.rawValue, ascending: true)tableColumn.sortDescriptorPrototype = sortRules}}func tableSortConfig2() {for tableColumn in self.tableView.tableColumns {//升序排序 使用字符串标准的比较函数let sortRules = NSSortDescriptor(key: tableColumn.identifier.rawValue, ascending: true, selector: #selector(NSString.localizedStandardCompare(_:)))tableColumn.sortDescriptorPrototype = sortRules}}func tableSortConfig3() {for tableColumn in self.tableView.tableColumns {//升序排序let sortRules = NSSortDescriptor(key: tableColumn.identifier.rawValue, ascending: true, comparator:{ s1,s2 inlet str1 = s1 as! Stringlet str2 = s2 as! Stringif str1 > str2 {return .orderedAscending}if str1 < str2 {return .orderedDescending}return .orderedSame})tableColumn.sortDescriptorPrototype = sortRules}}

编码实现

其实就是按步骤创建下列元素。
在这里插入图片描述
下面的代码需要完成以下界面效果
在这里插入图片描述

创建表格元素

基本元素定义

    //1、定义表格对象和滚动条对象，最外层对象let tableView = NSTableView()let tableScrollView = NSScrollView()//2、定义存储表格数据的变量var datas = [NSDictionary]()

其组装过程大概如下：

    //3、组装表格override func viewDidLoad() {super.viewDidLoad()//创建表格列self.tableViewConfig()//配置滚动条视图self.tableScrollViewConfig()//设置滚动条自动布局self.autoLayoutConfig()//加载更新数据self.updateData()}

创建表头

    func tableViewConfig() {self.tableView.focusRingType = .none//self.tableView.autoresizesSubviews = trueself.tableView.delegate = selfself.tableView.dataSource = selflet column1 = NSTableColumn(identifier: NSUserInterfaceItemIdentifier(rawValue: "name"))column1.title = "name"column1.width = 80column1.maxWidth = 100column1.minWidth = 50self.tableView.addTableColumn(column1)let column2 = NSTableColumn(identifier: NSUserInterfaceItemIdentifier(rawValue: "address"))column2.title = "address"column2.width = 80column2.maxWidth = 100column2.minWidth = 50self.tableView.addTableColumn(column2)}

设置滚动条样式

这块可有可无

    func tableScrollViewConfig() {self.tableScrollView.hasVerticalScroller = trueself.tableScrollView.hasVerticalScroller = falseself.tableScrollView.focusRingType = .noneself.tableScrollView.autohidesScrollers = trueself.tableScrollView.borderType = .bezelBorderself.tableScrollView.translatesAutoresizingMaskIntoConstraints = falseself.tableScrollView.documentView = self.tableViewself.view.addSubview(self.tableScrollView)}

设置布局

此处建议，使用了自动化布局窗口辅助，此处使用的是Masony，但如果用swiftui需要引入三方包

    func autoLayoutConfig() {let topAnchor = self.tableScrollView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 0)let bottomAnchor = self.tableScrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: 0)let leftAnchor =  self.tableScrollView.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 0)let rightAnchor = self.tableScrollView.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: 0)NSLayoutConstraint.activate([topAnchor, bottomAnchor, leftAnchor, rightAnchor])}

初始化数据

更新数据同时，需要实现表格代理协议

    func updateData() {self.datas = [["name":"john","address":"USA"],["name":"mary","address":"China"],["name":"park","address":"Japan"],["name":"Daba","address":"Russia"],]self.tableView.reloadData()}

实现NSTableViewDelegate协议

这里有很多方法可以按需定义

extension ViewController: NSTableViewDelegate {func tableView(_ tableView: NSTableView, viewFor tableColumn: NSTableColumn?, row: Int) -> NSView? {let data = self.datas[row]//表格列的标识let key = (tableColumn?.identifier)!//单元格数据let value = data[key]//根据表格列的标识,创建单元视图var view = tableView.makeView(withIdentifier: key, owner: self)if view == nil {let cellView = NSTableCellView()cellView.identifier = identifier;view = cellViewlet textField =  NSTextField()textField.translatesAutoresizingMaskIntoConstraints = falsetextField.isBezeled = falsetextField.drawsBackground = falsecellView.addSubview(textField)let topAnchor = textField.topAnchor.constraint(equalTo: cellView.topAnchor, constant: 0)let bottomAnchor = textField.bottomAnchor.constraint(equalTo: cellView.bottomAnchor, constant: 0)let leftAnchor =  textField.leftAnchor.constraint(equalTo: cellView.leftAnchor, constant: 0)let rightAnchor = textField.rightAnchor.constraint(equalTo: cellView.rightAnchor, constant: 0)NSLayoutConstraint.activate([topAnchor,bottomAnchor,leftAnchor, rightAnchor])}let subviews = view?.subviewsif (subviews?.count)!<=0 {return nil}let textField = subviews?[0] as! NSTextFieldif value != nil {textField.stringValue = value as! String}return view}func tableView(_ tableView: NSTableView, heightOfRow row: Int) -> CGFloat {return 30}}
http://www.lryc.cn/news/471505.html

相关文章：

  • javase笔记8---File与IO流
  • docker上传离线镜像包到Artifactory
  • 【专用名词的离线语音识别在2024年底的解决方法调查-会议签到的补充】
  • OS基础-
  • 《大型语言模型实战指南：应用实践与场景落地》一文详解大型语言模型的11种微调方法
  • 嵌入式浏览器 -- Chromium VS Firefox
  • 权限大、数量多、破坏强、管理难......企业特权访问管理怎么管?
  • UE5 第一人称示例代码阅读0 UEnhancedInputComponent
  • 如何在Linux下安装和配置Docker
  • apisix的原理及作用,跟spring cloud gateway有什么区别?
  • 华为HarmonyOS实现实时语音识别转文本
  • DIY可视化-uniapp悬浮菜单支持拖动、吸附-代码生成器
  • HTTP cookie 与 session
  • 智慧停车场导航系统架构及反向寻车系统解决方案
  • 【小程序上传图片封装2024，支持多图，带进度，上传头像】
  • [A-14]ARMv8/ARMv9-Memory-内存模型的类型(Device Normal)
  • 驾校管理系统|基于java和小程序的驾校管理系统设计与实现(源码+数据库+文档)
  • @Mapper使用中遇到的问题解法汇总
  • 深度学习：YOLO V3 网络架构解析
  • SpringCloudAlibaba-Sentinel-熔断与限流
  • mysql中的mvcc理解
  • ETF申购赎回指南：详解注意事项与低费率券商推荐！
  • List＜T＞属性和方法使用
  • 记一次：使用使用Dbeaver连接Clickhouse
  • Java面向对象编程进阶（四）
  • 【51单片机】第一个小程序 —— 点亮LED灯
  • 如何通过自动化有效地简化 Active Directory 操作？
  • Java-POI导出EXCEL（动态表头）
  • 利用 Direct3D 绘制几何体—9.流水线状态对象
  • 【开源项目】libfaketime安装、使用——小白教程