《Angular之表格选中跳转》

前言：

  公司最近开发图书馆软件，运用前端工程化的思想，前后端分离开发，前端架构采用Angular4前端架构+bootstrap+primeng,后端采用java,遵循javaee规范中的jersey和EJB。随着图书馆的深入开发，Angular的实践越来越深入，经验积累也愈多。现在请听小编娓娓道来表格选中跳转的相关实现。

正文：

   以图书馆为例，需求是这样的，在学生管理页面，点击表格中姓名一列，跳转到首页，同时要把姓名传递到首页，显示在搜索框中，出发模糊查询方法。   实现三部曲：

   前提两个页面表格已经引入，初始化数据已经成功显示，模糊查询方法已经实现。同时学生管理页面显示的数据在首页的表格数据中存在。

   第一步，将表格中链接字段初始化为true:

student-manager.component.html

<div class="container" style="margin-left:220px ;margin-bottom:10px"  >    <div class="row">          <data-table            (deletesEmit)="deleteDatas($event)"  [ButtonHeaders]="buttonHeaders"            (changepage)="changepage($event)" [isCheckBox] = "isCheck" [isLink]="isLink"            [editButton]="btnEdit" (operat)="operatData($event,editModal)"   [title]="title" [page] ="page"            [addButton]="btnAdd" [deleteButton]="btnDelete" (editData)="edit($event,editModal)" [importButton]="btnImport"            [exportButton] = "btnExport" [total]="total" (coustomData)="coustom($event)"            [data]="data" [arr]="arrbutes" (exportEmit)="export($event)"              (linkClickEmitData)="linkClick($event,el)" [buttonstyle]="btnstyle"   [sizeList]="sizeList"             [paging]="paging" [pageSize]="pageSize" (importEmit)="import($event)"             (addOpen)="open($event,modal)" >      </data-table>    </div></div>

student-manager.component.ts

isLink = [true, true, false, false, false]

第二步 ，写跳转事件：

student-manager.component.ts

  /** * 表格按钮点击事件，点击姓名跳转首页，同时将点击的名字保存在 localStorage中 * @param el  */linkClick(el:any){  const na = localStorage.setItem('studentName',this.data[el].name);  alert(this.data[el].name);  this.data.forEach(item=>{       this.router.navigateByUrl('workspace/borrowing-manager');     })}

第三步，将学生姓名传递到首页，同时调用模糊查询的方法

                        student-manager.component.ts

ngOnInit() {// 页面已加载就调用此方法this.getData();/*** 十二期杨晓风-2017-11-10 20:07:06* 从人员管理中的学生管理进行路由跳转，并且将点击的学生姓名传递过来 *然后自动填充到搜索框中，同时调用模糊查询的方法，直接显示相应学生的信息 */const studentName =localStorage.getItem('studentName');if (this.condition =='' ){//跳转过来时，搜索框中默认显示点击的学生姓名this.condition =studentName;//调用模糊查询的方法this.query(this.condition);//从localStorage移除对学生姓名的存储localStorage.removeItem('studentName');}}

前提，模糊查询的逻辑代码已实现：

borrowing-manager.component.html

<div style="width: 350px; margin-left:40%; margin-bottom:10px; margin-top:5%"><inputclass="condition"type="text"placeholder="请输入学号/姓名/专业/班级/书籍名称/索书号/续借次数/超期情况" [(ngModel)]="condition" /><buttontype="button"class="btn btn-primary btn" (click)="query()">查询</button></div>

borrowing-manager.component.ts

searchUrl='';query(el:string){if(this.condition==""){this.searchUrl="borrowing/getAllBorrowing/1/10";}else{//模糊查询路径this.searchUrl="borrowing/getBorrowingByConditon/"+this.condition+"/1/10";} let sUrl=this.searchUrl;//表格联动this.http.get(sUrl).toPromise().then(res=>{this.data=res.json().data;console.log(res);// alert("查询成功");});//url清空this.searchUrl='';}

效果如图：

人员管理-学生管理：

首页：

结语：

         没有什么是学不会的。