2011-01-06 2 views
1

Я пытаюсь настроить столбец в jqGrid, в котором есть одна радиокнопка для каждой строки, чтобы позволить пользователю задавать одну строку как «первичный» дочерний элемент родителя. Следующий код, однако, просто отображает пустые ячейки.jqGrid: одна радиокнопка в строке

Я полагаю, что ячейки не помещаются в «режим редактирования» или что-то еще, что меня сбивает с толку, потому что есть редактируемый столбец столбца в той же сетке, который работает только по желанию.

(Там в navButton в нижней части сетки, что позволяет экономить состояние сети, если это уместно.);

var createRadioButton = function(value) { 
    return $("<input type='radio' />", { 
     name: mySubGridID, 
     checked: value 
    }).get(); 
} 

var extractFromRadioButton = function(elem) { 
    return $(elem).val(); 
} 

$("#grid").jqGrid({ 
    url: '/GetData', 
    datatype: 'json', 
    colModel: [ 
    ... 
    { label: 'Selected', name: 'selected', index: 'selected', editable: true, edittype: 'custom', editoptions: 
     { 
      custom_element: createRadioButton, 
      custom_value: extractFromRadioButton 
     } 
    }, 
    ... 
    ], 
    ... 
}); 

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

ответ

2

Вы пытаетесь использовать edittype: 'custom'. Это работает только в режиме редактирования (встроенное редактирование или редактирование формы). Если я правильно понимаю ваш вопрос, вы пытаетесь добавить переключатель, который отображается в всех строк в соответствующем столбце. Поэтому вы должны использовать лучше custom formatter (см. Пример here). Вы можете связать событие click в loadComplete (см. Пример here).

Я не уверен, что понимаю, почему вам нужно использовать радиокнопку. Если вы хотите использовать радиокнопки только для выбора строки, вероятно, вам стоит использовать вместо этого multiselect:true. Некоторое небольшое поведение выбора, которое вы можете изменить внутри onSelectRow или beforeSelectRow обработчик события, если необходимо.

+0

Похоже обычай форматировщик это путь. Я сделаю это. Невозможно использовать мультиселекцию, поскольку наличие нескольких выбранных строк неверно. Выбор - это не та часть метафоры пользовательского интерфейса, которую я хочу использовать для этого, так как она действительно не выбирает строку, как таковой, но пользователь устанавливает одну из строк (что является большой частью отношения «один ко многим») как «первичный» дочерний элемент родителя, поэтому я хочу сделать это более явным с помощью переключателя. – adamjford

+1

@adamjford: В другом вопросе http://stackoverflow.com/questions/4625152/possible-jquery-jqgrid-problem-in-ie8 используется также пользовательский форматтер. Если я понимаю, что ты прав, он очень близок к тому, что ты хочешь. См. Демо: http://www.ok-soft-gmbh.com/jqGrid/AtticusRel.htm. – Oleg

+0

О, сладкий, это будет полезно. Благодаря! – adamjford

0

У меня была такая же проблема с форматированием, и мне пришлось установить ширину на переключателе, поскольку по какой-то причине она становилась шире, чем ячейка.

function radioButtonFormatter(cellValue, options, rowObject) { 
    var radioHtml = '<input style="width:25px" type="radio" value=' + cellValue + ' name="radioid"></input>'; 
    return radioHtml; 
} 
0

мне нужно более простое решение, поэтому я придумал этот метод, который использует встроенный MultiSelect вместо добавления седловины к сетке.

...

var gridSelector = $("#myGrid"); 
//jqGrid code snippet, methods below: 
multiselect : true, //Must be true to allow for radio button selection 
beforeSelectRow: function(rowid, e) 
{ 
    // Allow only one selection 
    $(gridSelector).jqGrid('resetSelection'); 
    return (true); 
}, 
beforeRequest : function() { 
    //Remove multi-select check box from grid header 
    $('input[id=cb_myGrid]', 'div[id=jqgh_myGrid_cb]').remove(); 
}, 
loadComplete : function() { 
    //Convert grid check boxes to radio buttons 
    $('input[id^="jqg_myGrid_"]').attr("type", "radio"); 
}, 

...

Cheers,

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