2012-04-02 3 views
0

Ive получил приложение jquery, в котором есть несколько сеток (jqgrid) на вкладках defferent. Ниже Чеха сетки У меня есть кнопка:Как я высушил эти функции jquery в одну общую функцию?

<div id="content1" class="content"> 
    <table id="grid1" class="myGridClass"></table> 
    <input id="ColChooser1"type = "button" value="Choose Columns" class="grid1"></input> 
</div> 

<div id="content2" class = "content">  
    <table id="grid2" class="myGridClass"></table> 
    <input id="ColChooser2"type = "button" value = "Choose Columns" class="grid2"></input> 
</div> 

Ive получил различные функции для каждой из кнопок выбора столбцов: пример

$('#ColChooser1').click(function(){ 
    $('grid1').jqGrid('columnChooser'); 
}; 

Что лучший способ, чтобы написать одну функцию для всех кнопок?

до сих пор это то, что Ive получил

$('div.content :input[value="Choose Columns"]').click(function{ 
    $('div.content table.'+this.attr('class')).jqGrid('columnChooser'); 
}); 

не уверен, что если this.attr('class') всегда будет то же самое, несмотря на каждой кнопке, имеющей тот же класс, как его элемент таблицы, поскольку Jquery UI может добавить дополнительные классы -

Edited ниже то, что работает - близко к 1-й ответ ниже, но подправили немного -

  $('div.DataContent :input[value="Choose Columns"]').click(function() { 
       $(this).parent().find('.myGridClass').jqGrid('columnChooser'); 
      }); 

используется .find вместо .children, чтобы пересечь глубже 1-го уровня (jqgrid гнездяет исходный элемент таблицы глубже). также использовал более конкретный селектор '.myGridClass', а не 'table', потому что jqGrid добавляет несколько других элементов таблицы, используя «таблицы» не возвращают оригинал, предназначенный

ответ

1

Взгляните на страницу traversing в документах jQuery. Вы должны иметь возможность использовать комбинацию этих функций (например, parent, parentsUntil, children), чтобы выбрать нужные элементы.

например:

$('div.content :input[value="Choose Columns"]').click(function{ 
    $(this).parent().children('table').jqGrid('columnChooser'); 
}); 
1

вы можете начать с кнопкой мыши событие

+0

выглядит как эта работа shd, но плагин jgGrid добавляет кучу новых элементов, вложенных в исходный элемент таблицы. prev только возвращает сразу же предшествующих братьев и сестер –

+0

Вставляет ли он

между исходным столом и кнопкой? в противном случае следует использовать $ (this) .prev ('table.myGridClass'). –

0

присоединить обработчик щелчка к родителю, для входов, а затем найти таблицу родственный.

$(parent_container_of_divs).on('click', '.content > input',function(){ 
    $(this).sibling('table').jqGrid('columnChooser'); 
}); 

Если эти элементы имеют больше тех элементов, которые вы предоставили, давайте будем более конкретными. добавьте обработчик клика к родительскому элементу для входов ColChooser и найдите его родственный номер grid.

$(parent_container_of_divs).on('click', 'input[id^="ColChooser"]',function(){ 
    $(this).sibling('table[id^="grid"]').jqGrid('columnChooser'); 
}); 
0
 $('div.DataContent :input[value="Choose Columns"]').click(function() { 
      $(this).parent().find('.myGridClass').jqGrid('columnChooser'); 
     }); 

использовали .find вместо .children в одном из ответов, представленных пройти глубже, чем 1-го уровня (jqgrid гнезда исходной таблицы элемент глубже) также используется более конкретный селектор».myGridClass', а не «table», потому что jqGrid добавляет несколько других элементов таблицы, используя «таблицу», не возвращает исходный файл, предназначенный

Смежные вопросы