概要

阶段一、实现数据的在table view上的显示、增加。(复习ArrayController)
阶段二、通过使用tableview的委托方法tableViewSelectionDidChange来实现将选中项的值赋给文本框。
阶段三、通过使用文本框的委托方法controlTextDidChange实现table view内数据的动态修改。

阶段一 数据的显示与增加

1、新建工程,打开StoryBoard,添加Push Button、Text Filed、Label、Array Controller、Table View等。

image.png

2、创建一个NSObject的子类User,并为其添加firstName与lastName成员。

1
2
3
4
5
6
7
//User.h
#import <Foundation/Foundation.h>
@interface User : NSObject
@property NSString *firstName;
@property NSString *lastName;
-(instancetype) init;
@end
1
2
3
4
5
6
7
8
9
10
11
12
//User.m
#import "User.h"
@implementation User
-(instancetype) init{
self = [super init];
if(self){
self.firstName = @"Gao";
self.lastName = @"Ben";
}
return self;
}
@end

3、向ViewController.h中添加NSMutableArray类型的成员变量users并在ViewController.m中对其进行初始化。

1
2
3
4
5
6
//ViewController.h
#import <Cocoa/Cocoa.h>
#import "User.h"
@interface ViewController : NSViewController
@property NSMutableArray<User*> *users;
@end
1
2
3
4
5
6
7
//ViewController.m
- (void)viewDidLoad {
[super viewDidLoad];

// Do any additional setup after loading the view.
self.users = [[NSMutableArray alloc] initWithCapacity:32];
}

4、打开StoryBoard,设置Array Controller的Object Controller中的Class Name为User,将Array Controller的Content Array与ViewController的users进行绑定。

image.png

image.png

5、将Table view的Table Content与Array Controller进行绑定,并将Add按钮与Array Controller的Add方法进行绑定。

image.png

image.png

image.png

image.png

6、阶段一完成,效果如下。

image.png

阶段二 选中项处理

1、将table view与两个text filed拖拽大法至ViewController.h中,并添加NSTableViewDelegate协议,拖拽细节省略,代码如下。

1
2
3
4
5
6
7
8
#import "ViewController.h"
#import "User.h"
@interface ViewController()<NSTableViewDelegate>
@property (weak) IBOutlet NSTableView *tableView;
@property (weak) IBOutlet NSTextField *text_firstName;
@property (weak) IBOutlet NSTextField *text_lastName;
@property User *currentUser;
@end

2、设置table view的delegate为View Controller,并实现其委托协议方法。

image.png

1
2
3
4
5
6
7
8
9
10
- (void)tableViewSelectionDidChange:(NSNotification *)notification{
if(self.tableView.selectedRow < 0){
self.text_firstName.stringValue = @"";
self.text_firstName.stringValue = @"";
return ;
}
self.currentUser = self.users[self.tableView.selectedRow];
self.text_firstName.stringValue = self.currentUser.firstName;
self.text_lastName.stringValue = self.currentUser.lastName;
}

3、完成,效果如下。

image.png

阶段三 数据的动态修改

1、新增“Update”按钮,拖拽大法至ViewController.m内,命名为btn_update。
image.png

2、将表示First Name的文本框与currentUser.firstName绑定起来,将表示Last Name的文本框与currentUser.lastName绑定起来。

image.png

image.png

3、将First Name文本框、Last Name文本框委托给View Controller。

image.png

image.png

4、在ViewController.m中添加临时委托协议NStextFiledDelegate,并实现controlTextDidChange方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#import "ViewController.h"
#import "User.h"
@interface ViewController()<NSTableViewDelegate,NSTextFieldDelegate>
@property (weak) IBOutlet NSTableView *tableView;
@property (weak) IBOutlet NSTextField *text_firstName;
@property (weak) IBOutlet NSTextField *text_lastName;
@property User *currentUser;
@end

@implementation ViewController
//new
- (void)controlTextDidChange:(NSNotification *)obj{
self.currentUser.firstName = _text_firstName.stringValue;
self.currentUser.lastName = _text_lastName.stringValue;
}

- (IBAction)btn_update:(id)sender {
//多余的更新按钮
NSLog(@"%@ %@",self.currentUser.firstName,self.currentUser.lastName);
}

- (void)tableViewSelectionDidChange:(NSNotification *)notification{
if(self.tableView.selectedRow < 0){
self.text_firstName.stringValue = @"";
self.text_firstName.stringValue = @"";
return ;
}
self.currentUser = self.users[self.tableView.selectedRow];
//self.text_firstName.stringValue = self.currentUser.firstName;
//self.text_lastName.stringValue = self.currentUser.lastName;
}

- (void)viewDidLoad {
[super viewDidLoad];
//4C3TJ-8XH4K-MPQCM-R6C4X-P3C9D
// Do any additional setup after loading the view.
self.users = [[NSMutableArray alloc] initWithCapacity:32];
}

- (void)setRepresentedObject:(id)representedObject {
[super setRepresentedObject:representedObject];
// Update the view, if already loaded.
}
@end

4、完成,效果如下。

image.png