swift UI专项训练8 展示数据

简介:   现在我想要点击表单中的条目,进行标记,再次点击以取消,那么该如何做呢?依然使用的是tableView的重载方法,在Restaurant中新增一个isCollected的值表示是否收藏,...

  现在我想要点击表单中的条目,进行标记,再次点击以取消,那么该如何做呢?依然使用的是tableView的重载方法,在

Restaurant中新增一个isCollected的值表示是否收藏,然后回到RestaurantListViewController中,新增:

   override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
       let r1 = restaurantList[indexPath.row]//取出点击的行
        r1.isCollected = !r1.isCollected//单击后收藏状态取反
        tableView.deselectRowAtIndexPath(indexPath, animated: false)
        tableView.reloadData()
    }

但是运行的时候是没有反应的,虽然状态已经改了,但是没有体现到页面上,现在应该在页面上增加一个标记,更改后的控制cell的tableView方法如下:

 
    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("PCell", forIndexPath: indexPath) as UITableViewCell
    let r1 = restaurantList[indexPath.row]
        // Configure the cell...
       cell.textLabel?.text = r1.name//行数
        if r1.isCollected{
            cell.accessoryType = UITableViewCellAccessoryType.Checkmark
        } else {
            cell.accessoryType = UITableViewCellAccessoryType.None
        }
        return cell
    }

运行效果,点击条目:


再点一下就取消了,除了勾之外还有很多有趣的标识,大家可以试试。

导航上还有编辑按钮,现在我们来实现编辑功能。现在点击左边的编辑按钮是没反应的,我们需要在viewDidLoad中增加下面的语句:

 self.navigationItem.leftBarButtonItem = self.editButtonItem()
要让系统知道导航坐标的按钮是我们的编辑按钮,然后在控制器中加入一个新的方法setEditing,这个也是自动补全的,代码如下:

override func setEditing(editing: Bool, animated: Bool) {
        super.setEditing(editing, animated: true)//先实现父类的
        tableView.setEditing(editing, animated: true)
    }

现在我们再点击编辑按钮,效果如下:


点击完成会返回。点击左边的红色图标右侧会滑出删除按钮,点击按钮会删除当前行,只需要在控制器中新增一个方法就好,代码如下:

    override func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
        if editingStyle == UITableViewCellEditingStyle.Delete{//如果是删除按钮
        restaurantList.removeAtIndex(indexPath.row)//先删除数组中的元素
            tableView.deleteRowsAtIndexPaths([indexPath], withRowAnimation: UITableViewRowAnimation.Top)//删除列表行,其他行向上推
            
        }
    }

大家可以试下效果



目录
相关文章
|
6月前
|
JavaScript
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
245 1
|
4月前
|
前端开发
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
194 6
|
3月前
|
前端开发 JavaScript UED
element-ui 表格数据究竟隐藏着怎样的神秘样式与格式化技巧?快来揭开谜底!
【8月更文挑战第22天】《element-ui 表格数据样式及格式化案例》展示了如何利用 element-ui 的表格组件实现美观且易读的数据展示。通过简单配置,可以自定义表格样式,如边框、背景色等,并通过 formatter 实现数据格式化,例如将成绩保留一位小数。此外,还能依据条件设置行样式,如成绩达优则高亮显示,从而增强用户体验和数据可读性。
66 1
|
3月前
|
测试技术 Swift iOS开发
探索iOS自动化测试:使用Swift编写UI测试
【8月更文挑战第31天】在软件开发的海洋中,自动化测试是保证船只不偏离航线的灯塔。本文将带领读者启航,深入探索iOS应用的自动化UI测试。我们将通过Swift语言,点亮代码的灯塔,照亮测试的道路。文章不仅会展示如何搭建测试环境,还会提供实用的代码示例,让理论知识在实践中生根发芽。无论你是新手还是有经验的开发者,这篇文章都将是你技能提升之旅的宝贵指南。
|
4月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
681 3
|
4月前
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
53 1
|
4月前
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
120 0
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
|
4月前
软件研发核心问题之在需求拆解过程中,“数据与UI如何关联”的问题如何解决
软件研发核心问题之在需求拆解过程中,“数据与UI如何关联”的问题如何解决
|
4月前
Element UI 多选表格【翻页多选】全能版(含翻页多选数据反显、toggleRowSelection失效的原因解析和解决方案)
Element UI 多选表格【翻页多选】全能版(含翻页多选数据反显、toggleRowSelection失效的原因解析和解决方案)
325 0
|
4月前
Element UI 表格数据格式化
Element UI 表格数据格式化
79 0
下一篇
无影云桌面