jqGrid可编辑问题

Question

I cannot get my jqGrid to become editable and am stumped as to what is wrong. 我无法让jqGrid变为可编辑状态，并为错误之处感到困惑。

I have a function that is called when links are clicked and creates new grids. 我有一个单击链接并创建新网格时会调用的函数。

Javascript Java脚本

<script language="javascript">

function getCharacteristics(id)
{ 

$.getJSON('json/getCharacteristics.php?category_id='+id, function(data) {
        $("#grid").jqGrid("GridUnload");
        data.length=data.length-1;

        $("#grid").jqGrid({ //set your grid id
            data: data, //insert data from the data object we created above
            datatype: 'local',
            width: 500, //specify width; optional
            colNames:['character_id','gr_name','en_name','charType'], //define column names
            colModel:[
            {name:'character_id', index:'character_id', key: true, width:50},
            {name:'gr_name', index:'gr_name', width:100, editable:true},
            {name:'en_name', index:'en_name', width:100, editable:true},
            {name:'charType', index:'charType', width:100, editable:true},
            ], //define column models
            pager: '#pager', //set your pager div id
            sortname: 'id', //the column according to which data is to be sorted; optional
            viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
            sortorder: "asc", //sort order; optional
            editurl: 'clientArray',
            cellsubmit:'clientArray',
            caption:"jqGrid Example", //title of grid
            onSelectRow: function (character_id) {
                jQuery("#" + options.table).editRow(character_id, true);                
        },
        }); 
        $("#ed1").click( function() { 
            $("#grid").jqGrid('editRow',"1"); 
            this.disabled = 'true'; 
        });
    });
}

</script>

The output of my JSON data is the following: 我的JSON数据的输出如下：

JSON data JSON数据

[{"character_id":"477","en_name":"LENGTH","charType":"input","gr_name":"\u00cc\u00c7\u00ca\u00cf\u00d3","categories_id":"27"},{"character_id":"479","en_name":"COLOR","charType":"input","gr_name":"\u00d7\u00d1\u00d9\u00cc\u00c1","categories_id":"27"},false]

Head Section 头部

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
div.scrollCategories{
  height:200px;
  overflow-y: scroll;
  overflow-x: hidden;
}

td th 
{
font-size:10px;
border:1px solid #98bf21;
padding:10px 10px 10px 7px;
}
th 
{
font-size:11px;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#fff;
}
tr.alt td 
{
color:#000;
background-color:#EAF2D3;
}

#overlay_form{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
#pop{
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
</style>

<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" media="screen" type="text/css" />
<link href="jquery.jqGrid-4.5.2/css/ui.jqgrid.css" rel="stylesheet" media="screen" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.jqGrid-4.5.2/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.jqGrid-4.5.2/js/jquery.jqGrid.src.js"></script>

</head>

Answer 1

The selector in the onSelectRow is not correct, replace jQuery("#" + options.table) with jQuery("#grid") . onSelectRow的选择器不正确，将jQuery("#" + options.table)替换为jQuery("#grid") 。

Check the demo please. 请检查演示。

Demo on jsFiddle jsFiddle上的演示

jqGrid可编辑问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-08-06 04:41:07

jqGrid可编辑问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-08-06 04:41:07

解决方案1
1 已采纳 2013-08-06 04:41:07