نحوه سفارشی سازی سلول های هایلایت شده در جزء VTable

Summarize this content to 400 words in Persian Lang

عنوان سوال

چگونه سلول های هایلایت شده را در جزء VTable سفارشی کنیم؟

شرح مشکل

چگونه سلول های هایلایت شده را سفارشی کنیم و سبک برجسته سازی را با استفاده از جزء جدول VTable مشخص کنیم؟

راه حل

VTable از سبک های سلولی سفارشی پشتیبانی می کند که می تواند برای اجرای عملکرد برجسته سازی سفارشی استفاده شود.

سبک ثبت نام

ابتدا باید یک سبک سفارشی ثبت کنید

نیاز به تعریف idو styleدو ویژگی:

شناسه: شناسه منحصر به فرد سبک سفارشی
سبک: سبک سلولی سفارشی، همان styleپیکربندی در column، اثر نهایی ارائه تلفیقی از سبک سلول اصلی و سبک سفارشی است

ثبت سبک سفارشی به دو صورت تقسیم می شود optionپیکربندی و پیکربندی API:

ویژگی customCellStyle در گزینه option آرایه ای متشکل از چندین شیء سبک سفارشی دریافت می کند.

// init option
const option = {
// ……
customCellStyle: [
{
id: ‘custom-1’,
style: {
bgColor: ‘red’
}
}
] }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

API می تواند سبک های سفارشی را از طریق ثبت نام کند registerCustomCellStyleروش های ارائه شده توسط نمونه VTable:

instance.registerCustomCellStyle(id, style)

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سبک تکلیف

برای استفاده از یک سبک سفارشی ثبت شده، باید استایل سفارشی را به سلول اختصاص دهید. تخصیص مستلزم تعریف دو ویژگی است، cellPositionو customStyleId:

cellPosition: اطلاعات موقعیت سلول، از پیکربندی سلول‌ها و محدوده‌های سلولی پشتیبانی می‌کند.

تک سلولی: {row: number, col: number}

محدوده سلولی: {range: {start: {row: number, col: number}, end: {row: number, col: number}}}

customStyleId: شناسه سبک سفارشی، همان شناسه ای که هنگام ثبت سبک های سفارشی تعریف شده است

دو راه برای تخصیص وجود دارد، پیکربندی در optionو با استفاده از API پیکربندی کنید:

این customCellStyleArrangementویژگی موجود در گزینه آرایه ای از اشیاء سبک تخصیص سفارشی را دریافت می کند:

// init option
const option = {
// ……
customCellStyleArrangement: [
{
cellPosition: {
col: 3,
row: 4
},
customStyleId: ‘custom-1’
},
{
cellPosition: {
range: {
start: {
col: 5,
row: 5
},
end: {
col: 7,
row: 7
}
}
},
customStyleId: ‘custom-2’
}
] }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

API می تواند سبک های سفارشی را از طریق arrangeCustomCellStyleروش های ارائه شده توسط نمونه VTable:

instance.arrangeCustomCellStyle(cellPosition, customStyleId)

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به روز رسانی و حذف سبک ها

سبک سفارشی پس از ثبت نام، می توانید سبک سفارشی همان شناسه را از طریق به روز رسانی کنید registerCustomCellStyleروش. پس از به روز رسانی، سبک سلولی سبک سفارشی اختصاص داده شده به روز می شود. اگر newStyleاست undefined| null، به معنای حذف سبک سفارشی است. پس از حذف، سبک سلولی سبک سفارشی اختصاص داده شده، سبک پیش فرض را بازیابی می کند

instance.registerCustomCellStyle(id, newStyle)

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

منطقه سلول سبک سفارشی اختصاص داده شده را می توان توسط به روز رسانی کرد arrangeCustomCellStyleروش، و سبک منطقه سلول پس از به روز رسانی به روز می شود. اگر customStyleIdاست undefined| null، به این معنی است که سبک سلول بازیابی شده سبک پیش فرض است

نمونه کد

نسخه ی نمایشی：https://visactor.io/vtable/demo/custom-render/custom-style

مدارک مربوطه

Api مرتبط: https://visactor.io/vtable/option/ListTable-columns-text#style.fontSize

github：https://github.com/VisActor/VTable

// init option
const option = {
  // ......
  customCellStyle: [
    {
      id: 'custom-1',
      style: {
        bgColor: 'red'
      }
    }
  ]
}

instance.registerCustomCellStyle(id, style)

// init option
const option = {
  // ......
  customCellStyleArrangement: [
    {
      cellPosition: {
        col: 3,
        row: 4
      },
      customStyleId: 'custom-1'
    },
    {
      cellPosition: {
        range: {
          start: {
            col: 5,
            row: 5
          },
          end: {
            col: 7,
            row: 7
          }
        }
      },
      customStyleId: 'custom-2'
    }
  ]
}

instance.arrangeCustomCellStyle(cellPosition, customStyleId)

instance.registerCustomCellStyle(id, newStyle)