Jqgrid: multiselect и отключить проверку (условно)
Я люблю jqGrid, но иногда вещи кажутся более сложными, чем они должны быть.
То, что я хотел бы достичь, - это установить флажок в каждой строке, чтобы пользователь мог выбрать, какие строки будут отправляться/обрабатываться.
Мне нужно, однако, заблокировать некоторые флажки, потому что у пользователя нет полномочий на эту определенную строку, может быть.
Я попытался установить multiselect: true
, а затем я попытался скрыть этот флажок:
loadComplete: function (data) {
if (data.rows.length > 0) {
for (var i = 0; i < data.rows.length; i++) {
if (data.rows[i].cell[7] == 'false') {
$("#jqg_OrdersGrid_" + data.rows[i].id).css("visibility", "hidden");
}
}
}
},
и он работает хорошо, но, тем не менее, .jqGrid('getGridParam', 'selarrrow')
дает мне выбранные строки, даже если они не были проверены.
Есть ли другой способ иметь флажки, которые включены/отключены, и способ узнать, какие из них были проверены?
спасибо
Ответы
Ответ 1
Я бы предложил вам отключить некоторые флажки с возможностью выбора по отношению к атрибуту "disabled". Для полной реализации вам понадобится
- установить "отключено" внутри дескриптора события
loadComplete
- дополнительно предотвращает выбор отключенных строк внутри
beforeSelectRow
дескриптор события
- чтобы иметь поддержку флажка "выбрать все" в заголовке многоселекторного блока.
onSelectAll
обработчик события, который фиксирует выбор отключенных строк.
В соответствующей демонстрации вы можете увидеть здесь. Наиболее важная часть кода:
var grid = $("#list10"), i;
grid.jqGrid({
//...
loadComplete: function() {
// we make all even rows "protected", so that will be not selectable
var cbs = $("tr.jqgrow > td > input.cbox:even", grid[0]);
cbs.attr("disabled", "disabled");
},
beforeSelectRow: function(rowid, e) {
var cbsdis = $("tr#"+rowid+".jqgrow > td > input.cbox:disabled", grid[0]);
if (cbsdis.length === 0) {
return true; // allow select the row
} else {
return false; // not allow select the row
}
},
onSelectAll: function(aRowids,status) {
if (status) {
// uncheck "protected" rows
var cbs = $("tr.jqgrow > td > input.cbox:disabled", grid[0]);
cbs.removeAttr("checked");
//modify the selarrrow parameter
grid[0].p.selarrrow = grid.find("tr.jqgrow:has(td > input.cbox:checked)")
.map(function() { return this.id; }) // convert to set of ids
.get(); // convert to instance of Array
}
}
);
ОБНОВЛЕНО: Бесплатный jqGrid поддерживает обратный вызов hasMultiselectCheckBox
, который можно использовать для создания флажков multiselect не для все строки jqGrid. Можно использовать rowattr
, чтобы дополнительно отключить некоторые строки. В результате вы получите более описанную выше функциональность. Рекомендуется использовать опцию multiPageSelection: true
дополнительно для бесплатного jqGrid с локальными данными (datatype: "local"
или loadonce: true
). Опция multiPageSelection: true
будет удерживать массив selarrrow
в пейджинге. Он позволяет "предварительно выбрать" несколько строк, заполнив соответствующие идентификаторы в selarrrow
. См. ОБНОВЛЕНО часть ответа и ответ с помощью демо для получения дополнительной информации.
Ответ 2
Отличный ответ от Олега, я бы добавил код для отмены выделенных строк, выполнив следующую функцию onSelectAll.
onSelectAll: function(aRowids,status) {
if (status) {
// uncheck "protected" rows
var cbs = $("tr.jqgrow > td > input.cbox:disabled", grid[0]);
cbs.removeAttr("checked");
//modify the selarrrow parameter
grid[0].p.selarrrow = grid.find("tr.jqgrow:has(td > input.cbox:checked)")
.map(function() { return this.id; }) // convert to set of ids
.get(); // convert to instance of Array
//deselect disabled rows
grid.find("tr.jqgrow:has(td > input.cbox:disabled)")
.attr('aria-selected', 'false')
.removeClass('ui-state-highlight');
}
}
Ответ 3
Для людей (таких как я), которые попадают в этот ответ после поиска в Google, это очень простое решение этой проблемы, поскольку jqGrid 4.0.0.
Достаточно добавить в строку, которую вы не хотите выбирать, в класс "ui-state-disabled" css-класса. См. Журнал изменений jqGrid 4.0.0.
И вы все равно можете объединить это со скрытием или отключением флажка.
var $jqgrid = $("#jqgridselector");
//loop through all rows
$(".jqgrow", $jqgrid).each(function (index, row) {
var $row = $(row);
if ($row === condition) {
//Find the checkbox of the row and set it disabled
$row.find("input:checkbox").attr("disabled", "disabled");
//add class ui-state-disabled, because thats how jqGrid knows not to take them into account for selection
$row.addClass("ui-state-disabled");
//I overwrite the opactity of the ui-state-disabled class to make the row look 'normal'
$row.css("opacity", 1);
}
});
Ответ 4
Я нашел работу.
Во время события loadComplete я отключу флажок SelectAll: мне это не нужно.
Я также скрываю флажок и отключает его.
loadComplete: function (data) {
$("#cb_OrdersGrid").css("visibility", "hidden");
if (data.rows.length > 0) {
for (var i = 0; i < data.rows.length; i++) {
if (data.rows[i].cell[7] == 'false') {
$("#jqg_OrdersGrid_" + data.rows[i].id).css("visibility", "hidden");
$("#jqg_OrdersGrid_" + data.rows[i].id).attr("disabled", true);
}
}
}
}
Теперь, когда я хочу отправить свои данные, я просматриваю выбранные строки и проверяю, были ли они отключены и помещены те, которые включены в новый массив.
var selectedRows = myGrid.jqGrid('getGridParam', 'selarrrow');
var checkedRows = [];
var selectionLoop = 0;
for (var x = 0; x < selectedRows.length; x++) {
var isDisabled = $('#jqg_OrdersGrid_' + selectedRows[x]).is(':disabled');
if (!isDisabled) {
checkedRows[selectionLoop] = selectedRows[x];
selectionLoop++;
}
}
То, что я сейчас достиг, - это возможность выбрать строку, которая условно сможет ее проверить или нет.
Я знаю, что код не оптимизирован (простите меня Олег), но я сделаю это позже.
Ответ 5
Я использую jqGrid 4.4.4, и мне пришлось немного настроить LoadfyX loadComplete.
loadComplete: function(data) {
for (var i = 0; i < data.rows.length; i++) {
var rowData = data.rows[i];
if (rowData.cell[6] != null) {//update this to have your own check
var checkbox = $("#jqg_list_" + rowData.i);//update this with your own grid name
checkbox.css("visibility", "hidden");
checkbox.attr("disabled", true);
}
}
}