Swift UI专项训练7 数据添加

简介:   上一话我们使用了自己定义的控制器之后发现tableview上的餐馆没有了,这一话我们来添加数据,新添加一个餐馆类,这个类我们不需要继承系统的类,直接添加一个swift文件就好import Foundationclass Restaurant { var name = "" var location = "" var score = 10}我简单建一个类,分别代表餐馆名字、餐馆位置和餐馆评分,它们都有默认值。

  上一话我们使用了自己定义的控制器之后发现tableview上的餐馆没有了,这一话我们来添加数据,新添加一个餐馆类,这个类我们不需要继承系统的类,直接添加一个swift文件就好


import Foundation

class Restaurant {
    var name = ""
    var location = ""
    var score = 10

}

我简单建一个类,分别代表餐馆名字、餐馆位置和餐馆评分,它们都有默认值。

然后我们回到餐馆排行的控制器中新建一个餐馆的数组。

var restaurantList = [Restaurant]()

之后添加一个方法来初始化数据。

func loadInitData(){
        let rest1 = Restaurant()
        rest1.name = "蜀渝蜀二"
        restaurantList.append(rest1)
        
        let rest2 = Restaurant()
        rest2.name = "芳芳餐厅"
        restaurantList.append(rest2)
        
        let rest3 = Restaurant()
        rest3.name = "阿慧餐厅"
        restaurantList.append(rest3)
        
        let rest4 = Restaurant()
        rest4.name = "酱府老碗面"
        restaurantList.append(rest4)
        
        let rest5 = Restaurant()
        rest5.name = "要德平价川菜"
        restaurantList.append(rest5)
        
        let rest6 = Restaurant()
        rest6.name = "大碗饭"
        restaurantList.append(rest6)
    }

之后在viewDidLoad中调用一下就好了。但是现在我们运行会发现表格中依然空空如也,这是为什么呢?原来是我们并没有使用委托,我们需要把更新的表格内容委托给控制器。由于我们是子代理,所以需要重载控制器的很多方法,这些方法在我们的控制器代码中已经写好了我们只需要按住自己的需求去做修改,比如下面这个方法:

   override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        // #warning Potentially incomplete method implementation.
        // Return the number of sections.
        return 1
    }
这个方法规定了表格的区块,有的表格比较复杂可能不止一个区域,我们返回1代表只有一个区块。

  override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete method implementation.
        // Return the number of rows in the section.
        return restaurantList.count
    }

上面的方法用来规定表格的行数,我们返回的是数组的元素个数,有很多设置方法名都是tableView,但是参数不同,大家选择自己需要的。通常单元格的每一行的格式都是相同的,所以我们需要设一个默认格式来重用,打开storyboard,选择某一table view cell然后设定Identifier,命名为PCell。底下的Selection是选中样式,有以下几种:

这个是选中后会有什么颜色,我们选择None。回到代码中:

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("PCell", forIndexPath: indexPath) as UITableViewCell

        // Configure the cell...

        return cell
    }

这个方法的作用是重用我们刚才设置的默认格式。现在我们对cell格式和内容的操作都在上面这个方法中进行就好了。增加一行:
cell.textLabel?.text = restaurantList[indexPath.row].name//行数
运行效果:



目录
相关文章
|
1月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
20 0
|
13天前
【UI】 element ui 表格没有数据时用--填充
【UI】 element ui 表格没有数据时用--填充
20 2
|
5月前
|
JavaScript
element-ui表格数据样式及格式化案例
element-ui表格数据样式及格式化案例
|
4月前
|
JavaScript
Vue + Element UI 实现复制当前行数据功能(复制到新增页面组件值不能更新等问题解决)
# 1、需求 使用Vue + Element UI 实现在列表的操作栏新增一个复制按钮,复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面,本文实现为跳转到新增页面。 # 2、实现 ## 1)列表页 index.vue ```html <el-table> <!-- 其他列 --> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button icon="el-icon-copy-document" title="复制" @click="toCopyNew(scope
72 0
|
5月前
|
JSON 安全 JavaScript
vue2.0 + element-ui 实战项目-axios请求数据(三)
vue2.0 + element-ui 实战项目-axios请求数据(三)
19 0
|
5月前
|
JSON JavaScript 数据格式
Vue框架Element UI教程-axios请求数据(六)
Vue框架Element UI教程-axios请求数据(六)
44 0
|
5月前
|
JSON JavaScript 数据格式
Vue移动端框架Mint UI教程-数据渲染到页面(六)
Vue移动端框架Mint UI教程-数据渲染到页面(六)
39 0
|
5月前
|
JSON JavaScript API
Vue移动端框架Mint UI教程-调用模拟json数据(五)
Vue移动端框架Mint UI教程-调用模拟json数据(五)
42 0
|
5月前
element-ui表格数据样式及格式化
element-ui表格数据样式及格式化
|
6月前
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加?
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加?
28 0