Ng-table: هل يمكنني تجاوز رأس جدول واحد فقط وليس كل شيء؟

تم إنشاؤها على ٣ مارس ٢٠١٥ · 6تعليقات · مصدر: esvit/ng-table

مرحبا،
هل يمكنني تجاوز رأس جدول واحد فقط وليس كل شيء؟ أريد جدولًا قابلًا للفرز مع عمود أول مخصص (عمود أول مربع اختيار رائع). الآن كل المنطق في الفرز موجود في tbody> tr. ليس لدي thead> وهذا هو شكل الكود الخاص بي:

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

والآن يبدو الرمز الخاص بي هكذا

<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'">

لقد فعلت ذلك لأنني اتبعت هذا المثال: http://bazalt-cms.com/ng-table/example/18
هل هناك أي طريقة يمكنني من خلالها الحصول على عمود افتراضي بسيط قابل للفرز (مثلما اعتدت أن أستخدمه في المثال الأول) ولدي عناصر مخصصة فقط في المثال الأول؟ لدي الكثير من الأعمدة والأشياء القابلة للفرز المعيارية تعقد الكود الخاص بي كثيرًا وهي ليست جافة.

الحل البديل هو إنشاء توجيهي المخصص للرأس ولكني كنت آمل أن يكون هناك حل أبسط.

شكرا لك!

مصدر

andreicristianpetcu

التعليق الأكثر فائدة

نعم يمكنك ذلك.

قم بإنشاء قالب مخصص بسيط مثل:

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

ثم حدد العمود الخاص بك مثل هذا:

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

... بدلا من هذا:

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

Jeremy-Walton في ٣ مارس ٢٠١٥

👍3

ال 6 كومينتر

نعم يمكنك ذلك.

قم بإنشاء قالب مخصص بسيط مثل:

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

ثم حدد العمود الخاص بك مثل هذا:

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

... بدلا من هذا:

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

Jeremy-Walton في ٣ مارس ٢٠١٥

👍3

شكرا لك @ جيريمي والتون! لم أقم بتطبيق كامل بعد ، مجرد مثال صغير ويبدو أنه يعمل: سوف يلقي PI نظرة أكثر على كيفية استخدام ng-table حتى أتمكن من تقديم مثال خاص بي لحالتي الخاصة. https://github.com/esvit/ng-table/search؟utf8=٪E2٪9C٪93&q=type٪3D٪22text٪2Fng-template٪22

andreicristianpetcu في ٤ مارس ٢٠١٥

كيف يمكنني تمرير متغير بالداخل؟ لدي شيء مثل هذا:

<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 في ٤ مارس ٢٠١٥

سيتم تنفيذ أي شيء تضعه في الرأس في نفس النطاق مثل باقي الجدول ، خارج حلقة الجسم. راجع https://github.com/esvit/ng-table/blob/master/src/ng-table/header.html#L16 و https://docs.angularjs.org/api/ng/directive/ngInclude.

بدلاً من استخدام this.whatever ، يجب عليك استخدام whatever .

Jeremy-Walton في ٤ مارس ٢٠١٥

شكرا لك!
للأجيال القادمة: P هذا عمل لي:

<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 في ٤ مارس ٢٠١٥

نعم يمكنك ذلك.
قم بإنشاء قالب مخصص بسيط مثل:
<script id="expandAllHeader" type="text/ng-template">
  <span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>
ثم حدد العمود الخاص بك مثل هذا:
<td header="'expandAllHeader'">...</td>
... بدلا من هذا:
<td data-title="'whatever'">...</td>

رائع. لا تزال مفيدة !!!