نطاقات صف النمط والاختيار في TR: الجدول باستخدام CSS

Question

لقد حصلت على TR: جدول أحتاج إلى الأسلوب باستخدام CSS. تعمل جميع وظائف النمط العادي للجدول ، ولكن لا يتم اختيار النطاقات واختيار الصفوف. عندما أشاهد المصدر المقدم ، لا أرى فرقًا في الصفوف لمعرف أو فئة للاستيلاء عليها ، ولا تحتوي الوثائق الرسمية على أي سمات لإعلان فئة نمط لأي منهما. هل هذا ممكن ، وإذا كان الأمر كذلك ، فما الذي يجب أن أفعله للحصول على CSS الخاص بي للاستيلاء عليه؟

<tr:table id="myTable" value="#{tableValues}" rowBandingInterval="1">
    <tr:column>
        ##Stuff##
    </tr:column>
    <tr:column>
        ##Stuff##
    </tr:column>
    <tr:column>
        ##Stuff##
    </tr:column>
</tr:table>

تعديل

اسمحوا لي أن أحاول أن نستكمل ما يحدث.

أولاً ، يخبر الإعلان أعلاه JSF إنشاء جدول ، ويخبرها السمات BandbandingInterval بإعطاء كل صف ألوان متناوبة (إذا تم تعيينه على 2 ، فسيقوم بذلك صفين واحد ، و 2 صفوف أخرى ، و 2 صفين الأصل ، إلخ.)

بمجرد أن يتم تقديم الصفحة في HTML قياسية ، قم بتطبيق Trinidad (و JSF) فئاتها ومعرفاتها على HTML. الإجراء العادي هو أن ننظر إلى HTML المقدم ، والعثور على الفصل الذي هو Appling وإضافة قواعد CSS لذلك. ومع ذلك ، في هذه الحالة ، لا تتم إضافة أنماط إضافية (لا شيء في HTML المقدم يدل على أن صفًا مختلفًا عن الآخر).

لذا فإن السؤال هو ، كيف يمكنني أن أخبر ترينيداد إما أن تقدم صفوفًا بالتناوب والصف المختار من الصفوف/المعرفات المختلفة لي أن أحصل عليها مع CSS؟

تحرير 2

فقط للحفاظ على أي شخص ينظر إليه ، لا توجد تغييرات على الفعلي td العناصر سواء

تحرير 3

بعد أن قمت بتبديل جميع السمات حولها ثم تجريد جميع الكود لأسفل إلى عظامها العارية ، وجدت سمة عرض الصف. فصول ترينيداد محنطة إلى حد ما ، وما لم تقم بإعادة تهيئة الكود وسحب كل الضوضاء التي لن تراها. يضيف ترينيداد الفصل .af_column_cell-text-band إلى الصفوف المقطوعة ، حيث كانت الصفوف العادية فقط .af_column_cell-text. هذا هو نصف المشكلة حل. ما زلت بحاجة إلى معرفة محدد صف محدد للمستخدم ، والذي سأعطيه بسعادة جميع الرخام لأي شخص يمكن أن يعطيني إجابة على ذلك.

Answer 1

ضع هؤلاء المختارين في trinidadskin.css-file (smskin.css في حالتي): .AftableCellDatabackgroundColor: الاسم المستعار {background-color: #f5f5dc ؛ }

.AftableCellDatabandedBackgroundColor: الاسم المستعار {background-color: #ffffff ؛ }

تكوين trinidad-skins.xml

<skin>
    <id>
        sm.desktop
    </id>
    <family>
        sm
    </family>
    <render-kit-id>
        org.apache.myfaces.trinidad.desktop
    </render-kit-id>
    <style-sheet-name>
        skins/sm/smSkin.css
    </style-sheet-name>
</skin>

Answer 2

يوجد رمز jQuery جميل وبسيط للقيام بتوضيح الصف هنا.

jQuery كما يلي

<script type="text/javascript">
  $(document).ready(function(){
    $(".stripeMe tr")
      .mouseover(function() { $(this).addClass("over");})
      .mouseout(function() { $(this).removeClass("over");
      });
    $(".stripeMe tr:even").addClass("alt");
  });
</script>

ثم قليلا من CSS

tr.alt td { background: #ecf6fc; }
tr.over td { background: #bcd4ec; }

راجع للشغل ، أخذت كل هذا الرمز من الموقع التالي حيث يمكنك أيضًا عرض العرض التوضيحي.

Answer 3

هذا لا يجيب بشكل مباشر على سؤالك ، ولكن لماذا لا تستخدم CSS3 من الفئة Nth-Child لتحقيق هذا التأثير؟ على سبيل المثال :

tr:nth-child(2n)
{
background-color:red;
}

Answer 4

لقد ارتكبت شيئًا خاطئًا أثناء عملية التسجيل ، لذلك هذه إجابة جديدة بدلاً من التعليق.

للتعامل مع موضوع Trinidad-skinning ، تحتاج إلى القيام بما يلي:

في web.xml الخاص بك ، تحتاج إلى تعيين هذه المعلمة على صواب أثناء التطوير:

<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value></context-param>

احصل على Firebug لـ Firefox. مع هذه الوظيفة الإضافية ، يمكنك تحديد أي ترينيداد-المنتخب المستخدم على مكون.

لا يوجد محدد للصف المحدد للمستخدم. لقد فعلت ذلك بهذه الطريقة: امنح كائنك شيئًا مثل "خاصية تسليط الضوء" ، وهو ما تغيره إذا كان هذا هو الشخص المحدد.

<tr:column sortProperty="nr" sortable="true" defaultSortOrder="ascending" headerText="Nr" inlineStyle="#{object.tablerowhighlight}text-align:right;"><tr:outputText value="#{object.nr}"/></tr:column>

افعل ذلك لجميع أعمدة الجدول الخاص بك وأنت تنتهي.

Answer 5

سأحيلك إلى وثائق ترينيداد.http://myfaces.apache.org/trinidad/trinidad-api/tagdoc/tr_table.htmlفي مثالهم يعلنون أن النطاق banding="row" أود أن أفترض أن السبب في عدم حصولك على أي شيء هو أنك لم تعلن إذا كان صفًا أو أعمدة.