البرنامج المساعد jquery tablesorter - يحتفظ بألوان الصف البديلة

Question

لقد أخذت جدول HTML الذي أقوم بتطبيق ألوان صف بديلة عليه، وأضفت فارز جدول jquery عليه حتى يتمكن المستخدمون من فرز الجدول.

تكمن المشكلة في أن ألوان الصف البديلة كلها معطلة الآن (بناءً على الفرز) حيث توجد صفوف متعددة بنفس لون الخلفية.

هل هناك أي طريقة لإعادة تعيين لون الصف البديل باستخدام فارز جدول jquery؟

Answer 1

وهناك بالفعل zebra القطعة الافتراضية، التي بنيت في صلب، وهو ما ينطبق على odd الطبقات وeven إلى صفوف بديلة. كان يعمل أم لا قمت بإضافة class=even/odd إلى ملف HTML.

وانها حقا من السهل اقامة. أنا ببساطة اتباع الإرشادات على موقع الجدول فارز ، ومن ثم تعديل وظيفة وثيقة جاهزة لما يلي:

<script type="text/javascript">
$(document).ready(function() 
    { 
        $("#myTable").tablesorter({ 
    widgets: ['zebra'] 
    }); 
    } 
); 
</script>

وأنا قدمت مثالا بينما كان يجيب على هذا السؤال. يمكنك عرض النتيجة في العمل أو <وأ href = "الشبكي: / /github.com/alasdairnicol/tablesorter-zebra-example "يختلط =" نوفولو noreferrer "> انظر المثال رمز .

Answer 2

وبناء على الجواب أنتوني، ولكن إعادة صياغة بمثابة بطانة واحدة (في الغالب):

function fixStripes() {
    $('table tr').removeClass('odd even')
        .filter(':even').addClass('even').end()
        .filter(':odd').addClass('odd');
}

$("table").bind("sort", fixStripes);

والمكالمات مسج يمكن "بالسلاسل" على النحو الوارد أعلاه، وذلك باستخدام عمليات مثل filter() للحد من عناصر مختارة، و.end() إلى "إعادة تعيين" لاختيار الماضية. وبعبارة أخرى، كل .end() "يبطل" في .filter() السابق. يتم ترك .end() نهائي حالا، لأن هناك القيام به بعد ذلك لا شيء.

Answer 3

من أجل الحفاظ على خطوط الحمار الوحشي بعد حدوث عملية الفرز، يتعين عليك تشغيل عنصر واجهة المستخدم الحمار الوحشي مرة أخرى.

$('#myTable')
.tablesorter({ widgets: ['zebra'] })
.bind('sortEnd', function(){
    $("#myTable").trigger("applyWidgets"); 
});

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

ملحوظة: هذا النوع من الحلول البديلة مطلوب فقط في الحالات التي تفشل فيها أداة zebra الافتراضية.لقد وجدت في معظم الظروف أن هذا الاختراق غير مطلوب لأن الأداة تعمل بشكل صحيح بعد الفرز.

Answer 4

وماذا عن:

function fixStripes() {
     var i = 0;
     var rowclass;
     $("table tr").each(function() {
          $(this).removeClass("odd even");
          rowclass = (i%2 == 1) ? "odd" : "even";
          $(this).addClass(rowClass);
      });
}

$("table").bind("sort", fixStripes);

وأوه، وإذا كنت ترغب في تحديد بسيط حقا، هل يمكن أن تحبس أنفاسك لهذا CSS فئة مزيفة للحصول على انتقاؤها من قبل جميع المتصفحات الرئيسية:

table tr:nth-child(n+1) {
    color: #ccc;
}

ولكن يستند تخميني حول كيفية FF وشركة مقبض CSS لHTML الديناميكية، من شأنه أن يضبط المشارب بك ONLOAD، ولكن لا تنطبق على CSS بعد الفرز. ولكن أود أن نعرف على وجه اليقين.

Answer 5

حل العمل المنقح والأحدث - يحمل في ثناياه عوامل *سيؤدي هذا أيضًا إلى تمكين تغيير اللون عند النقر.*

 <script type="text/javascript">
   $(document).ready(function () {

    $('#tblLookupResult').tablesorter({ widthFixed: true, sortList: [[0, 0], [0, 1], [0, 2]], theme: 'blue', widgets: ['zebra'] })
                          .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });

    $('#tbltable1 tbody tr').live('click', function () {               
                    if ($(this).hasClass('even')) {
                        $(this).removeClass('even');
                        $(this).addClass('ui-selected');
                    }

                    else if ($(this).hasClass('odd')) {
                        $(this).removeClass('odd');
                        $(this).addClass('ui-selected');
                    }
                    else {
                        $(this).removeClass('ui-selected');
                        $(".tablesorter").trigger("update");
                        $(".tablesorter").trigger("applyWidgets");                         
                    }

        });

    });
</script>

الآن يجب أن يخرج كل شيء من تلقاء نفسه!

Answer 6

وعن طريق المغلق الخاص بك:

  table.tablesorter tr:nth-child(even) {
        background-color: #ECFAFF;
    }