添加Table view

新建一个Cocoa App project, 选中"use story.board”, 将NSTableView加到main view里面

new project

添加Constraint使table view 充满整个view.

image.png

缺省的table column只能显示文字， 如果我们需要同时显示图片或者其他，就需要另一种

image.png

可以修改column名字。

image.png

, 设置identity, identifier 成唯一的id, 比如nameCellID

image.png

继续添加其他的column, column里可以只有文字，也可以使用其他控件，比如我们可以添加一个Button， 一个Checkbox

image.png

设置Column属性

• 选中column, 可以设置每个column 的宽度和高度
  image.png
  
  
  image.png

• 可以设置Table的其他属性，比如背景色，字体，颜色，单选还是多选，是否需要headers等

  
  
  image.png

添加referencing outlets 和 actions

下面我们要打开“Assistant Editor”

image.png

选中Table View, 再选ViewController.h文件，如下图New Referencing Outlet

image.png

输入tableView作为变量名，然后 connect

image.png

这样ViewController.h就变成如下

#import <Cocoa/Cocoa.h>
#import "TableDataList.h"

@interface ViewController : NSViewController
{
    @private
    TableDataList* tableDataList;
}
@property (weak) IBOutlet NSTableView *tableView;

@end

数据源

为了给tableView动态添加数据, 我们需要新加一个cocoa类TableDataList，实现协议 NSTableViewDataSource 和 NSTableViewDelegate。
当然我们还需要一个数组用于存储数据，几个基本的增删方法

TableDataList.h

@interface TableDataList : NSObject<NSTableViewDataSource, NSTableViewDelegate>
{
    @private
    NSMutableArray  *tableDatas;
}
- (id) init;
- (void) addData:(NSString*) name;
- (void) removeData:(NSString*) name;
- (NSString*) getData:(NSInteger)index;
@end

TabaleDataList.m

- (NSInteger)numberOfRowsInTableView:(NSTableView *)tableView {
    return tableDatas.count;
}

和

- (NSView* )tableView:(NSTableView*)tableView viewForTableColumn:(nullableNSTableColumn*)tableColumn row:(NSInteger)row 

前者返回当前有多少行， 后者用于设置每个column数据。 比如我们上面的第一个column要显示一个人名和图像，就可以这么写

- (NSView* )tableView:(NSTableView *)tableView
  viewForTableColumn:(nullable NSTableColumn *)tableColumn
                  row:(NSInteger)row {
    NSTableCellView *cell = nil;
    if (tableColumn == tableView.tableColumns[0]) {
        cell = [tableView makeViewWithIdentifier:@"nameCellID" owner:nil];
        cell.textField.stringValue = [tableDatas objectAtIndex:row];
        cell.imageView.image = [NSImage imageNamed:@"other.png"];
    }
    return cell;
}

这里的 “nameCellID” 就是我们之前定义的identifier。

数据类定义好了，我们需要把数据类和table view连接起来。 需要在ViewController里将tableView的delegate 和 dataSource设置成我们的新建的数据类TableDataList

@synthesize tableView;

- (void)viewDidLoad {
    [super viewDidLoad];

    tableDataList = [[TableDataList alloc] init];
    tableView.delegate = tableDataList;
    tableView.dataSource = tableDataList;

}

然后用添加数据并用reload刷新

- (IBAction)addData:(id)sender {
    [tableDataList addData:[textData stringValue]];
    [tableView reloadData];
}

运行结果如下：

image.png

上面定义的column里有一个按钮，如果我们要实现当按钮按下时，显示第一列的文字，就需要button添加action: onCellClick

image.png

image.png

- (IBAction)onCellClick:(id)sender {
    NSButton *btn = (NSButton*)sender;
    if ( [btn image] == [NSImage imageNamed:@"green.png"] )
        [btn setImage:[NSImage imageNamed:@"red.png"]];
    else
        [btn setImage:[NSImage imageNamed:@"green.png"]];

    NSTableRowView *rowView = ( NSTableRowView *)btn.superview;
    NSInteger clickIndex = [tableView  rowForView:rowView];
    NSString* name = [tableDataList getData:clickIndex];
    NSAlert *alert = [[NSAlert alloc] init];

    alert.messageText = @"Hello";
    [alert setShowsHelp:NO];
    alert.informativeText = name;
    alert.alertStyle = NSAlertStyleWarning;
    [alert addButtonWithTitle:@"Ok"];

    [alert runModal];
}

上面代码中sender就是当前列中的button, 可以用它得到当前列的index，然后得到row的相关数据。

运行结果如下：

image.png

代码：https://github.com/wangbinfeng/NSTableView.git