使用Angular4+kendo ui for Angular+ webapi+sqlserver创建一个简单的省市选择程序（三）

第三步 使用控件

主要的链接配置都搞定了，接下来实际上是比较简单的控件使用了，只要多查询官方给出的api实际上就可以写出来。

先在getselect.component.ts的类里面定义几个属性。同时将dropdownlist和grid的数据从服务器获取到

  export class GetselectComponent implements OnInit {
  // 全部数据
  private gridDataAll: Array<any> = [];
  private dataSourceAll: Observable<any>;
  // 下拉初始数据
  dataSourceDrop: Observable<any>;
  private dropdownData: any[];
  // 下拉数据绑定
  public doubouchange: { id: number, cityName: string } = { id: 0 , cityName: "请选择" };
  // textbox数据绑定
  private inputdata: string ;
  // 选中行
  private selectgridcell: any;
  // 选中行下标
  private mySelection: number[] = [];
  // 选中行数据
  private rowSelect: any;

  constructor(private  http: Http) {
  //下拉列表数据
    this.dataSourceDrop = this.http.get('/api/getProCity')
      .map((res) => res.json());
    //grid的数据源
    this.dataSourceAll=this.http.get('api/getProCity/0')
      .map((res)=>res.json());
  }


  ngOnInit() {
  //grid的数据源
    this.dataSourceAll.subscribe(
      (data) => this.gridDataAll = data
    );
    //下拉列表数据
    this.dataSourceDrop.subscribe(
      (data) => this.dropdownData = data
    );
  }


}

---

接下来在getselect.component.html中添加kendo 控件。

<div class="allPage">
  <div style="margin-top: 10px;margin-left: 30%">
  <kendo-dropdownlist [data]="dropdownData"
                      textField="cityName"
                      valueField="cityName"
                      [(ngModel)]="doubouchange"
                      (selectionChange)="selectionChange($event)"
                      class="selectDropdown"
  >
  </kendo-dropdownlist>

  <kendo-textbox-container>

    <input kendoTextBox [(ngModel)]="inputdata" (ngModelChange)="getCityByName($event)"/>
  </kendo-textbox-container>
  </div>
<div class="leftAllCity">
    <kendo-grid class="thisKendo"
                [kendoGridBinding]="gridDataAll"
                [sortable]="true"
                [pageSize]="10"
                [pageable]="true"
                [selectable]="true"
                [kendoGridSelectBy]="cityName"
                [selectedKeys]="mySelection"
                (selectedKeysChange)="onSelectedKeysChange($event)"

    >
      <kendo-grid-column field="cityName" title="City" width="20%">
      </kendo-grid-column>
      <kendo-grid-column field="cityDesc" title="Introduction" width="50%">
      </kendo-grid-column>
      <kendo-grid-column field="Attractions" title="Attractions" width="30%">
      </kendo-grid-column>
    </kendo-grid>
  </div>



  <div class="rightCity">
    <kendo-grid class="thisKendo"
                [kendoGridBinding]="gridDataAll"
                [sortable]="true"
                [pageSize]="10"
                [pageable]="true"
                [kendoGridSelectBy]="cityName"
                [selectedKeys]="mySelection"
                (selectedKeysChange)="onSelectedKeysChange($event)"

    >
      <kendo-grid-column field="cityName" title="City" width="20%">
      </kendo-grid-column>
      <kendo-grid-column field="cityDesc" title="Introduction" width="50%">
      </kendo-grid-column>
      <kendo-grid-column field="Attractions" title="Attractions" width="30%">
      </kendo-grid-column>
    </kendo-grid>
  </div>

</div>

这里面使用的三个控件对应的属性可以去官网的API中查询，这里不详细解释，控件发生变化时对应的change方法我们在getselect.component.ts中添加

  // dropdownlist  change function
  public selectionChange(value: any) {

  // 防止rowSelect没有数据就调用
    if (isUndefined(this.rowSelect)) {
      return;
    }
    //将dropdownlist中选择的数据赋值给grid选中的行cityName属性
    this.rowSelect.cityName = value.cityName;
    //将dropdownlist中选择的数据赋值给textbox
    this.inputdata = value.cityName;
  }

  // grid selected change function
  onSelectedKeysChange(e) {
    // 将grid选中数据赋值给dropdownlist也就是下拉框
    this.selectgridcell = this.gridDataAll[this.mySelection[0]];
    this.doubouchange = { id: this.selectgridcell.id
      , cityName: this.selectgridcell.cityName };
    //将grid选中行cityName属性赋值给textbox
    this.inputdata = this.selectgridcell.cityName;
    //将grid选中行cityName属性赋值给rowSelect 属性
    this.rowSelect = this.gridDataAll[this.mySelection[0]];

  }

  // textbox change function
  getCityByName(e) {
 // 防止rowSelect没有数据就调用
    if (isUndefined(this.rowSelect)) {
      return;
    }
     //将textbox中数据赋值给dropdownlist
    this.dataSourceAll.subscribe((data) => ((data.length>0?(this.doubouchange = {
      id: this.gridDataAll[0].id,
      cityName: this.gridDataAll[0].cityName
    }):this.doubouchange=null)));
 //将textbox中数据赋值给grid选中行的cityName
    this.rowSelect.cityName = e;

  }

---

getselect.component.scss配置

.alldiv{
  width:300px;
  margin: 50px auto;
}
.testtable{
  margin: 30px auto;
}
.thisKendo{
  width: 100%;
  margin-top: 10px;
  margin-left: 10px;
}
.selectDropdown{
  margin-left: 20px;

}
.kendoInput{
  margin-left: 10px;
  color: black;
}
.allCity{
  width: 100%;
  margin-top:10px;
  margin-left: 10px;
}
.leftAllCity{
  float: left;
  width: 41%;
}
.rightCity{
  margin-left: 30px;
  float: left;
  width: 41%;

}
.allPage{
  padding-top:30px;
  padding-left: 10%;

}

代码中主要是对控件数据源的操作，并没有太多的难点。。添加了注释应该更容易看懂。

最终完成图

通过点击grid表，dropdownlist和textbox会对应改变。
点击表之后，修改dropdownlist和textbox里面的数据，grid表中数据也会跟着改变

好了，以上就是小程序的全部内容。。没有太多的实际作用，，练习一下Angular4和kendo ui for angular+weapi的结合是本次的主要目的。