《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='';
}

效果如图：

人员管理-学生管理：

首页：

结语：

         没有什么是学不会的。