Выпадающий список с TH по нажатию кнопки TH, НЕ выпадающий - PullRequest
Новая
       18

Выпадающий список с TH по нажатию кнопки TH, НЕ выпадающий

0 голосов
/ 04 августа 2011

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

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

Я нашел это:

http://www.velocityreviews.com/forums/t367867-table-row-background-onclick.html

Но я подумал - должно быть более элегантное решение?

Кто-нибудь принимает?

Извините - я забыл примеры! 

    <th onclick="SortBy(event,'ctl00$mainContent$hiddenPBButton','descending','1')" class="tableDataHeader">
        <select id="groupby1"` onchange="performPostBackfromDrop(event,this,'ctl00$mainContent$hiddenPBButton');"><option value="Enquiry Type">Enquiry Type</option>
           <option value="Location">Location</option>
           <option value="Source">Source</option>
           <option selected="" value="User">User</option>
        </select>

    </th>

JS

Как видите, JS довольно универсален - но я включил его для ясности 

function SortBy(e, PBID,direction, field)
{
    performPostBackfromSort(PBID,direction,field);
}
function performPostBackfromSort(PBID, direction, field)
{
    __doPostBack(PBID, "sort"+"-"+direction+"-"+field);
} 

function performPostBackfromDrop(e,sender, PBID)
{
  var value = getDropDownSelectedValue(sender);
  __doPostBack(PBID, $j(sender).attr('id')+"-"+value);
}

1 Ответ

2 голосов
/ 07 августа 2011

Добавьте событие onclick к выбору и остановите распространение (FireFox) или остановите образование пузырьков (IE). Вот пример кода, который я использовал. 

<html>
<head>
<title>test</title>
<script>
function divOnclick(event)
{
    alert("Div onclick");
}
function selectOnclick(event)
{
    stopPropagation(event);
}
function selectOnchange(event)
{
    alert("Select onchange");
}
function stopPropagation(ev)
{
    ev = ev||event;
    ev.stopPropagation? ev.stopPropagation() : ev.cancelBubble = true;
}
</script>
</head>
<body>
    <div id="test" style="width:200px;height:200px;" onclick="divOnclick(event)">
        <select id="groupby1"` onclick="selectOnclick(event);" onchange="selectOnchange(event);">
           <option value="Enquiry Type">Enquiry Type</option>
           <option value="Location">Location</option>
           <option value="Source">Source</option>
           <option selected="" value="User">User</option>
        </select>
    </div>
    </body>
</html>
...