Question

我无法让我的jqGrid变得可编辑，并且对于出了什么问题感到难过。

我有一个在点击链接时调用的函数并创建新的网格。

的Javascript

<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>

我的JSON数据的输出如下：

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>
<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

onSelectRow中的选择器不正确，请将jQuery("#" + options.table)替换为jQuery("#grid")。

请检查演示。

的 Demo on jsFiddle

jqGrid可编辑问题

1 个答案: