DevUI设置表格某一列点击

本文介绍了如何在Angular项目中使用DevUI框架,设置表格某一列点击事件。通过添加'cellclick'事件并在ts文件中配置columns,利用renderer返回带标签的字符串。由于样式被清除,需在全局'styles.scss'文件中设定class来实现特定的页面效果,如字体悬浮显示小手。
摘要由CSDN通过智能技术生成

html:添加 cellclick事件

<db-angular-tree-grid 
#treegrid 
[data]="data" 
[configs]="configs" 
(cellclick)="onCellclick($event)">
</db-angular-tree-grid>

 ts:columns配置

        通过renderer返回带标签的字符串,但这里设置style会被系统清除,只能加载全局的样式,所以设置的class也是在全局的style.scss里配置的

 columns: [
            { name: 'orgName', header: '部门名称' },
            { name: 'reportTime', header: '填报时间' },
            {
                name: 'weeklyPeriods', header: '周报期数', renderer: function (weeklyPeriods) {
                    return '<font color="blue" class="cellFont">' + weeklyPeriods + '</font>';
                },
            },
            { name: 'theNumberOf', header: '受灾数' },
        ],

styles.scss

// 表格边框
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在DevUI框架中上传文件并显示进度条,可以使用DevUI提供的`d-upload`组件和`d-progress`组件。 首先,在HTML模板中使用`d-upload`组件来实现文件上传: ``` html <d-upload [url]="uploadUrl" [multiple]="false" [showUploadList]="false" (onStart)="onStart($event)"> <ng-template #tip> <span class="devui-upload-tip-text">将文件拖到此处,或<em>点击上传</em></span> </ng-template> </d-upload> ``` 其中,`uploadUrl`是上传文件的URL,`multiple`表示是否允许上传多个文件,`showUploadList`表示是否显示上传列表,`onStart`是上传开始时的回调函数。 接着,在组件的TS文件中,使用`d-progress`组件来实现进度条: ``` typescript import { Component } from '@angular/core'; @Component({ selector: 'app-file-upload', template: ` <d-upload [url]="uploadUrl" [multiple]="false" [showUploadList]="false" (onStart)="onStart($event)"> <ng-template #tip> <span class="devui-upload-tip-text">将文件拖到此处,或<em>点击上传</em></span> </ng-template> </d-upload> <d-progress [percent]="percent" [strokeWidth]="10" [strokeColor]="'#37a2da'"></d-progress> ` }) export class FileUploadComponent { uploadUrl = 'http://localhost:3000/api/upload'; percent = 0; onStart(event) { const xhr = event.xhr; xhr.upload.addEventListener('progress', (e) => { if (e.total > 0) { this.percent = Math.floor(e.loaded / e.total * 100); } }, false); } } ``` 其中,`percent`表示进度条的百分比,`strokeWidth`和`strokeColor`分别表示进度条的宽度和颜色。在`onStart`回调函数中,监听XHR对象的`progress`事件,根据已上传的字节数计算出上传的进度百分比,更新`percent`变量的值,从而实现进度条的显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值