Я использую angularjs и Jqgrid, в таблице у меня есть два столбца, один из которых содержит переключатели, а другой содержит числа.Я реализовал эту конфигурацию, чтобы показать таблицу и добавить событие щелчка на переключателе.
/*global appModule */
'use strict';
(appModule.lazy || appModule)
.service('ModalBusquedaNumeroDeViaGridSrv', ['$translate', function($translate) {
function getOptions() {
var options = {
datatype: 'local',
colNames: [
'',
$translate('datoRiesgoNuevo.DatosModalCatastralHogar.numerosDisponibles')
],
colModel: [{
name: 'selRadio',
index: 'selRadio',
align: 'center',
width: 40,
formatter: function(data, cell, obj) {
return '<input type=\"radio\" id=\"' + cell.rowId + '\" name=\"selRadio\" />';
}
}, {
name: 'numerosDisponibles',
index: 'numerosDisponibles',
align: 'center',
width: 400
}],
rownumbers: false,
rowTotal: 20,
rowList: [
5,
10,
15
],
loadonce: true,
gridview: true,
sortname: 'numerosDisponibles',
viewrecords: true,
sortorder: 'asc',
footerrow: false,
autowidth: true,
shrinkToFit: true,
height: '220',
scrolloffset: 0,
scroll: true
};
return options;
}
return {
getOptions: getOptions
}
}]);
Я использую этот сервис для получения опций, и в контроллере я передаю данные и опции в массив.Вот контроллер.
drn.numerosVia = [{
'sel': 'false',
'numerosDisponibles': '10'
}, {
'sel': 'false',
'numerosDisponibles': '20'
}, {
'sel': 'false',
'numerosDisponibles': '30'
}];
drn.gridNumerosVia = {
data: drn.numerosVia,
options: ModalBusquedaNumeroDeViaGridSrv.getOptions()
};
$scope.$on('drn.gridNumerosViaSet', function(event, myGrid) {
myGrid.jqGrid('setGridParam', {
loadComplete: function(data) {
var getColumnIndexByName = function(columnName) {
var cm = myGrid.jqGrid('getGridParam', 'colModel'),
i = 0,
l = cm.length;
for (; i < l; i++) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
},
i = getColumnIndexByName('selRadio');
function changeMyModel(i, input) {
var dataRow = i - 1;
drn.gridNumerosVia.data[dataRow].sel = input.checked;
$scope.$apply();
}
// nth-child need 1-based index so we use (i+1) below
angular.element('tbody > tr.jqgrow > td:nth-child(' + (i + 1) + ') > input',
this).click(function(e) {
var rowId = angular.element(e.target).closest('tr').attr('id');
changeMyModel(rowId, this);
});
}
});
});
Имейте в виду, что эта таблица показана внутри модальной.Эта проблема возникает только при первом нажатии переключателя, при первом нажатии на них все работает нормально.