From d0b60ac215618dd57941467f80085de29db4da39 Mon Sep 17 00:00:00 2001
From: gaobaoming <571974734@qq.com>
Date: Tue, 13 Nov 2018 10:15:26 +0800
Subject: [PATCH] 下拉框
---
src/pages/access/components/dropdownlist/dropdownlist.html | 34 ++++++++
src/pages/access/components/dropdownlist/dropdownlist.scss | 52 +++++++++++++
src/pages/access/components/dropdownlist/dropdownlist.ts | 142 +++++++++++++++++++++++++++++++++++
3 files changed, 228 insertions(+), 0 deletions(-)
diff --git a/src/pages/access/components/dropdownlist/dropdownlist.html b/src/pages/access/components/dropdownlist/dropdownlist.html
new file mode 100644
index 0000000..49b3ac9
--- /dev/null
+++ b/src/pages/access/components/dropdownlist/dropdownlist.html
@@ -0,0 +1,34 @@
+<ion-grid>
+ <ion-row>
+ <ion-col col-12 (click)="contentShow()">
+ <input readonly>123
+ <i class="fa fa-area-chart"></i>
+ </ion-col>
+ </ion-row>
+</ion-grid>
+<ion-list *ngIf = "exhibition">
+ <ion-row class="modal" col-12>
+ <ion-row class="mol_content" col-9 style="overflow:scroll;padding-bottom: 94px;">
+ <ion-searchbar (input)="getItems($event)" style="max-height:50px;"></ion-searchbar>
+ <ion-col col-12 class="mol_data">
+ <ul style="margin:0;padding: 0; padding-bottom: 144px;">
+ <li>
+ <ion-item>
+ <ion-label>全选</ion-label>
+ <ion-checkbox [checked]="fullSelection" [(ngModel)]="assdsd" (click)="checkedAll()"></ion-checkbox>
+ </ion-item>
+ </li>
+ <li *ngFor="let mdata of medata">
+ <ion-item>
+ <ion-label>{{mdata.value}}</ion-label>
+ <ion-checkbox [checked]="selectAll" id = "{{mdata.code}}" (click)="selectOne($event)" ></ion-checkbox>
+ </ion-item>
+ </li>
+ </ul>
+ </ion-col>
+ <ion-col col-12 class="mol_foot" (click)="confirm()">
+ 确定
+ </ion-col>
+ </ion-row>
+ </ion-row>
+</ion-list>
\ No newline at end of file
diff --git a/src/pages/access/components/dropdownlist/dropdownlist.scss b/src/pages/access/components/dropdownlist/dropdownlist.scss
new file mode 100644
index 0000000..7a813ed
--- /dev/null
+++ b/src/pages/access/components/dropdownlist/dropdownlist.scss
@@ -0,0 +1,52 @@
+.modal{
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ right: 0;
+ top: 44px;
+ background: rgba(0, 0, 0, 0.186);
+ z-index: 999;
+ // text-align: right;
+}
+.mol_content{
+ background: white;
+ margin: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ padding: 0;
+ height: 100%;
+}
+.mol_foot{
+ position: fixed;
+ bottom: 50px;
+ width: 100%;
+ height: 50px;
+ background: rgb(11, 87, 252);
+ text-align: center;
+ line-height: 50px;
+ font-size: 16px;
+ padding-right: 100px;
+ color: white;
+}
+.mol_data{
+ position: absolute;
+ top: 50px;
+}
+.checkbox-ios .checkbox-icon{
+ width: 14px;
+ height: 14px;
+}
+ion-label{
+ font-size: 16px;
+}
+.checkbox-ios .checkbox-checked .checkbox-inner{
+ left: 4.5px;
+ top: 1.6px;
+}
+.searchbar-ios{
+ background: none;
+}
+.searchbar-ios.searchbar-left-aligned .searchbar-input{
+ border: 1px solid rgba(0, 0, 0, 0.2);
+}
\ No newline at end of file
diff --git a/src/pages/access/components/dropdownlist/dropdownlist.ts b/src/pages/access/components/dropdownlist/dropdownlist.ts
new file mode 100644
index 0000000..1c676dc
--- /dev/null
+++ b/src/pages/access/components/dropdownlist/dropdownlist.ts
@@ -0,0 +1,142 @@
+import { Component, Input } from '@angular/core';
+import { HttpClient } from 'kl/core';
+
+/**
+ * Generated class for the InputComponent component.
++ +*
+ * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
+ * for more info on Angular Components.
+ */
+@Component({
+ selector: 'test-dropdownlist',
+ templateUrl: 'dropdownlist.html'
+})
+export class DropdownlistComponent {
+
+ @Input()
+ id = '';
+ @Input()
+ data = {
+ id: '0',
+ name: 'err',
+ type: 1,
+ max: '',
+ minx: ''
+ };
+ public exhibition: boolean = false;
+ public selectAll: boolean = false;
+ public fullSelection:boolean = false;
+ public selectDatas = [];
+ public searchValue = "";
+ public assdsd;
+ public search = [];
+ public medata = [
+ { "name": "key", "code": "C0001", "value": "孙悟空" },
+ { "name": "ke2", "code": "C0002", "value": "唐僧" },
+ { "name": "ke3", "code": "C0003", "value": "沙和尚" },
+ { "name": "ke4", "code": "C0004", "value": "猪八戒" },
+ { "name": "key", "code": "C0005", "value": "孙悟空" },
+ { "name": "ke2", "code": "C0006", "value": "唐僧" },
+ { "name": "ke3", "code": "C0007", "value": "沙和尚" },
+ { "name": "ke4", "code": "C0008", "value": "猪八戒" },
+ { "name": "key", "code": "C0009", "value": "孙悟空" },
+ { "name": "ke2", "code": "C00010", "value": "唐僧" },
+ { "name": "ke3", "code": "C00011", "value": "沙和尚" },
+ { "name": "ke4", "code": "C00012", "value": "猪八戒" },
+ { "name": "ke2", "code": "C00013", "value": "唐僧" },
+ { "name": "ke3", "code": "C00014", "value": "沙和尚" },
+ { "name": "ke4", "code": "C00015", "value": "猪八戒" },
+ { "name": "ke2", "code": "C00016", "value": "唐僧" },
+ { "name": "ke3", "code": "C00017", "value": "沙和尚" },
+ { "name": "ke4", "code": "C00018", "value": "猪八戒" },
+ { "name": "ke2", "code": "C00019", "value": "唐僧" },
+ { "name": "ke3", "code": "C00020", "value": "沙和尚" },
+ { "name": "ke4", "code": "C00021", "value": "猪八戒" },
+ { "name": "ke2", "code": "C00022", "value": "唐僧" },
+ { "name": "ke3", "code": "C00023", "value": "沙和尚" },
+ { "name": "ke4", "code": "C00024", "value": "猪八戒" }
+ ]
+ constructor(private http: HttpClient) { }
+
+
+ ngOnInit(): void {
+ this.search = this.medata.map(i=>i);
+ console.log(this.id);
+ }
+ contentShow() {
+ this.exhibition = true;
+ }
+ checkedAll() {
+ if (this.fullSelection) {
+ this.selectDatas = [];
+ this.fullSelection = false;
+ this.selectAll = false;
+ } else {
+ this.selectDatas = this.medata.map(i=>i);
+ // this.selectDatas = this.medata.concat([]);
+ this.selectAll = false;
+ setTimeout(() => {
+ this.selectAll = true;
+ }, 0.0000000000000000000000000000000001);
+ this.fullSelection = true;
+ }
+ }
+ selectOne(code) {
+ let selectData
+ let num = 0;
+ let dataCode = code.path[2].id
+ for (var i = 0; i < this.medata.length; i++) {
+ if (this.medata[i].code == dataCode) {
+ selectData = this.medata[i];
+ }
+ }
+ for (var i = 0; i < this.selectDatas.length; i++) {
+ if (dataCode == this.selectDatas[i].code) {
+ num++
+ }
+ }
+ if (num == 0) {
+ this.selectDatas.push(selectData);
+ } else {
+ this.fullSelection = false;
+ this.selectDatas = this.removeAaary(this.selectDatas,selectData);
+ }
+ }
+ confirm(){
+ console.log(this.selectDatas);
+ this.exhibition = false;
+ }
+ getItems(val){
+ console.log(this.assdsd);
+ if(val.data){
+ this.searchValue+=val.data;
+ }else{
+ this.searchValue = this.searchValue.substring(0,this.searchValue.length - 1);
+ }
+ console.log(this.searchValue);
+ for(var i=0;i<this.medata.length;i++){
+ if(this.medata[i].name.indexOf(this.searchValue)==-1){
+ this.removeAaary(this.medata,this.medata[i]);
+ }
+ }
+ }
+ removeAaary(_arr, _obj) {
+ var length = _arr.length;
+ for (var i = 0; i < length; i++) {
+ if (_arr[i] == _obj) {
+ if (i == 0) {
+ _arr.shift();
+ return _arr;
+ }
+ else if (i == length - 1) {
+ _arr.pop();
+ return _arr;
+ }
+ else {
+ _arr.splice(i, 1);
+ return _arr;
+ }
+ }
+ }
+ }
+}
--
Gitblit v1.8.0