弹出框选择的做法

1.创建 弹出页面

<div class="modal-header">

<h4 class="modal-title" id="mysysResLabel">选择资源</h4>

<button type="button" class="close" data-dismiss="modal" aria-hidden="true"

(click)="clear()">&times;</button>

</div>

<div class="modal-body">

<jhi-alert-error></jhi-alert-error>

<div class="data-table-wrap">

<!--loading-->

<div class="data-table-loading" *ngIf="loading">

<i class="loading"></i>

</div>

<div class="data-table-search">

<!--搜索-->

<form class="form-inline" (ngSubmit)="search()">

<div class="form-group">

<label>资源名称：</label>

<input type="text" class="form-control" name="resName" [(ngModel)]="query.resName">

</div>

<button type="submit" class="btn btn-primary">搜索</button>

</form>

</div>

<!--#dt引用，rows:每页显示多少条，paginator:是否分页，lazy:是否lazyload，totalRecords:总条数-->

<p-dataTable #dt

[value]="sysRess"

[lazy]="true"

[rows]="itemsPerPage"

[paginator]="true"

[totalRecords]="totalRecords"

[(selection)]="selected"

dataKey="resId"

emptyMessage="没有记录"

(onLazyLoad)="lazyLoad($event)">

<p-column [style]="{‘width‘:‘38px‘}" [selectionMode]="options.multiple ? ‘multiple‘ : ‘single‘"></p-column>

<!--sortable是否可排序-->

<p-column field="resId" header="资源ID" [sortable]="true" *ngIf="false"></p-column>

<!--sortable是否可排序-->

<p-column field="resName" header="资源名称(英文)" [sortable]="true"></p-column>

<!--sortable是否可排序-->

<p-column field="resDesc" header="资源描述" [sortable]="true"></p-column>

<!--sortable是否可排序-->

<p-column field="httpType" header="http请求方式" [sortable]="true"></p-column>

<!--sortable是否可排序-->

<p-column field="apiPath" header="api路径" [sortable]="true"></p-column>

</p-dataTable>

</div>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary" (click)="clear()">

<span class="fa fa-ban"></span>&nbsp;<span>取消</span>

</button>

<button type="button" class="btn btn-primary" (click)="submit()">

<span class="fa fa-floppy-o"></span>&nbsp;<span>确定</span>

</button>

</div>

2.创建 弹出页面的conponent.ts文件

import { Component, OnInit, Injectable } from ‘@angular/core‘;

import { Http, Headers } from ‘@angular/http‘;

import { Observable } from ‘rxjs/Rx‘;

import { NgbActiveModal, NgbModal, NgbModalRef } from ‘@ng-bootstrap/ng-bootstrap‘;

import { EventManager, AlertService } from ‘ng-jhipster‘;

import { ITEMS_PER_PAGE, Principal } from ‘../‘; // 分页设置，权限验证等

import { API_URL } from ‘../../app.constants‘;

@Component({

selector: ‘choose-sysRes‘,

templateUrl: ‘./choose-sysRes.html‘

})

export class ChooseSysResComponent implements OnInit {

private resourceUrl = `${API_URL}/api/wrSysRes`;

sysRess: any[];

itemsPerPage: any = ITEMS_PER_PAGE; // 读取配置，每页显示多少条

page: any = 0; // 默认显示第一页

sortBy: any; // 排序

totalRecords: number; // 总页数

loading = true;

query = {};

selected;

options: any;

activeModal;

constructor(

private http: Http,

// private activeModal: NgbActiveModal, //当前活动的dialog

private alertService: AlertService, //错误管理

private eventManager: EventManager // 事件管理

) {}

ngOnInit() {}

loadAll() {

this.loading = true;

let body = this.query;

let options = {

headers: new Headers({

pageIndex: this.page,

pageSize: this.itemsPerPage,

orderBy: this.sortBy

})

};

this.http.post(`${this.resourceUrl}/page`, body, options )

.subscribe(

(res) => this.onSuccess(res.json(), res.headers),

(res) => this.onError(res.json())

);

}

lazyLoad(e) {

this.sortBy = e.sortField ? e.sortField + ‘ ‘ + (e.sortOrder === 1 ? ‘asc‘ : ‘desc‘) : null;

this.page = e.first / e.rows;

this.loadAll();

}

search() {

this.page = 0;

this.loadAll();

}

onSuccess(data, headers) {

this.loading = false;

if (+data.responseCode !== 100) {

this.alertService.error(data.messageList[0].key, data.messageList[0].message, null);

return;

}

this.sysRess = data.i0216F0004RespL001List;

this.totalRecords = data.pageControllerInfo.totalRecordCount;

}

onError(error) {

this.loading = false;

this.alertService.error(error.error, error.message, null);

}

/**

* 关闭弹窗

*/

clear() {

this.activeModal.dismiss(‘cancel‘);

}

/**

* 点击弹窗的确认按钮，触发sysResChoosed事件，将选中的用户传递出去

*/

submit() {

this.eventManager.broadcast({

name: ‘sysResChoosed‘,

content: this.selected

});

this.clear();

}

}

@Injectable()

export class ChooseSysResService {

constructor(

private modalService: NgbModal

) {}

/**

* 弹出选择用户的窗口

* @param options 可以接收一个参数，传递给component。如multiple，可扩展

*/

open(options?) {

let modalRef = this.modalService.open(ChooseSysResComponent, {

size: ‘lg‘,

backdrop: ‘static‘

});

modalRef.componentInstance.options = options || {};

modalRef.componentInstance.activeModal = modalRef;

}

}

3.加入到index.ts文件中，这样外面才能调用

export * from ‘./alert/alert.component‘;

export * from ‘./alert/alert-error.component‘;

export * from ‘./shared-components/linkage.component‘;

export * from ‘./shared-components/dic.component‘;

export * from ‘./shared-components/rvSeg.component‘;

export * from ‘./dialogs/choose-user‘;

export * from ‘./dialogs/choose-addv‘;

export * from ‘./dialogs/choose-org‘;

export * from ‘./dialogs/choose-rvSeg‘;

export * from ‘./dialogs/choose-rv‘;

export * from ‘./dialogs/choose-addvUser‘;

export * from ‘./dialogs/choose-orgUser‘;

export * from ‘./dialogs/choose-sysRes‘;

export * from ‘./auth/csrf.service‘;

export * from ‘./auth/state-storage.service‘;

export * from ‘./auth/account.service‘;

export * from ‘./auth/auth-jwt.service‘;

export * from ‘./auth/auth.service‘;

export * from ‘./auth/principal.service‘;

export * from ‘./auth/has-any-authority.directive‘;

export * from ‘./tracker/tracker.service‘;

export * from ‘./login/login.component‘;

export * from ‘./login/login.service‘;

export * from ‘./login/login-modal.service‘;

export * from ‘./constants/pagination.constants‘;

export * from ‘./user/account.model‘;

export * from ‘./user/user.model‘;

export * from ‘./user/user.service‘;

export * from ‘./shared-libs-primeng.module‘;

export * from ‘./shared-libs.module‘;

export * from ‘./shared-common.module‘;

export * from ‘./shared.module‘;

export * from ‘./auth/user-route-access-service‘;

export * from ‘./model/filePath.model‘;

export * from ‘./constants/wrSwsB.constants‘;

export * from ‘./constants/wrIntB.constants‘;

4.在模块文件shared-common.module.ts中加入组件

import { NgModule, Sanitizer } from ‘@angular/core‘;

import { Title } from ‘@angular/platform-browser‘;

import { AlertService } from ‘ng-jhipster‘;

import {

SchintacloudSharedLibsModule,

JhiAlertComponent,

JhiAlertErrorComponent,

LinkageComponent,

DicComponent,

RvSegComponent,

ChooseUserComponent,

ChooseUserService,

ChooseAddvComponent,

ChooseAddvService,

ChooseOrgComponent,

ChooseOrgService,

ChooseRvSegComponent,

ChooseRvSegService,

ChooseRvComponent,

ChooseRvService,

ChooseAddvUserComponent,

ChooseAddvUserService,

ChooseOrgUserComponent,

ChooseOrgUserService,

ChooseSysResComponent,

ChooseSysResService

} from ‘./‘;

export function alertServiceProvider(sanitizer: Sanitizer) {

// set below to true to make alerts look like toast

let isToast = false;

return new AlertService(sanitizer, isToast);

}

@NgModule({

imports: [

SchintacloudSharedLibsModule

],

declarations: [

JhiAlertComponent,

JhiAlertErrorComponent,

LinkageComponent,

DicComponent,

RvSegComponent,

ChooseUserComponent,

ChooseAddvComponent,

ChooseOrgComponent,

ChooseRvSegComponent,

ChooseRvComponent,

ChooseAddvUserComponent,

ChooseOrgUserComponent,

ChooseSysResComponent

],

entryComponents: [

ChooseUserComponent,

ChooseAddvComponent,

ChooseOrgComponent,

ChooseRvSegComponent,

ChooseRvComponent,

ChooseAddvUserComponent,

ChooseOrgUserComponent,

ChooseSysResComponent

],

providers: [

{

provide: AlertService,

useFactory: alertServiceProvider,

deps: [Sanitizer]

},

Title,

ChooseUserService,

ChooseAddvService,

ChooseOrgService,

ChooseRvSegService,

ChooseRvService,

ChooseAddvUserService,

ChooseOrgUserService,

ChooseSysResService

],

exports: [

SchintacloudSharedLibsModule,

JhiAlertComponent,

JhiAlertErrorComponent,

LinkageComponent,

DicComponent,

RvSegComponent,

ChooseUserComponent,

ChooseAddvComponent,

ChooseOrgComponent,

ChooseRvSegComponent,

ChooseRvComponent,

ChooseAddvUserComponent,

ChooseOrgUserComponent,

ChooseSysResComponent

]

})

export class SchintacloudSharedCommonModule {}

5.外部调用  ，（红色标记）

/**

* @创建时间: 2017-05-25 10:29:57

*/

import { Component, OnInit, OnDestroy } from ‘@angular/core‘;

import { ActivatedRoute } from ‘@angular/router‘;

import { NgbActiveModal, NgbModalRef, NgbModal } from ‘@ng-bootstrap/ng-bootstrap‘;

import { EventManager, AlertService } from ‘ng-jhipster‘;

import { WrSysMenuModalService } from ‘./wrSysMenu-modal.service‘;

import { WrSysMenu } from ‘./wrSysMenu.model‘;

import { WrSysMenuService } from ‘./wrSysMenu.service‘;

import { API_URL } from ‘../app.constants‘;

import { Http, Headers } from ‘@angular/http‘;

import { Subscription } from ‘rxjs/Rx‘;

import { ChooseSysResService } from ‘../shared‘;

import { ITEMS_PER_PAGE, Principal } from ‘../shared‘; // 分页设置，权限验证等

@Component({

selector: ‘jhi-wrSysMenu-mgmt-dialog‘,

styles:[`

.form-group{

display: -webkit-box;

}

.form-group label {

display: -webkit-box;

margin-bottom: 0;

width: 6rem;

-webkit-box-align: center;

}

.form-control.ng-valid[required], .form-control.ng-valid.required{

border-left: 1px solid rgba(0, 0, 0, 0.2);

}

.form-control{

display: -webkit-box;

-webkit-box-flex: 1;

}

.form-group{

position:relative;

}

.form-group .btn-primary{

margin-left: 0.5rem;

}

p-calendar{

display: -webkit-box;

-webkit-box-flex: 1;

}

:host >>> .dialog-datepick{

display: -webkit-box;

-webkit-box-flex: 1;

}

:host >>> .ui-inputtext {

display: -webkit-box;

padding: .5rem .75rem;

font-size: 1rem;

line-height: 1.25;

}

:host >>> .btn-update{

position: absolute;

right: 25px;

top: 0;

border-top-left-radius: 0;

border-bottom-left-radius: 0;

}

.address .form-control{

width: 86%;

}

:host >>> .ui-dropdown, .ui-multiselect{

border:1px solid #d6d6d6;

}

p-datatable{

display:flex;

}

.data-table-wrap p-tree{

float: left;

height: 50rem;

margin-right: 1rem;

}

:host >>> .col-button{

text-align:center;

}

:host >>> .col-button button{

margin:0.5rem 0;

}

`],

templateUrl: ‘./wrSysMenu-management-dialog.component.html‘

})

export class WrSysMenuMgmtDialogComponent implements OnInit, OnDestroy {

private resourceUrl = `${API_URL}/api/wrSysMenu`;

sysMenuRess:any[];

wrSysMenu: any;

loading: boolean;

isSaving: Boolean;

eventSubscriber: Subscription;

page: any = 0; // 默认显示第一页

sortBy: any; // 排序

totalRecords: number; // 总页数

// 查询条件

query: any = {};

itemsPerPage: any = ITEMS_PER_PAGE;// 读取配置，每页显示多少条

chooseWrSysRes:any;

selectedSysRes;

chooseSysResSub:any;

constructor (

private http: Http,// 后台访问

public activeModal: NgbActiveModal,

private wrSysMenuService: WrSysMenuService,

private chooseSysResService: ChooseSysResService,

private alertService: AlertService, // 错误提示相关的service

private principal: Principal, // 权限验证

private eventManager: EventManager // 事件管理

) {}

ngOnInit() {

this.isSaving = false;

if (this.wrSysMenu.menuId !== null) {

this.query.menuId = this.wrSysMenu.menuId;

} else {

this.query.menuId = ‘-1‘;

}

this.registerChooseSysResCallback();

}

// 销毁一些订阅 之类的

ngOnDestroy() {

this.eventManager.destroy(this.chooseSysResSub);

}

/**

* dataTable进行排序、分页、查询都会触发onLazyLoad事件

* @param e 参数包含分页信息、排序信息、查询信息等

*/

lazyLoad (e) {

console.log(e);

this.sortBy = e.sortField ? e.sortField + ‘ ‘ + (e.sortOrder === 1 ? ‘asc‘ : ‘desc‘) : null;

this.page = e.first / e.rows;

if(this.query.menuId != null ){

this.loadRes();

}

}

/**

* 搜索

*/

search () {

// TODO 这里搜索的时候需要组织搜索条件

this.page = 0; // 搜索的时候重置分页

this.loadRes();

}

/**

* 加载数据

*/

loadRes() {

this.loading = true;

let body = this.query ||{};

let headers = {

headers: new Headers({

pageIndex: this.page,

pageSize: this.itemsPerPage,

orderBy: this.sortBy

})

};

this.http.post(`${this.resourceUrl}/res`, body, headers)

.subscribe(

(res) => this.onSuccessRes(res.json(), res.headers),

(res) => this.onError(res.json())

);

}

/**

* 列表查询成功之后的回调

* @param data 返回的数据

* @param headers 响应headers

*/

private onSuccessRes(data, headers) {

if (+data.responseCode !== 100) {

this.alertService.error(data.messageList[0].key, data.messageList[0].message, null); // TODO 需要显示多个message

this.loading = false;

return;

}

this.sysMenuRess = data.i0208F0007RespL001List;

this.totalRecords = data.pageControllerInfo.totalRecordCount;

this.loading = false;

}

onError(error) {

this.loading = false;

this.alertService.error(error.error, error.message, null);

}

clear() {

this.activeModal.dismiss(‘cancel‘);

}

// 注册资源选择回调，返回的是选中资源信息

// addvUserChoosed为固定写死

registerChooseSysResCallback() {

this.chooseSysResSub = this.eventManager.subscribe(‘sysResChoosed‘, (response) => {

this.selectedSysRes = response.content;

if(this.selectedSysRes != null && this.selectedSysRes.length>0) {

for(let i=0; i<this.selectedSysRes.length; i++) {

let res:any = {};

res = this.selectedSysRes[i];

res.menuId = this.wrSysMenu.menuId;

//判断是否存在资源

let bl: boolean = true;

for(let j=0; j<this.sysMenuRess.length; j++) {

if(this.sysMenuRess[j].resId == this.selectedSysRes[i].resId) {

bl = false;

}

}

if(bl) {

this.sysMenuRess.push(res);

}

}

}

console.log(this.selectedSysRes);

});

}

//删除资源

deleteRes(resId:string){

if(this.sysMenuRess != null && this.sysMenuRess.length>0){

for(let j=0; j<this.sysMenuRess.length; j++){

if(resId == this.sysMenuRess[j].resId) {

this.sysMenuRess.pop();

}

}

}

}

// 选择资源

chooseSysResUser() {

this.chooseSysResService.open({

//如果需要多选，传入这个参数

multiple: true

});

}

/**

* 保存，根据是否有id，来做更新或创建处理

*/

save() {

this.isSaving = true;

// 如果有id，表示编辑，那么更新

this.wrSysMenu.sysReslist = this.sysMenuRess;

if (this.wrSysMenu.menuId !== null) {

this.wrSysMenuService.update(this.wrSysMenu).subscribe(response => this.onSaveSuccess(response), () => this.onSaveError());

} else {

// 否则创建

this.wrSysMenuService.create(this.wrSysMenu).subscribe(response => this.onSaveSuccess(response), () => this.onSaveError());

}

}

/**

* 保存成功

* @param result response结果

*/

private onSaveSuccess(result) {

this.isSaving = false;

let res = result.json();

if (+res.responseCode !== 100) {

// 如果code不是100，提示错误

this.eventManager.broadcast( {name: ‘schintacloudApp.httpError‘, content: result} );

return;

}

// 成功则重新加载列表

this.eventManager.broadcast({ name: ‘wrSysMenuListModification‘, content: ‘OK‘ });

// 关闭dialog

this.activeModal.dismiss(result);

}

private onSaveError() {

this.isSaving = false;

}

}

@Component({

selector: ‘jhi-wrSysMenu-dialog‘,

template: ‘‘

})

export class WrSysMenuDialogComponent implements OnInit, OnDestroy {

modalRef: NgbModalRef;

routeSub: any;

constructor (

private route: ActivatedRoute,

private wrSysMenuModalService: WrSysMenuModalService

) {}

ngOnInit() {

this.routeSub = this.route.params.subscribe(params => {

if ( params[‘id‘] ) {

// 如果有参数id，表示编辑

this.modalRef = this.wrSysMenuModalService.open(WrSysMenuMgmtDialogComponent, params[‘id‘],params[‘type‘]);

} else {

// 否则表示新增

this.modalRef = this.wrSysMenuModalService.open(WrSysMenuMgmtDialogComponent);

}

});

}

ngOnDestroy() {

this.routeSub.unsubscribe();

}

}

6.页面

<!--

* @创建时间: 2017-05-25 10:29:57

*/

-->

<form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">

<div class="modal-header">

<h4 class="modal-title" id="myWrSysMenuLabel">

<div *ngIf="wrSysMenu.menuId != null">

修改菜单信息

</div>

<div *ngIf="wrSysMenu.menuId == null">

创建菜单信息

</div>

</h4>

<button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="clear()">&times;</button>

</div>

<div class="modal-body">

<jhi-alert-error></jhi-alert-error>

<div class="form-group" *ngIf="false">

<label>功能模块ID</label>

<input type="text" class="form-control" name="id" [(ngModel)]="wrSysMenu.menuId" readonly>

</div>

<div class="form-group" hidden>

<label class="form-control-label">父级ID</label>

<input type="text" class="form-control" name="pid" #pidInput="ngModel" [(ngModel)]="wrSysMenu.pid" maxlength="128">

</div>

<div class="form-group">

<label>父级菜单</label>

<input type="text" class="form-control" name="id" [(ngModel)]="wrSysMenu.parentName" readonly>

</div>

<div class="form-group">

<label class="form-control-label">菜单名称</label>

<input type="text" class="form-control" name="menuName" #menuNameInput="ngModel" [(ngModel)]="wrSysMenu.menuName" maxlength="32" required>

<div *ngIf="menuNameInput.dirty && menuNameInput.invalid">

<small class="form-text text-danger" *ngIf="menuNameInput.errors.maxlength">

[菜单名称]不能超过32字符

</small>

<small class="form-text text-danger" *ngIf="menuNameInput.errors.required">

[菜单名称]不能为空

</small>

</div>

</div>

<div class="form-group" hidden>

<label class="form-control-label">功能模块全路径</label>

<input type="text" class="form-control" name="idPath" #idPathInput="ngModel" [(ngModel)]="wrSysMenu.idPath" readonly>

</div>

<div class="form-group">

<label class="form-control-label">访问地址</label>

<input type="text" class="form-control" name="path" #pathInput="ngModel" [(ngModel)]="wrSysMenu.path" maxlength="255" required>

<div *ngIf="pathInput.dirty && pathInput.invalid">

<small class="form-text text-danger" *ngIf="pathInput.errors.maxlength">

[访问地址]不能超过255字符

</small>

<small class="form-text text-danger" *ngIf="pathInput.errors.required">

[访问地址]不能为空

</small>

</div>

</div>

<div class="form-group" >

<label class="form-control-label">排序</label>

<input type="text" class="form-control" name="orderIndex" #orderIndexInput="ngModel" [(ngModel)]="wrSysMenu.orderIndex" required>

<div *ngIf="orderIndexInput.dirty && orderIndexInput.invalid">

<small class="form-text text-danger" *ngIf="orderIndexInput.errors.maxlength">

[排序]不能超过22字符

</small>

<small class="form-text text-danger" *ngIf="orderIndexInput.errors.required">

[排序]不能为空

</small>

</div>

</div>

<div class="form-group">

<label class="form-control-label">菜单图标</label>

<input type="text" class="form-control" name="icon" #iconInput="ngModel" [(ngModel)]="wrSysMenu.icon" maxlength="100">

<div *ngIf="iconInput.dirty && iconInput.invalid">

<small class="form-text text-danger" *ngIf="iconInput.errors.maxlength">

[菜单图标]不能超过100字符

</small>

</div>

</div>

<div class="form-group" hidden>

<label class="form-control-label">层级</label>

<input type="text" class="form-control" name="level" #levelInput="ngModel" [(ngModel)]="wrSysMenu.level" maxlength="22">

<div *ngIf="levelInput.dirty && levelInput.invalid">

<small class="form-text text-danger" *ngIf="levelInput.errors.maxlength">

[层级]不能超过22字符

</small>

</div>

</div>

<div class="form-group">

<button type="button" class="btn btn-primary" data-dismiss="modal" (click)="chooseSysResUser()">

<span class="fa fa-plus"></span>&nbsp;<span>选择资源</span>

</button>

</div>

<!--#dt引用，rows:每页显示多少条，paginator:是否分页，lazy:是否lazyload，totalRecords:总条数-->

<p-dataTable #dt [loading]="loading" [value]="sysMenuRess" [lazy]="true" [rows]="itemsPerPage" [paginator]="true" [totalRecords]="totalRecords"

emptyMessage="没有记录" (onLazyLoad)="lazyLoad($event)">

<p-column field="menuResId" header="功能资源ID" [sortable]="true" [hidden]="true"></p-column>

<p-column field="menuId" header="功能模块ID" [sortable]="true" [hidden]="true"></p-column>

<p-column field="resId" header="资源ID" [sortable]="true" [hidden]="true"></p-column>

<p-column field="menuName" header="菜单名称" [sortable]="true" [hidden]="true"></p-column>

<p-column field="pid" header="父级ID" [sortable]="true" [hidden]="true"></p-column>

<p-column field="idPath" header="功能模块路径" [sortable]="true" [hidden]="true"></p-column>

<p-column field="resName" header="资源名称" [sortable]="true" [style]="{‘width‘:‘150px‘}"></p-column>

<p-column field="resDesc" header="资源描述" [sortable]="true" ></p-column>

<p-column field="httpType" header="http请求方式" [sortable]="true" [style]="{‘width‘:‘150px‘}"></p-column>

<p-column field="apiPath" header="api路径" [sortable]="true" *ngIf="false"></p-column>

<p-column styleClass="col-button" header="操作" [style]="{‘width‘:‘150px‘}">

<template let-wrSysMenu="rowData" pTemplate="body">

<button type="button" pButton label="删除" (click)="deleteRes(wrSysMenu.resId)"></button>

</template>

</p-column>

</p-dataTable>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="clear()">

<span class="fa fa-ban"></span>&nbsp;<span

>取消</span>

</button>

<button type="submit" [disabled]="editForm.form.invalid || isSaving" class="btn btn-primary">

<span class="fa fa-floppy-o"></span>&nbsp;<span>保存</span>

</button>

</div>

</form>

时间： 2024-08-28 12:32:03

弹出框选择的做法的相关文章

弹出框的代码做法：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0; margin: 0; } header { height: 60px; line-height: 60px; background-color: gray; } .wr

PickList的使用，按钮弹出框选择一个文档带出多个值

Sub Click(Source As Button) Dim ss As New NotesSession Dim ws As New notesuiworkspace Dim CurDB As NotesDatabase Dim db As NotesDatabase Dim uidoc As notesuidocument Dim vw As NotesView Dim doc As NotesDocument Dim doc1 As NotesDocument Dim wldoc As

android 弹出框(输入框和选择框)

1.输入框: final EditText inputServer = new EditText(this); inputServer.setFilters(new InputFilter[]{new InputFilter.LengthFilter(50)}); AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setTitle("个性点的签名").setIcon(android.R.drawab

ASP.NET实现弹出框真分页将复选框选择的数据存到数据库中（一）

ASP.NET实现弹出框真分页将复选框选择的数据存到数据库中,这个问题分一下几步走 1.将弹出框真分页后复选框选择的数据保存. 2.将弹出框保存的数据传到父页面上. 3.将数据在父页面上显示. 4.点击保存将信息存入数据库中. 首先来第一步将弹出框真分页后复选框选择的数据保存. 思路很简单就是先真分页,然后在点击下一页的时候扫描这一页所有点击复选框的数据保存到一个变量数组中.下面就是主要代码: ASP代码: <%@ Page Language="C#" AutoEventWire

android 弹出日期选择框

DatePickerDialog 在很多时候需要用户去设定时间,不可能让用户去在一个文本框中去输入时间,所以就需要有个日期弹出选择框,而这个框就是DatePickerDialog. 1.在API中的DatePickerDialog类的继承关系 从类的继承关系来看DatePickerDialog继承于Dialog就可以明显看出是一个弹出框了 2.构造函数 callBack:是在你设置时间的时候触发的. year , monthOfYear , dayOfMonth这三个参数是用来初始化DatePi

点击事件中实现弹出一个选择框（如选择网络设置、选择电话短信联系方式）

1.网络设置 public void checkNetwork(){ //获取连接的管理对象 ConnectivityManager connectivityManager = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE); //获取当前正在使用的网络 NetworkInfo networkInfo = connectivityManager.getActiveNetworkInfo(); //判断网络是

[RN] React Native 封装选择弹出框(ios&amp;android)

之前看到react-native-image-picker中自带了一个选择器,可以选择拍照还是图库,但我们的项目中有多处用到这个选择弹出框,所以就自己写了一下,最最重要的是ios和Android通用.先上动态效果图~ 参考: https://www.jianshu.com/p/42b4390e860e https://www.jianshu.com/p/71c4d047b2f8 原文地址:https://www.cnblogs.com/wukong1688/p/10960917.html

更改bootstrap-datetimepicker弹出日期选择框只能在下方的限制

城市监控的项目,网页调用监控摄像头,并需要replay的日期和时间选择calendar.找了半天,找到一个好东东~~~~bootstrap-datetimepicker, UI也很有型的范,就用它吧~~, 一切顺利,就是这个calendar的弹出框只能在下方,而我需要嵌套在摄像头监控屏幕下的工具条上,如果弹出框在下方就太离谱了,最后决定改,哈就成就今天这个calendar啦,自我感觉效果不错,晒出来装一下B~~~~哈 更改的bootstrap-datetimepicker.js /** * @l

ueditor插件弹出框无法选择被覆盖解决方案

onOpen: function() {                    $(".window-mask").css("z-index", "8");                    $(".window-shadow").css("z-index", "9");                    $("div.panel.window").css(&