JQUERY TILLILLARDER - فرز حسب العمود وجود عناصر <الإدخال>

Question

لدي طاولة مثل هذا:

|   Update   |   Name  |  Code      | modification date |
|            |   name1 | code1      | 2009-12-09        |
|            |   name2 | otehercode | 2007-09-30        | 

حيث يحتوي عمود التحديث على مربعات الاختيار <input type='checkbox' />.

يتم تحديد الحالة الأولية للخانة قبل تقديم الجدول، ولكن بعد جلب الصفوف من قاعدة البيانات (تعتمد على مجموعة الشروط، على جانب الخادم).

يمكن التحقق من مربع الاختيار افتراضيا، دون تحديد افتراضيا أو معطل (disabled='disabled' مثل input ينسب).

أنا استخدم jQuery's tolltarter. لفرز جداولي. وأود أن أكون قادرا على الترتيب حسب العمود الذي يحتوي على خانات الاختيار. كيف يتم ذلك (يمكنني اجتياز بعض السمات الإضافية الخاصة بي input عنصر ربما، إذا كان سيساعد ...)؟
يجب أن أكتب محللي الخاص للتعامل مع ذلك؟

Answer 1

إضافة فترة مخفية قبل الإدخال مباشرة، وتشمل في ذلك بعض النص (سيتم استخدامها لفرز العمود). شيء مثل:

<td>
    <span class="hidden">1</span>
    <input type="checkbox" name="x" value="y">
</td>

إذا لزم الأمر، يمكنك إرفاق حدث إلى مربع الاختيار بحيث يقوم بتعديل محتوى الأخوة السابقة (تمتد) عند فحصه / غير محدد:

$(document).ready(function() {

    $('#tableid input').click(function() {
         var order = this.checked ? '1' : '0';
         $(this).prev().html(order);
    })

})

ملاحظة: لم أتحقق من التعليمات البرمجية، لذلك قد يكون لها أخطاء.

Answer 2

هذا هو الإصدار الأكثر اكتمالا / الصحيح من إجابة Haart.

$(document).ready(function() {
    $.tablesorter.addParser({ 
        id: "input", 
        is: function(s) { 
            return false; 
        }, 
        format: function(s, t, node) {
            return $(node).children("input[type=checkbox]").is(':checked') ? 1 : 0;
        }, 
        type: "numeric" 
    });

    sorter = $("#table").tablesorter({"headers":{"0":{"sorter":"input"}}});
// The next makes it respond to changes in checkbox values 
    sorter.bind("sortStart", function(sorter){$("#table").trigger("update");});

}); 

Answer 3

أضيف هذا الاستجابة لأنني أستخدم مكتبة jQuery المدعومة / متشعبة مع ميزات جديدة. يتم تضمين مكتبة محلل اختيارية لحقول الإدخال / تحديد الحقول.

http://mottie.github.io/tablester/docs/

إليك مثال:http://mottie.github.io/tablesorter/docs/example-widget-grouping.html.ويتم ذلك من خلال إدراج مكتبة Parser-Select.js "Parser-Input.js" وإضافة كائن رؤوس وإعلان عن الأعمدة ونوع التحليل.

headers: {
  0: { sorter: 'checkbox' },
  3: { sorter: 'select' },
  6: { sorter: 'inputs' }
}

يتضمن المحللين الإضافيون: تحليل التاريخ (W / DACE & DATJS)، تواريخ ISO8601، أشهر، سنوات 2 أرقام، أيام الأسبوع، المسافة (قدم / بوصة ومقدية) تنسيق العنوان (يزيل "A" & ").

Answer 4

يمكنك استخدام البرنامج المساعد JQuery Tableswer المرتري وإضافة محلل مخصص قادر على فرز جميع أعمدة مربع الاختيار:

$.tablesorter.addParser({
        id: 'checkbox',
        is: function (s, table, cell) {
            return $(cell).find('input[type=checkbox]').length > 0;
        },
        format: function (s, table, cell) {
            return $(cell).find('input:checked').length > 0 ? 0 : 1;
        },
        type: "numeric"
    });

Answer 5

يمكنك إضافة محلل مخصص إلى TILLILTARDER، SMTH مثل هذا:

 $.tablesorter.addParser({ 
    // set a unique id 
    id: 'input', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // Here we write custom function for processing our custum column type 
        return $("input",$(s)).val() ? 1 : 0; 
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
}); 

ثم استخدمه في طاولتك

$("table").tablesorter(headers:{0:{sorter:input}});

Answer 6

لمسة واحدة فقط لجذب إجابة هارون كاملة وتجنب أخطاء تجاوز المكدس. لذلك، بالإضافة إلى استخدام $.tablesorter.parser() الوظيفة كما هو موضح أعلاه، اضطررت إلى إضافة ما يلي في صفحتي لجعلها تعمل مع قيم مربع الاختيار المحدثة في وقت التشغيل.

    var checkboxCahnged = false;

    $('input[type="checkbox"]').change(function(){
        checkboxChanged = true;
    });

    // sorterOptions is a variables that uses the parser and disables
    // sorting when needed
    $('#myTable').tablesorter(sorterOptions);
    // assign the sortStart event
    $('#myTable')..bind("sortStart",function() {
        if (checkboxChanged) {
            checkboxChanged = false;
            // force an update event for the table
            // so the sorter works with the updated check box values
            $('#myTable')..trigger('update');
        }
    });

Answer 7

    <td align="center">
    <p class="checkBoxSorting">YOUR DATA BASE VALUE</p>
    <input type="checkbox" value="YOUR DATA BASE VALUE"/>
    </td>

//javascript
$(document).ready(function() {
$(".checkBoxSorting").hide();
});

Answer 8

حاولت مضاعفات النهج في الإجابات الأخرى، ولكنها انتهت باستخدام الإجابة المقبولة من Salgiza، مع التعليق من Martin حول تحديث نموذج الطاولة. ومع ذلك، عندما قمت أولا بتنفيذها، قمت بتعيين خط التحديث داخل خانة الاختيار الزناد onchange، مثل الصياغة المقترحة. أعاد هذا إعادة ترتيب صفوفي على فحص / إلغاء تحديد مربع الاختيار، الذي وجدت مربكا للغاية. الخطوط قفزت فقط على النقر. لذلك بدلا من ذلك، ألزمت وظيفة التحديث إلى رأس عمود خانة الاختيار الفعلية، بحيث يتم إعادة ترتجيب الخطوط إلا عند النقر لتحديث الفرز. يعمل تماما كما أريد:

// checkbox-sorter is the assigned id of the th element of the checbox column
$("#checkbox-sorter").click(function(){ 
    $(this).parents("table").trigger("update");
});