Моя цель - встроить редактирование ячеек в сетку данных, используя JQuery и JqGrid. Я получил сетку для заполнения на основе запроса ajax и ответа json. К сожалению, я не могу заставить ячейки становиться редактируемыми при щелчке по строкам.
Я пробовал и Chrome, и Safari, и провел два дня исследований, но все еще не повезло. Ссылки, которые я использовал ниже, не помогли:
http://trirand.com/blog/jqgrid/jqgrid.html
http://www.trirand.net/demoaspnetmvc.aspx
Следуя инструкциям, я добавил событие onRowSelect, которое вызвало бы editRow и установило значение true. Однако это никогда не работает, и я не могу понять, почему.
Любая помощь будет принята с благодарностью.
Код:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.2.custom.css"/>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script src="i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery("#list").jqGrid({
url:'http://localhost:8080/jblog/messages',
datatype:'json',
jsonReader: {
root: 'rows',
repeatitems: false,
page: 'currentPage',
total: 'totalRecords'
},
mtype:'GET',
colNames:['Message ID', 'Message Content'],
colModel:[
{name:'messageId', index:'messageId'},
{name:'content', index:'content', width:'400'}
],
viewrecords:true,
caption:'My first grid',
rowNum:30,
rowList:[10,20,30],
pager: '#pager',
sortname: 'messageId',
onSelectRow: function(id){
console.log('onSelectRow');
editRow(id);
},
editurl:'http://localhost:8080/jblog/messages'
});
});
</script>
</head>
<body>
<table id="list">
<tr>
<td/>
</tr>
</table>
<div id="pager"></div>
<script type="text/javascript">
var lastSelection;
function editRow(id) {
console.log("editRow");
if (id && id !== lastSelection) {
console.log("setRowToEdit");
var grid = $("#list");
grid.restoreRow(lastSelection);
console.log("id " + id);
grid.editRow(id, true);
lastSelection = id;
}
}
</script>
</body>
</html>