有群友觉得：仪表板的格子太大了，有没有办法改小点，这样排放部件更精确，现在部件拖放的时候，要么太大要么太小！

自带修改

点击右下角进入编辑模式
image.png

空白处右键 -> 设置
image.png

增大列数就缩小单元格
image.png

列数50 部件间边距3 就很小了
image.png
根仪表板网格改小后，再增加的内仪表板的网格并没有改小，仍然是默认大小。通过改代码把默认网格大小改小，以后所有画面都是小网格很方便
感谢ThingBoard中文社区：BigG，刀刀 网友反馈

修改代码

image.pngimage.png

ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
添加有//custom-- 注释的代码，注释掉下面代码中注释掉的代码

  1. ngOnInit(): void {
  2.   if (!this.dashboardTimewindow) {
  3.     this.dashboardTimewindow = this.timeService.defaultTimewindow();
  4.   }
  5.   this.gridsterOpts = {
  6.   // gridType: GridType.ScrollVertical,
  7.   // margin: isDefined(this.margin) ? this.margin : 3,
  8.   gridType: GridType.Fixed, //custom--
  9.   fixedColWidth: 30, //custom--
  10.   fixedRowHeight: 30, //custom--
  11.   margin: 3, //custom--
  13.     //=====这下面的不用管，没有改动
  14.   displayGrid:DisplayGrid.Always,//一直显示网格，方便演示，实际去掉这项
  15.   swap: false, //打开后组件可交换位置
  16.   maxRows: 100,//网格最大行数
  17.   minCols: this.columns ? this.columns : 24,
  18.   maxCols: 3000,//网格最大列数
  19.   //仪表最大格子数
  20.   maxItemCols: 1000,
  21.   maxItemRows: 1000,
  22.   maxItemArea: 1000000,
  23.   outerMargin: true,
  24.   minItemCols: 1,//仪表最小格子数
  25.   minItemRows: 1,
  26.   defaultItemCols: 8,//默认仪表格子数
  27.   defaultItemRows: 6,
  28.   resizable: {enabled: this.isEdit},
  29.   draggable: {enabled: this.isEdit},
  30.     //改变x,y,col,row时候的回调
  31.     itemChangeCallback: item => this.dashboardWidgets.sortWidgets(),
  32.       itemInitCallback: (item, itemComponent) => {
  33.         (itemComponent.item as DashboardWidget).gridsterItemComponent = itemComponent;
  34.       }
  35. };

添加有//custom-- 注释的行，注释掉下面代码中注释的代码（自己都读不通这句话）

  1. private updateMobileOpts(parentHeight?: number) {
  2.     this.isMobileSize = this.checkIsMobileSize();
  3.     const autofillHeight = this.isAutofillHeight();
  4.     if (autofillHeight) {
  5.       // this.gridsterOpts.gridType = this.isMobileSize ? GridType.Fixed : GridType.Fit;
  6.       this.gridsterOpts.gridType = this.isMobileSize ? GridType.Fixed : GridType.Fixed; //custom--
  7.     } else {
  8.       // this.gridsterOpts.gridType = this.isMobileSize ? GridType.Fixed : GridType.ScrollVertical;
  9.       this.gridsterOpts.gridType = this.isMobileSize ? GridType.Fixed : GridType.Fixed; //custom--
  10.     }
  11.     const mobileBreakPoint = this.isMobileSize ? 20000 : 0;
  12.     this.gridsterOpts.mobileBreakpoint = mobileBreakPoint;
  13.     if(this.isMobileSize){ //custom-- 加上是否是手机尺寸的判断,避免PC受影响
  14.       const rowSize = this.detectRowSize(this.isMobileSize, autofillHeight, parentHeight);
  15.       if (this.gridsterOpts.fixedRowHeight !== rowSize) {
  16.         this.gridsterOpts.fixedRowHeight = rowSize;
  17.       }
  18.     } //custom--
  19.   }

添加有//custom-- 注释的行，注释掉下面代码中注释的代码（自己都读不通这句话）

  1. private updateLayoutOpts() {
  2.   this.gridsterOpts.minCols = this.columns ? this.columns : 24;
  3.   this.gridsterOpts.margin = 3; //custom--
  4.   // this.gridsterOpts.margin = isDefined(this.margin) ? this.margin : 10;
  5. }

说明

thingboard的格子布局使用的是angular-gridster2
下面的官网可以很好地调试出你要的效果。
如果觉得还不符合胃口，调整margin fixedColWidth 和 fixedRowHeight
margin是网格中间的那个缝隙，根据fixedColWidth 和 fixedRowHeight 的大小，相应设置大小。
gridType: GridType.ScrollVertical 网格类型如果选垂直滚动，是没办法调整网格大小的。

如果对你有帮助，点个赞关注一下吧

angular-gridster2官网地址
image.png
一言不合就点赞.gif