野外泛在线考核系统（十一）

二、电脑端

接着（十）研究显示单条数据的问题
需求是读取所有该老师的数据之后，在一个表格中显示出来，比如该老师负责考核什么项目，考核什么内容，在表头显示项目名称，表格中逐条显示考核的内容，

（二）平板中显示数据

需求： 在平板上显示一个界面，一个界面就是一个考核项目，包括多个考核内容，逐项内容进行评分，所以要读取数据库中的数据（考核项目和考核内容）并在界面上显示出来。注意，这里在前面代码的基础上有修改:

1. 通过查询老师名字获取数据，将结果写入this.scores之中：

// showData.ets
getResult(){
    this.ContentScoreTable.query(this.teacher, (result: ContentScoreData[]) => {
      this.scores = result;
    }, false);
  } 

2. 然后在UI界面上显示出来，注意ForEach(this.scores,(item:ContentScoreData,index:number)中，index是循环次数，首次是0，为了在表格中显示序号，通过(index+1)来实现。

build() {
    Stack(){
      Column(){
        Button('开始评分')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
              this.getResult()
              this.isGetResult = true

          })
      }
      if(this.isGetResult){
        Column(){
          Text(this.scores[0].item + '评分表')
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
          List({space:CommonConstants.FULL_SIZE}){
            ForEach(this.scores,(item:ContentScoreData,index:number)=>{
              ListItem(){
                Row(){
                  Text((index+1).toString())
                    .fontSize(50)
                    .fontWeight(FontWeight.Bold)
                    .width('10%')
                  Text(item.content)
                    .fontSize(50)
                    .fontWeight(FontWeight.Bold)
                    .width('20%')
                  TextInput({ placeholder: item.content + '评分' ,text:  this.isCancel ? '': ''})
                    .maxLength(CommonConstants.INPUT_STUDENTID_LENGTH)
                    .type(InputType.Number)
                    .inputStyle()
                    .onChange((value: string) => {
                      this.scores[index].contentScore = Number(value); // index 为循环次数，起始值为0
                    })
                }.border({ width: 1 }).width('80%').alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center)
                .height( (1/this.scores.length*80).toString()+'%' )
              }
            })
          }.alignListItem(ListItemAlign.Center)
          Row(){
            Button('重新评分')
              .fontSize(30)
              .fontWeight(FontWeight.Bold)
              .onClick(() => {
                 this.isCancel = false
              })
            Button('确认评分')
              .fontSize(30)
              .fontWeight(FontWeight.Bold)
              .onClick(() => {
                this.isCancel = true
                this.updateScoreDataToTable()
              })
          }
        }
        .backgroundColor(Color.Gray)
        .height('100%')
        .width('100%')
      }
    }
  }

3. 确认评分后，重新将数据写入数据库，完成评分。

updateScoreDataToTable(){
    for(let i = 0; i<this.scores.length;i++){
         this.ContentScoreTable.updateData(this.scores[i], () => {
      });
    }
  }

4. 至此，算是完成了从建立数据库，并创建表，而后写入数据，显示数据并评分，最后重新写入数据库的流程。