大气微电影类网站织梦模板完整版wordpress加密某一页面
表格是非常重要和复杂的一个控件，本节会用大量篇幅来把表格这东西力求讲清楚。
基本设置
表格结构
表格是 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表格数据
-
首先修改 Table View 的Content Mode 为Cell Based；
-
选择column，修改identifier，与程序代码中数据定义相匹配（参考下边代码示例）；
-
可以往单元格中添加不同的 cell，注意是cell而不是控件，这样就可以实现表格中的个性化展示了，如下图：
-
设置TableView的Deletegate和DataSource为默认的View Controller，拖动下图红框到UI导航的View Controller上面；
也可以通过代码设置self.tableView.delegate = self和self.tableView.dataSource = self -
定义表格数据，下面的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)],]}
- 扩展协议，加载数据
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表格数据（推荐）
- 首先修改 Table View 的Content Mode 为View Based；
- 选择column，修改identifier，与数据相匹配；（同上）
- 可以往单元格中添加不同的控件，注意是控件而不是cell，这样就可以实现表格中的个性化展示了：
- 设置TableView的Deletegate和DataSource为默认的View Controller；（同上）
- 定义表格数据（同上）
- 扩展协议，加载数据，要实现两个协议
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 表格数据
- 添加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"],]}
}
- 添加一个NSTableView控件，设置tableColumn的identifier和上面的datas名称一样；
- 表格列绑定到Array Controller，Model Key Path可以省略；
- 单元格绑定到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()}
表格行拖放
- 注册一个自定义事件；
- 实现 NSTableViewDataSource 把表格行号数据拷贝到剪切板对象中；
- 实现 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!)")}
表格右键菜单
- 拖动一个NSMenu到设计面板；
- 绑定menu对象到ViewController中；
- 实现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}}