Как выделить строки таблицы с помощью флажков в Jquery Mobile? - PullRequest
Новая
       18

Как выделить строки таблицы с помощью флажков в Jquery Mobile?

0 голосов
/ 24 февраля 2012

У меня есть сайт Jquery Mobile со столом.Строки таблицы содержат флажки в первой ячейке.

Я хочу выделить строки, когда
a) пользователь нажимает на строку
b) пользователь проверяет флажок

Мне удалось выполнить это большую часть пути ( кредиты ) и у меня осталась одна проблема.

Проблема:
, если яустановите флажок, только строка будет выделена, и я не могу установить флажок.Я думаю, это потому, что event.target.type! == 'checkbox' не работает с Jquery Mobile, потому что, если я нажимаю флажок, я нажимаю на span.ui-icon а не фактический ввод: флажок.

Так что я ищу какой-то способ определить, нажал ли пользователь на значок span.ui против флажка.

Вот Jfiddle, показывающийпроблема - http://jsfiddle.net/qQQ2X/

и код jquery: 

var initRow = initRow = $('.tbl_orders tbody tr');

initRow.has('th input:checkbox:checked').addClass('row_selected ui-btn-hover-e').removeClass("ui-btn-up-b").end().bind('click', function(event) {
    $(this).hasClass('row_selected') ? $(this).addClass("ui-btn-up-b").removeClass('row_selected ui-btn-hover-e') : $(this).addClass('row_selected ui-btn-hover-e').removeClass("ui-btn-up-b");

    if (event.target.type !== 'checkbox') {
        $(this).find('th input:checkbox', this).attr('checked', function() {
            return !this.checked;
        }).checkboxradio("refresh");
    }

});

Спасибо за помощь!

1 Ответ

0 голосов
/ 24 февраля 2012

После долгих поворотов я нашел решение.Следующее работает, если у вас есть:

a) флажок для выбора всех строк таблицы , называемый $ ('# selectAll')
b) флажками в каждой строке для выбора одиночная строка , называемая $ ('. Selector') = они находятся в ячейках TH, тогда как все остальные ячейки - TD
c) щелкаемые строки , которые также должны выбирать строку

Поэтому записи могут быть выбраны с помощью трех «событий»
a) выбора всех записей
b) выбора одной записи
c) щелчка строки для выбора отдельной записи

Вам нужно установить три привязки событий, все из которых запускают функцию выбора и выделения.Это код: 

// all rows
$('#selectAll').live( "change", function( event ) {                 
   rowHighlight(event, "all");
   });

// single row
$('.your_table tbody tr').bind('click', function( event ) {
   if ( $( event.target ).is('td') ) {
       rowHighlight(event, "row");
       }
   });

// click row checkbox - careful not to fire #selectAll a 2nd time
$('input.selector:not(#selectAll)').live( "change", function( event ){
   rowHighlight(event, "checkbox");
   });

 // global handler
 function rowHighlight(event, origin) {
var selectTheme = your-JQM-select-theme,
    // this determines which inputs to check and which rows to highlight
    checkWhat = origin == "all" ? $("tbody th input.selector" ) : origin == "row" ? $( event.target ).closest('tr').find('th input[type="checkbox"].selector') : $( event.target ), 
    // this determines whether to clear/clean or check/highlight
    action = origin == "all" ?  ( $('#selectAll').attr('checked') == "checked" ? "check" : "clear" ) : origin == "row" ? ( checkWhat.attr('checked') == "checked" ? "clear" : "check" ) : ( checkWhat.attr('checked') == "checked" ? "check" : "clear" ),
    parentTheme = checkWhat.closest('tr').hasClass('odd') ? your_odd_JQM-theme : your_event_JQM_theme;

    // let's go
    if (action == "check") {
        // select/highlight
        checkWhat.attr('checked','checked')
           .closest('th').find("label").addClass("ui-checkbox-on").removeClass("ui-checkbox-off").end()
           .closest('th').find(".ui-icon").addClass('ui-icon-checkbox-on').removeClass('ui-icon-checkbox-off').end()
           .closest('tr').addClass('row_selected ui-btn-hover-'+selectTheme).removeClass("ui-btn-up-"+parentTheme);
            //no need .checkboxradio("refresh")
            } else {
               // clear/clean
               checkWhat.removeAttr('checked')
                  .closest('th').find("label").addClass("ui-checkbox-off").removeClass("ui-checkbox-on").end()
                  .closest('th').find(".ui-icon").addClass('ui-icon-checkbox-off').removeClass('ui-icon-checkbox-on').end()
                  .closest('tr').addClass('ui-btn-up-'+parentTheme).removeClass("row_selected ui-btn-hover-"+selectTheme);
                  // no need .checkboxradio("refresh")
                  }
            }
      }

Работает как шарм.Может быть, кто-то может использовать это тоже.Рано или поздно должны быть JQM-таблицы.

...