Ng-table: क्या मैं सिर्फ एक टेबल हेडर को ओवरराइड कर सकता हूं और सभी को नहीं?

को निर्मित 3 मार्च 2015 · 6टिप्पणियाँ · स्रोत: esvit/ng-table

नमस्ते,
क्या मैं सिर्फ एक टेबल हेडर को ओवरराइड कर सकता हूं और सभी को नहीं? मैं एक कस्टम पहले कॉलम (एक फैंसी चेकबॉक्स पहला कॉलम) के साथ एक क्रमबद्ध तालिका चाहता हूं। अभी छँटाई में सभी तर्क tbody> tr में हैं। मेरे पास thead > th नहीं है और मेरा कोड इस तरह दिखता है:

<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
क्या कोई तरीका है कि मेरे पास एक साधारण डिफ़ॉल्ट सॉर्ट करने योग्य कॉलम हो सकता है (जैसे कि मेरे पहले उदाहरण में होता था) और केवल पहले वाले में कस्टम सामान होता है? मेरे पास बहुत सारे कॉलम हैं और बॉयलरप्लेट सॉर्ट करने योग्य सामान मेरे कोड को बहुत जटिल करता है और यह DRY नहीं है।

हेडर के लिए अपना खुद का कस्टम निर्देश बनाना एक कामकाज है, लेकिन मैं उम्मीद कर रहा था कि एक आसान समाधान है।

आपको धन्यवाद!

स्रोत

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 मार्च 2015

👍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 मार्च 2015

👍3

धन्यवाद @ जेरेमी-वाल्टन! मैंने अभी तक एक पूर्ण कार्यान्वयन नहीं किया है, बस एक छोटा सा उदाहरण है और यह काम करता प्रतीत होता है: पीआई इस बात पर अधिक ध्यान देगा कि एनजी-टेबल इसका उपयोग कैसे कर रहा है ताकि मैं अपने विशिष्ट मामले के लिए अपना उदाहरण बना सकूं। https://github.com/esvit/ng-table/search?utf8=%E2%9C%93&q=type%3D%22text%2Fng-template%22

andreicristianpetcu 4 मार्च 2015

मैं एक चर को अंदर कैसे पास कर सकता हूं? मेरे पास ऐसा कुछ है:

<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 4 मार्च 2015

आप जो कुछ भी हेडर में डालते हैं, उसे उसी दायरे में निष्पादित किया जाएगा जैसे आपकी बाकी टेबल, बॉडी लूप के बाहर। 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 4 मार्च 2015

आपको धन्यवाद!
भावी पीढ़ी के लिए :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 4 मार्च 2015

हाँ तुम कर सकते हो।
इस तरह एक साधारण कस्टम टेम्पलेट बनाएं:
<script id="expandAllHeader" type="text/ng-template">
  <span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>
फिर अपने विशेष कॉलम को इस तरह परिभाषित करें:
<td header="'expandAllHeader'">...</td>
... इसके अलावा:
<td data-title="'whatever'">...</td>

आश्चर्यजनक। अभी भी उपयोगी !!!

vcmiranda 27 फ़र॰ 2019

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Ng-table: क्या मैं सिर्फ एक टेबल हेडर को ओवरराइड कर सकता हूं और सभी को नहीं?

सबसे उपयोगी टिप्पणी

सभी 6 टिप्पणियाँ

संबंधित मुद्दों