Ember实现列表数据的删除功能

Ember实现列表数据的删除功能

木来 木来

这是最后一个功能了,根据我们之前做的项目进度,我们这次的需求很简单,就是把用户表信息全查出来,然后点击右边的删除按钮,就把一行的数据给删除。

妈的,出bug弄到凌晨1点多,太恶心了。

首先呢,我的电脑浏览器上下载了Ember插件,我发现,添加的用户数据信息都没有id,id都为Null,这为删除功能出现了非常大的障碍,我因此耽误了两个小时的时间。

首先,打开app/controllers/adduser.js

修改为下面这部分

//.......  

//  创建数据记录
                     var user = this.store.createRecord('users', {
                        schoolnumber:schoolnumber,
                            name: name,
                            sex: sex,
                            age: age,
                            id:schoolnumber
                     });


//.....

然后,我们来谈一下需求,我们需要一个能执行删除功能的controller,然后我们需要修改用户list列表的部分内容,因此,我们首先创建controller

特别提醒一句,页面的名字必须与在页面执行的controller的名字完全一致,否则会报找不到该controller下功能的错误!!!!!

ember g controller user

然后,我们打开app/templates/user.hbs,改为下面这部分代码

<h2>用户列表</h2>

<table border="1" width="700px" >
  <tr>
   <th>学号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>修改</th>
    <th>删除</th>
  </tr>


 {{#each model as |user|}}

  <tr>
  <td>
{{user.schoolnumber}}
    </td>




    <td>
{{user.name}}
    </td>

    <td>
{{user.sex}}
    </td>

   <td>
{{user.age}}
    </td>
   <td >
 {{#link-to 'updateuser'  user}}济宁学院时玉龙作业{{/link-to}}
    </td>

   <td {{ action 'deleteItem' user.schoolnumber}}>
 删除
    </td>


  </tr>

  {{/each}}

</table>


<!--

<ul>
  {{#each people as |person|}}
    <li {{action "showPerson" person}}> {{person}}</li>
  {{/each}}
</ul>
-->

然后,我们打开app/controller/user.js,写下面这部分代码

import Ember from 'ember';

export default Ember.Controller.extend({






       actions: {
 
       deleteItem:function(params) {

var self=this;

if(window.confirm("你确定要删除该条记录吗?")){
// this.get('users').destroyRecord().then(function(){
//     transitionToRoute('user');
// })
// 
// 
// 

    this.store.findRecord('users', params).then(function(user) {




            user.deleteRecord();

  user.save();

this.transitionToRoute('user');
              });




}




       }//elerteitem


       }












});

于是,删除功能就实现了

效果如图

test1.gif

于是乎,web作业也总算做完了,终于可以难过的准备下面的考试了

麻烦有做完的同学,可以在手机端打开该网页,在底部留言一下,我好知道自己做的教程真的可以帮助到他人~

= = 因为网站改在改造,所以PC暂时没有开放留言功能...

7 条评论
木来
木来 (作者) 回复
很棒,我已经猜出你是谁来了!
木来
木来 (作者) 回复 有梦想的咸鱼
很开心!!!!
木来
木来 (作者) 回复
很棒!
猜
ヽ(•̀ω•́ )ゝ搞完了,修改功能看的你的
有梦想的咸鱼
跟着操作,一步步的完成了!
。
谢琦玉大哥 我也做完了 敬礼!
。
琦玉哥 我也做完了 谢谢您 敬礼!