GridServerSide Vue.js Bileşeni

GridServerSide bileşeni, sunucu tarafında veri işleme yetenekleri olan bir tablo oluşturur.

Özellikler

• data-Source: Tablonun veri kaynağı.

data-Source: [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Jane', age: 25 },
  { id: 3, name: 'Doe', age: 35 }
]

• columns: Tablonun sütunları.

columns: [
    {  dataField: "id", caption: "Id", allowSorting: true, maxWidth: "50px" ,cellTemplate:"idTemplate"}
]

• cell-click: Bir hücreye tıklanıldığında çağrılacak işlev.

cell-click: function(row, column, cell, event) {
  console.log('Cell clicked:', row, column, cell, event);
}

• is-load: Verinin yüklenip yüklenmediğini kontrol eder.
• store-sorts: Sıralama durumunu saklar.

store-sorts: [
  { column: 'name', order: 'asc' },
  { column: 'age', order: 'desc' }
]

• sort-change: Sıralama değiştiğinde çağrılacak işlev.

sort-change: function(column, order) {
  console.log('Sort changed:', column, order);
}

• master-enabled: Ana hücrelerin etkin olup olmadığını belirler.
• multi-selection: Çoklu seçimin etkin olup olmadığını belirler.

Slotlar

• masterTemplate: Ana hücrelerin içeriğini özelleştirmek için kullanılır.

Kullanım

<GridServerSide
    :data-Source="dataSource"
    :columns="columns"
    :cell-click="cellClicl"
    class="mt-3"
    :store-sorts="dataSort"
    :sort-change="sortChange"
    :master-enabled="true"
    :multi-selection="true"
    @selected-item="selectedItem"
>
    <template #idTemplate="data">
        <h1 style="margin: 0px">
            {{ data.value }}
        </h1>
    </template>

    <template #masterTemplate="data">
        {{ data.data }}
    </template>
</GridServerSide>
import 'qsoft-vue3-vite-template/dist/style.css';
import { GridServerSide } from "qsoft-vue3-vite-template";
export default {
  components: {
    GridServerSide
 }