jqGrid无法内联编辑 [英] jqGrid cannot inline edit
问题描述
我一直在Internet上寻找我的简单问题的解决方案(希望如此)，但不幸的是，没有任何帮助！..
I have been searching all over internet for a solution to my simple problem (I hope) but unfortunately nothing has helped!..
我是jqGrid的初学者，并且已经成功地使其在表中显示所有示例数组数据..我想要的是能够内联编辑"role"列并将其保存回数组数据中...我正在使用Zend框架，并遇到以下问题:
I am a beginner with jqGrid and I have successfully made it to show all my sample array data in a table.. What I want is to be able to edit the "role" column inline and save it back to the array data... I am using Zend framework and have this issue:
我的问题
我根本无法编辑数据.我只能像往常一样选择并突出显示，没有提供文本区域.
I am not able to edit the data at all. I can just select and highlight as usual, no textarea is been provided..
这是我的HTML(请确认我使用的是正确的库):
Here is my HTML (please verify I am using the right libraries):
<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]);
});
我想念什么?希望我的问题很清楚，并感谢所有发表回复的人！
What am I missing? I hope my question was clear and I thank and appreciate in adv to all who posts a response!
推荐答案
您发布的代码中有很多错误.
There are many errors in the code which you posted.
- 在没有
<!DOCTYPE html ...的情况下，切勿使用<html>.这表示HTML的怪异模式.后面的HTML代码看起来像XHTML.所以你应该使用
- You should never use
<html>without<!DOCTYPE html .... It means quirks mode of HTML. The later HTML code looks like XHTML. So you should use
<!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">
- 您应仅包含任何JavaScript库的一个版本.在您的代码中，您首先包含了jQuery 1.8.2(在
src属性中也是错误的.它应该是src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js")，然后包含了jquery-1.7.2.min.js.以相同的方式，您首先包含grid.locale-en.js和jquery.jqGrid.min.js，然后包含grid.loader.js，它将包含相同的jqGrid代码，但未最小化. - 下一点不是一个真正的错误，但是您可以删除jqGrid不使用的
class="scroll"，因为有许多版本. -
'name'列的定义包含语法错误:您必须在'name'列的定义末尾包含}. - 您使用
for(var i=0;i<=mydata.length;i++)而不是for(var i=0;i<mydata.length;i++).addRowData用于填充网格的方法不好且缓慢.您应该只将定义mydata的代码移到创建jqGrid并添加data: mydata作为附加参数的代码之前. - 如果要对数据执行 local 编辑，则必须在网格中添加其他参数
editurl: "clientArray". - You should include only one version of any JavaScript library. In your code you included first jQuery 1.8.2 (it was error in
srcattribute too. it should besrc="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js") and then includedjquery-1.7.2.min.js. In the same way you included firstgrid.locale-en.jsandjquery.jqGrid.min.jsand then includedgrid.loader.jswhich will include the same jqGrid code, but non-minimized. - The next point is not an real error, but you can remove
class="scroll"which are not used by jqGrid since many many versions. - The definition of
'name'column contain syntax error: you have to include}at the end of the definition of'name'column. - You use
for(var i=0;i<=mydata.length;i++)instead offor(var i=0;i<mydata.length;i++). The usage ofaddRowDatafor the filling of grid is bad and slowly. You should just move the code which definesmydatabefore the code which create jqGrid and adddata: mydataas additional parameter. - If you want to implement local editing of data you have to add additional parameter
editurl: "clientArray"to the grid.
下一个问题是我写下答案的主要原因.问题是您在网格中定义了可编辑列'id'.问题在于jqGrid在内部也将"id"用作行(<tr>元素)的id属性，也称为rowid.因此，您应该重命名 id列为另一个名称.另外，您应该在输入数据中提供id属性，该属性将用作行ID.
The next problem was the main reason why I wrote my answer. The problem is that you defined editable column 'id' in the grid. The problem is that jqGrid uses internally "id" as the id attribute of the row (<tr> elements) known as the rowid too. So you should rename id column to another name. Additionally you should provide id attribute in the input data which will be used as the rowid.
如果您确实希望保留具有自定义数据的列的原始"id"名称，并且希望jqGrid使用任何其他属性名称(例如"id1")作为行标识，则必须包含
If you do prefer to hold your original "id" name for the column with the custom data and want that jqGrid uses any other property name like "id1" for example as the rowid you have to include
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)作为行ID(<tr>元素的id属性的值)，并将id与您的自定义数据一起使用可以编辑.
Here you will see the demo which is fixing of your original code. It uses values "10", "20", ..., "90" (id1) as the rowids (values of id attribute of <tr> elements) and it uses id with your custom data which can be edited.
这篇关于jqGrid无法内联编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
