Ng-table: Bisakah saya mengganti hanya satu header tabel dan tidak semua?

Dibuat pada 3 Mar 2015 · 6Komentar · Sumber: esvit/ng-table

Hai,
Bisakah saya mengganti hanya satu header tabel dan tidak semua? Saya ingin tabel yang dapat diurutkan dengan kolom pertama khusus (kolom pertama kotak centang yang mewah). Saat ini semua logika dalam penyortiran ada di tbody > tr. Saya tidak memiliki thead > th dan beginilah tampilan kode saya:

<tbody>
  <tr ng-repeat="foo in fooList">
    <td data-title="'Name'" class="" data-sortable="'name'">

Dan sekarang kode saya terlihat seperti ini

<thead>
<!--custom first column header-->
<!--boilerplate header-->
  <th ng-class="{
    'sort-asc': tableParams.isSortBy('name', 'asc'),
    'sort-desc': tableParams.isSortBy('name', 'desc')
    }"
    ng-click="tableParams.sorting({'name' : tableParams.isSortBy('name', 'asc') ? 'desc' : 'asc'})">
    <div>Name</div>
  </th>
<!--the rest of the column definitions which are similar to the previous one-->
</thead>
<tbody>
  <!--custom first column data-->
  <tr ng-repeat="foo in fooList">
    <td data-title="'Name'" class="" data-sortable="'name'">

Saya melakukannya karena saya mengikuti contoh ini: http://bazalt-cms.com/ng-table/example/18
Apakah ada cara saya dapat memiliki kolom sortable default sederhana (seperti yang saya miliki dalam contoh pertama saya) dan hanya memiliki hal-hal khusus di yang pertama? Saya memiliki banyak kolom dan hal-hal yang dapat diurutkan boilerplate sangat memperumit kode saya dan itu tidak KERING.

Solusinya adalah membuat arahan khusus saya sendiri untuk tajuk, tetapi saya berharap ada solusi yang lebih sederhana.

Terima kasih!

Sumber

andreicristianpetcu

Komentar yang paling membantu

Ya kamu bisa.

Buat templat khusus sederhana seperti:

<script id="expandAllHeader" type="text/ng-template">
  <span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>

Kemudian tentukan kolom khusus Anda seperti ini:

<td header="'expandAllHeader'">...</td>

... alih-alih ini:

<td data-title="'whatever'">...</td>

Jeremy-Walton pada 3 Mar 2015

👍3

Semua 6 komentar

Ya kamu bisa.

Buat templat khusus sederhana seperti:

<script id="expandAllHeader" type="text/ng-template">
  <span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>

Kemudian tentukan kolom khusus Anda seperti ini:

<td header="'expandAllHeader'">...</td>

... alih-alih ini:

<td data-title="'whatever'">...</td>

Jeremy-Walton pada 3 Mar 2015

👍3

Terima kasih @Jeremy-Walton! Saya belum membuat implementasi penuh, hanya sebuah contoh kecil dan tampaknya berhasil :PI akan melihat lebih jauh bagaimana ng-table menggunakannya sehingga saya dapat membuat contoh saya sendiri untuk kasus khusus saya. https://github.com/esvit/ng-table/search?utf8=%E2%9C%93&q=type%3D%22text%2Fng-template%22

andreicristianpetcu pada 4 Mar 2015

Bagaimana saya bisa melewatkan variabel di dalam? Saya memiliki sesuatu seperti ini:

<script id="expandAllHeader" type="text/ng-template">
  <div>{{this.title}}</div>
  <div>{{this.sorting}}</div>
</script>

<td data-title="'Name'" data-sortable="'name'" header="'expandAllHeader'"></td>

andreicristianpetcu pada 4 Mar 2015

Apa pun yang Anda masukkan ke dalam header akan dieksekusi dalam lingkup yang sama dengan tabel Anda yang lain, di luar loop tubuh. Lihat https://github.com/esvit/ng-table/blob/master/src/ng-table/header.html#L16 dan https://docs.angularjs.org/api/ng/directive/ngInclude.

Alih-alih menggunakan this.whatever , Anda harus menggunakan whatever .

Jeremy-Walton pada 4 Mar 2015

Terima kasih!
Untuk anak cucu :P Ini berhasil untuk saya:

<script id="expandAllHeader" type="text/ng-template">
  <div>{{column.title()}}</div>
  <div>{{column.sortable()}}</div>
</script>
<table ng-table="tableParams">
  <tbody>
    <td data-title="'First Name'" data-sortable="'firstname'" header="'expandAllHeader'"></td>
    <td data-title="'Last Name'" data-sortable="'lastname'" header="'expandAllHeader'"></td>

andreicristianpetcu pada 4 Mar 2015

Ya kamu bisa.
Buat templat khusus sederhana seperti:
<script id="expandAllHeader" type="text/ng-template">
  <span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>
Kemudian tentukan kolom khusus Anda seperti ini:
<td header="'expandAllHeader'">...</td>
... alih-alih ini:
<td data-title="'whatever'">...</td>

Luar biasa. Masih berguna!!!