jqGrid-"editable":"true"；在Grid列的JSON响应中 [英] jqGrid - "editable":"true" in JSON response for grid columns
问题描述
问题1
我的列模型为
{name:'fname',index:'fname', width:50, align:"center", resizable:false},
{name:'lname',index:'lname', width:50, align:"center", resizable:false},
{name:'date',index:'date', width:50, align:"center", resizable:false, editable:true}
如果我将jqGrid JSON响应更改为包括列名称，则jqGrid数据行为空，没有数据
{
"rows":[
{
"id":"1",
"cell":{
"fname":"S",
"lname":"K",
"date":"11/11/2011"
}
}
],
"userdata":{"amount":3220,"tax":342,"total":3564,"name":"Totals:"}
}
问题2-我尝试在单元格定义中添加可编辑"(带有或不带有列名.此处显示的是带有列名的JSON结构.)，jqGrid数据行再次为空
Problem 2 -- I tried adding "editable" within the cell definition (with or without the column names. Here I'm showing the JSON structure with column names.), jqGrid data rows are again empty
{
"rows": [
{
"id": "1",
"cell": {
"fname": "S",
"lname": "K",
"date": [
{
"date": "11/11/2011",
"editable": "true"
}
]
}
}
],
"userdata": {
"amount": 3220,
"tax": 342,
"total": 3564,
"name": "Totals:"
}
}
表单元格已绘制，但jqGrid没有拾取JSON数据.
我在做什么错了?
jqGrid JSONReader
jQuery("#editjqGrid").jqGrid({
url: "http://localhost/edit.json",
datatype: "json",
contentType: "application/x-javascript; charset=utf-8",
colNames:['fname','lname', 'date'],
colModel:[
{name:'fname',index:'fname', width:50, align:"center", resizable:false},
{name:'lname',index:'lname', width:50, align:"center", resizable:false},
{name:'date',index:'date', width:50, align:"center", resizable:false, editable:true}
],
loadComplete: function (data) {
var item, i, l = data && data.rows.cell ? data.rows.cell.length : 0;
for (i = 0; i < l; i++) {
item = data.rows.cell[i];
if (item.editable === "false") {
$("#" + item).addClass("not-editable-cell");
}
}
}
});
jQuery("#editjqGrid").jqGrid('navGrid','#pager2',{add:false,del:false,edit:false,position:'right',minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
更新:为JSON中的特定单元格添加内联编辑选项
{
"rows": [
{
"id": "1",
"cell": {
"fname": "S",
"lname": "K",
"date": {
"value": "11/11/2011",
"editable": "true",
"edittype":"input",
"editoptions":{
"size":"20",
"maxlength":"30"
}
}
"emptype":{
"editable":"true",
"edittype":"select",
"editoptions":{
"option":"Full Time",
"option":"Part Time",
"option":"Hourly"
}
}
}
}
],
"userdata": {
"amount": 3220,
"tax": 342,
"total": 3564,
"name": "Totals:"
}
}
更新2:取出单元格"
{
"rows": [
{
"id": "1",
"fname": "S",
"lname": "K",
"date": {
"value": "11/11/2011",
"editable": "true",
"edittype":"input",
"editoptions":{
"size":"20",
"maxlength":"30"
}
}
"emptype":{
"editable":"true",
"edittype":"select",
"editoptions":{
"option":"Full Time",
"option":"Part Time",
"option":"Hourly"
}
}
}
]
}
更新3:重新添加单元格"并修改了edittype和editoptions
{
"rows": [
{
"id": "1",
"cell": {
"fname": "S",
"lname": "K",
"date": {
"value": "11/11/2011",
"editable": "true",
"edittype":"text",
"editoptions":{
"size":"20",
"maxlength":"30"
}
}
"emptype":{
"editable":"true",
"edittype":"select",
"editoptions":{
"value":"Full Time",
"value":"Part Time",
"value":"Hourly"
}
}
}
}
]
loadComplete-'不可编辑单元格'不起作用
loadComplete: function (data) {
var rowItem, x, l = data && data.rows ? data.rows.length : 0;
for (x = 0; x < l; x++) {
if (data.rows[x].cell.date.editable === "false") {
$("#" + data.rows[x].id + "td[aria-describedby='editTimecard_date']").addClass("not-editable-cell");
}
}
}
推荐答案
问题1非常简单.在JSON中，您同时使用"cell"和命名属性，这对于默认JSON阅读器来说是错误的.因此，您可以通过两种方式解决问题
The problem 1 is very easy. In the JSON you use "cell" and named properties together which is wrong for the default JSON reader. So you can fix the problem in two ways
第一种方式.您无需更改数据的JSON格式，而是在每列中添加jsonReader: {repeatitems: false}参数和带有cell.前缀的jsonmap:
The first way. You don't change the JSON format of data, but add jsonReader: {repeatitems: false} parameter and jsonmap with cell. prefix in every column:
colModel: [
{name: 'fname', index: 'fname', jsonmap: 'cell.fname', width: 70, align: "center", resizable: false},
{name: 'lname', index: 'lname', jsonmap: 'cell.lname', width: 70, align: "center", resizable: false},
{name: 'date', index: 'date', jsonmap: 'cell.date', width: 70, align: "center", resizable: false, editable: true}
],
jsonReader: {repeatitems: false}
(请参见演示).
第二种方式.您仅使用jsonReader: {repeatitems: false}并将cell部分从JSON数据中删除:
The second way. You use only jsonReader: {repeatitems: false} and remove cell part from the JSON data:
{
"rows":[
{
"id":"1",
"fname":"S",
"lname":"K",
"date":"11/11/2011"
}
],
"userdata":{"amount":3220,"tax":342,"total":3564,"name":"Totals:"}
}
(请参见另一个演示).
在问题的第二部分，我发现JSON数据的"date"部分的格式非常奇怪.为什么属性的值是数组?它可以有更多作为一项吗?在这种情况下应如何显示数据?我认为您应该更改数据格式.
In your second part of the question I find very strange format of the "date" part of JSON data. Why the value of the property is array? Could it has more as one items? How the data should be displayed in the case? I think you should change format of the data.
这篇关于jqGrid-"editable":"true"；在Grid列的JSON响应中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
