使用Jquery动态调整角度/ Clarity Datagrid列宽度的大小

我是棱角分明的新人，并且一直在研究Clarity作为UI组件 . 我最常想到的是Clarity'Datagrid' .

在这里，我想制作一个通用组件，可以配置类似'columnModel'和'data'的东西，它们都来自后端 . 它将用于角度分量结构指令（* ngFor等）以显示数据网格 . 这就是我想出来的......

Definitions in app.component.ts

columnModel = [
{header:'Id',dataIndex:'id','width':50},
{header:'Name',dataIndex:'name','width':100},
]

data : [
          {id: 1, name: 'Name1',  age: 1, rem: 'aaassssssssssssss'} ,
          { id: 2, name: 'Name2', age: 1, rem: 'aaassssssssssssss'},
          { id: 3, name: 'Name3', age: 1, rem: 'aaassssssssssssss'},
]

所以这就是我所做的 . （因为缺乏对Clarity n Angular的更好理解） . 我使用了jQuery ....

在主机组件的'ngOnInit'上，我使用jquery在每个结果行中设置'data-columns'和'data-cells'的'width' . 基于上面的'colModel'..看来工作!!!!

jQuery Code:

ngOnInit() {

const jqModel = this.colModel;

$(document).ready(function() {


    $(".datagrid-column").each(function(indx) {

       $(this).attr("style",function(i,v){return "max-width:" + 
                 jqcolModel[indx].width +"px;width:" + 
                               jqcolModel[indx].width+"px;"});

    });


    $(".datagrid-row-master").each(function(indx) {

       $(this).children().each(function(indx) {
           $(this).attr("style",function(i,v){return "max-width:" + 
                  jqcolModel[indx].width +"px;width:" +                  
                                         jqcolModel[indx].width+"px"});
       });

  });
}

我问你的专家是 'Is this a best practise ?' 或 is there a better way to achieve this..

我要提前感谢你 .

1 回答

3
我将把答案分成两部分 . 第一部分是我将如何开始构建一个可按照问题中描述的方式配置的数据网格 . 第二部分纯粹是我对使用带有Angular的jQuery和一般学习Angular的看法 .

第1部分

清晰度数据网格是声明性的 . 这意味着您只声明了用例所需的内容 . 例如 - 如果您需要页脚或过滤器，则按照文档中的说明添加页脚或过滤器，数据网格负责其余部分 .

在您的特定情况下，您似乎需要用于设置列宽的模型，因此我将使用angular提供的内置绑定，通过声明绑定到本机样式属性的宽度，如下所示：

<clr-dg-column [style.width.px]="indexLookup('id')">ID</clr-dg-column>

注意style.width.px周围的括号...告诉Angular绑定到 indexLookup 函数提供的值 . lookup函数简单地减少了上面提供的columnModel，用于提供的索引值 .

这是一个简单的StackBlitz，显示了您提供的描述/代码的poc：https://stackblitz.com/edit/clarity-dark-theme-v013-zxh5ks

第2部分

IMO - 从长远来看，你只需要专注于Angular就可以帮助自己 . 根据我使用AngularJS应用程序的经验，jQuery是开发人员体验不佳的原因 . 我认为这仍适用于使用Angular构建的应用程序 . 关于AngularJS中的Thinking有a highly upvoted SO question，我相信作者写的很多东西仍然适用于Angular，即使Angular和AngularJS的语义不同 .

现代角度框架有很多东西需要掌握 . IMO，我会专注于易于消化的小部件，并在尝试引入其他模块或库来解决问题之前掌握它们 . 例如，您可以通过以下三个方面来扩展Angular提供的一些基本功能的知识：
- Data Binding ：我可以在组件或HTMLElement中绑定什么？它如何与 @Inputs 和 @Outputs 一起使用？绑定到动态值的影响是什么？当值发生变化时会发生什么？
- @Inputs and @Outputs ：他们是什么？你为什么要用它们？
- Component Lifecycle ：提供了什么生命周期钩子？他们什么时候打电话，为什么？绑定到其中一个生命周期钩子的常见用例是什么？
我不知道你是否已经完成了Angular tutorial但是它在一两个会话中容易消化的一口大小的块中得到了一些答案 .

当我第一次开始将AngularJS知识应用于Angular时，这些文档起初似乎无法接近 . 我发现值得花时间（经常）回到cheatsheet和Fundamentals/Components & Templates并重新阅读内容，因为我越来越多地使用框架并且需要使用它提供的更多内容 . 当我第一次开始与Angular合作时，我每周都会这样做几次，因为它帮助我提高了工作效率 .

希望POC stackblitz帮助您了解您的用例（动态设置Clarity数据网格的列宽）如何在没有jQuery的情况下完成 . 最后，我希望我从Angular docs学习的经验可以帮助您找到学习框架的最佳方法 .
回复于 2024-04-29T16:37:27+08:00

使用Jquery动态调整角度/ Clarity Datagrid列宽度的大小 - 如何？

1 回答

第1部分

第2部分

相关问题