Я искал по всему Интернету решение моей простой проблемы (надеюсь), но, к сожалению, ничего не помогло! ..
Я начинаю с jqGrid, и я успешно сделал это, чтобы показать все мои данные массива образцов в таблице. Я хочу, чтобы иметь возможность редактировать столбцы «role» inline и сохранять их обратно в данные массива … Я использую структуру Zend и имею эту проблему:
Мои проблемы
Я вообще не могу редактировать данные. Я могу просто выбрать и выделить, как обычно, текстовая область не предоставляется.
Вот мой HTML (пожалуйста, убедитесь, что я использую правильные библиотеки):
<html> <head> <title>JqGrid Test</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="/js/jquery-ui-1.8.18.custom/css/ui-lightness/jquery-ui-1.8.18.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="/js/jquery.jqGrid-4.4.0/css/ui.jqgrid.css" /> <script src="/js/jquery.jqGrid-4.4.0/js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="/js/jquery.jqGrid-4.4.0/js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="/js/jquery.jqGrid-4.4.0/js/jquery.jqGrid.min.js" type="text/javascript"></script> <script src="/js/test/index.js" type="text/javascript"> </script> <script src="/js/jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script> <script src="/js/jquery.jqGrid-4.4.0/src/grid.loader.js" type="text/javascript"> </script> </head> <body> <table id="list" class="scroll"></table> <br /> </body> </html> Затем мой index.js :
$(document).ready(function(){ var lastsel2; jQuery("#list").jqGrid({ datatype: "local", height: 250, colNames:['Role Id','name'], colModel:[ {name:'id',index:'id', width:60, sorttype:"int", editable: true}, {name:'name',index:'name', width:100, sortable:false,editable: true, edittype:"textarea", editoptions:{rows:"2",cols:"10" }, ], onSelectRow: function(id){ if(id && id!==lastsel2){ jQuery('#list').restoreRow(lastsel2); jQuery('#list').editRow(id,true); lastsel2=id; } }, caption: "Manipulating Array Data", }); var mydata = [ {id:"1",name:"test"}, {id:"2",name:"test2"}, {id:"3",name:"test3"}, {id:"4",name:"test"}, {id:"5",name:"test2"}, {id:"6",name:"test3"}, {id:"7",name:"test"}, {id:"8",name:"test2"}, {id:"9",name:"test3"} ]; for(var i=0;i<=mydata.length;i++) jQuery("#list").jqGrid('addRowData',i+1,mydata[i]); });
Что мне не хватает? Надеюсь, мой вопрос был ясен, и я благодарю и ценю в adv всем, кто отправляет ответ!
В коде, который вы опубликовали, есть много ошибок.
<html> без <!DOCTYPE html ... Это означает причудливый режим HTML. Более поздний HTML-код выглядит как XHTML. Поэтому вы должны использовать <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
src . Это должно быть src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ), а затем включил jquery-1.7.2.min.js . Таким же образом вы включили first grid.locale-en.js и jquery.jqGrid.min.js а затем включили grid.loader.js который будет содержать один и тот же код jqGrid, но не сведен к минимуму. class="scroll" которые не используются jqGrid, поскольку многие версии. 'name' содержится синтаксическая ошибка: вы должны включить } в конце определения столбца 'name' . for(var i=0;i<=mydata.length;i++) вместо for(var i=0;i<mydata.length;i++) . Использование addRowData для заполнения сетки плохое и медленное. Вам следует просто переместить код, который определяет mydata перед кодом, который создает jqGrid, и добавлять data: mydata качестве дополнительного параметра. editurl: "clientArray" в сетку. Следующая проблема была основной причиной, по которой я написал свой ответ. Проблема в том, что вы определили редактируемый столбец 'id' в сетке. Проблема в том, что jqGrid использует внутренне "id" как атрибут id строки ( <tr> ), также известный как rowid. Поэтому вы должны переименовать столбец id в другое имя. Кроме того, вы должны id атрибут id во входных данных, которые будут использоваться как rowid.
Если вы предпочитаете хранить свое исходное имя "id" для столбца с пользовательскими данными и хотите, чтобы jqGrid использовал любое другое имя свойства, например "id1" например, как rowid, который вы должны включить
localReader: {id: "id1"}, // needed for reading of the rowids prmNames: {id: "id1"} // needed for editing
В случае, если mydata может выглядеть
var mydata = [ {id: "1", id1: "10", name: "test"}, {id: "2", id1: "20", name: "test2"}, {id: "3", id1: "30", name: "test3"}, {id: "4", id1: "40", name: "test"}, {id: "5", id1: "50", name: "test2"}, {id: "6", id1: "60", name: "test3"}, {id: "7", id1: "70", name: "test"}, {id: "8", id1: "80", name: "test2"}, {id: "9", id1: "90", name: "test3"} ];
Здесь вы увидите демоверсию, которая фиксирует ваш исходный код. Он использует значения «10», «20», …, «90» ( id1 ) как rowids (значения атрибута id элементов <tr> ), и он использует id с вашими настраиваемыми данными, которые можно редактировать.