html动态添加数据tableview,TableView的动态更新操作(无需重新加载数据源)

项目中我们经常会用到TableView展示一个Cell,Cell的数据来源于我们自定义的一个Model类,那么对于TableView我们有以下几种场景。

1. 添加操作: 在该列表页面顶部有一个按钮叫做新建,点击后进入一个新的添加页面,添加完成之后,返回到列表页更新数据。

2. 更新操作:点击列表中cell进入编辑页面,编辑页面其实就是这个Model类中属性的一个展示,对其中某些属性进行更改后,返回到列表页更新数据。

3. 删除操作:点击列表中cell进入编辑页面,该页面有个删除按钮,点击删除按钮,操作成功后,返回列表页面更新数据。

对于以上场景,一般比较笨的方法是回到列表页面后重新从服务器加载一遍数据,但太耗费资源 pass。

另一种办法就是对数据源(数组 datasource)进行更新:

添加操作执行后,在数据源 datasource中insertObject:obj 然后reload列表。

更新操作后,在数据源datasource找到该item进行更新然后reload列表。

删除操作后,在数据源datasource找到该item进行删除操作然后reload列表。

要达到这种效果,我们需要将数据源datasource传入下一个页面或者通过消息通知机制通知datasource(当操作执行时),如果项目中该功能列表非常多的时候,每次都进行重复的操作着实有些麻烦,所以在这里,我封装了一个tableview的category用于解决以上的问题,工作原理如下:

1. 给tableview增加注册监听消息(添加,更新,删除,刷新)

cdec0645add3fc3c328197dda5c76203.png

81178cc93a2a3bb5048d90d76e7ec935.png

- (void)addDataChangedObserver:(NSMutableArray *)datasource

primaryKey:(NSString*)primaryKey

changeBlock:(DataChangeBlock)changeBlock {//给类别关联数据源属性,存储tableview数据源

objc_setAssociatedObject(self, (__bridge const void *)(kDatasource), datasource, OBJC_ASSOCIATION_RETAIN_NONATOMIC);//记录数据源中model的唯一标识

objc_setAssociatedObject(self, (__bridge const void *)(kPrimaryKey), primaryKey, OBJC_ASSOCIATION_COPY_NONATOMIC);//记录回调的block

objc_setAssociatedObject(self, (__bridge const void *)(kChangeBlock), changeBlock, OBJC_ASSOCIATION_COPY_NONATOMIC);//添加监听方法

[self removeObserver];

[self addObserver];

}

View Code

cdec0645add3fc3c328197dda5c76203.png

81178cc93a2a3bb5048d90d76e7ec935.png

#pragma mark - Observer Operation

- (void)addObserver {

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(add:) name:TableViewOperationAddNotificationobject:nil];

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(delete:) name:TableViewOperationDeleteNotificationobject:nil];

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(update:) name:TableViewOperationUpdateNotificationobject:nil];

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(refresh:) name:TableViewOperationRefreshNotificationobject:nil];

}

View Code

2. 收到消息通知后调用的方法

cdec0645add3fc3c328197dda5c76203.png

81178cc93a2a3bb5048d90d76e7ec935.png

#pragma mark - Actions

- (void)add:(NSNotification *)notification {

NSLog(@"调用了tableview的add消息事件");id obj = notification.object;//获取数据源数据进行对象添加

NSMutableArray *datasource =[self getPropertyKey:kDatasource];if (datasource &&obj) {if (datasource.count > 0) {if ([obj isKindOfClass:[datasource[0] class]]) {

[datasource insertObject:obj atIndex:0];

[self reloadData];

}

}

}

[self callback:TableViewOperationAdd obj:obj];

}- (void)delete:(NSNotification *)notification {

NSLog(@"调用了tableview的delete消息事件");id objNotify = notification.object;//从数据源中删除一个对象并刷新tableview

[self changeDataSourceWithObj:objNotify operationType:TableViewOperationDelete];

[self callback:TableViewOperationDelete obj:objNotify];

}- (void)update:(NSNotification *)notification {

NSLog(@"调用了tableview的update消息事件");id objNotify = notification.object;//从数据源更新一个对象并刷新tableview

[self changeDataSourceWithObj:objNotify operationType:TableViewOperationUpdate];

[self callback:TableViewOperationUpdate obj:objNotify];

}- (void)refresh:(NSNotification *)notification {

NSLog(@"调用了tableview的refresh消息事件");id obj = notification.object;//刷新tableview

[self reloadData];

[self callback:TableViewOperationRefresh obj:obj];

}- (void)callback:(TableViewOperationType)operationType obj:(id)obj {

DataChangeBlock block= objc_getAssociatedObject(self, (__bridge const void*)kChangeBlock);

NSIndexPath*indexPath = objc_getAssociatedObject(self, (__bridge const void*)kIndexPath);if(block) {

block(operationType, indexPath, obj);

}

}

View Code

cdec0645add3fc3c328197dda5c76203.png

81178cc93a2a3bb5048d90d76e7ec935.png

- (void)changeDataSourceWithObj:(id)objNotify operationType:(TableViewOperationType)operationType {//取出数据源

NSMutableArray *datasource =[self getPropertyKey:kDatasource];//取出对象主键字段名

NSString *primaryKey =[self getPropertyKey:kPrimaryKey];//取出对象主键字段对应的value值

NSString *valueNotify =[self getObjPropertyValueByKey:primaryKey obj:objNotify];if(objNotify) {

[datasource enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {

NSString*value =[self getObjPropertyValueByKey:primaryKey obj:obj];if([valueNotify isEqualToString:value]) {if (operationType ==TableViewOperationDelete) {

[datasource removeObject:objNotify];

NSLog(@"对象删除成功,刷新数据");

}else if (operationType ==TableViewOperationUpdate) {

[datasource replaceObjectAtIndex:idx withObject:objNotify];

NSLog(@"对象更新成功,刷新数据");

}

[self reloadData];*stop =YES;

}

}];

}

}

View Code

主要用到了runtime的相关知识,动态的为tableview关联了属性,当程序运行到执行相应的操作时,根据关联的属性来操作数据源,达到效果。

如何使用??

1. 非常简单,在需要的viewcontroller中添加如下方法:

cdec0645add3fc3c328197dda5c76203.png

81178cc93a2a3bb5048d90d76e7ec935.png

[self.tableview addDataChangedObserver:self.datasource primaryKey:@"pid" changeBlock:^(TableViewOperationType operationType, NSIndexPath *indexPath, idobj) {

NSLog(@"%@", indexPath);

NSLog(@"%ld", operationType);

NSLog(@"%@", obj);

}];

View Code

说明:self.datasource一个初始化了数组,存放数据源;@“pid”数据源中model对象中的标识属性,此处是Person类的中pid属性;changBlock操作时回调的block,  operationType操作类型(增、删、改、刷新),indexPath操作的行, obj操作的类,此处是person对象

2. 在需要执行操作的地方发出通知消息

cdec0645add3fc3c328197dda5c76203.png

81178cc93a2a3bb5048d90d76e7ec935.png

- (IBAction)delete:(id)sender {

[[NSNotificationCenter defaultCenter] postNotificationName:TableViewOperationDeleteNotificationobject:self.p];

}- (IBAction)update:(id)sender {

self.p.name= [NSString stringWithFormat:@"change_%@", self.p.name];

[[NSNotificationCenter defaultCenter] postNotificationName:TableViewOperationUpdateNotificationobject:self.p];

}

View Code

大功告成,用起来是不是非常方便。

具体的源码和demo请访问

原文:http://www.cnblogs.com/jerryfeng/p/4319048.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML网页可以通过CSS和JavaScript创建动态图案。以下是一些常见的方法: 1. CSS动画:使用CSS的@keyframes规则创建动画效果。可以控制元素的位置、大小、颜色等属性,实现各种动态效果。例如: ```html <style> @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .circle { width: 100px; height: 100px; background-color: red; animation: spin 2s linear infinite; } </style> <div class="circle"></div> ``` 2. JavaScript Canvas:使用HTML5的<canvas>元素和JavaScript绘制图形。可以通过改变元素的属性或使用绘图函数实时更新图案。例如: ```html <canvas id="myCanvas"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); let angle = 0; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'red'; ctx.fillRect(50, 50, 100, 100); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(angle); ctx.fillStyle = 'blue'; ctx.fillRect(-50, -50, 100, 100); ctx.restore(); angle += Math.PI / 180; requestAnimationFrame(draw); } draw(); </script> ``` 3. SVG动画:使用SVG(可缩放矢量图形)创建矢量图形,并使用CSS或JavaScript实现动画效果。可以改变路径、形状、颜色等属性。例如: ```html <svg width="200" height="200"> <rect x="50" y="50" width="100" height="100" fill="red"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="2s" repeatCount="indefinite" /> </rect> </svg> ``` 这些是创建HTML网页动态图案的一些方法,可以根据具体需求选择适合的方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值