Javascript jqGrid可编辑问题_Javascript_Jquery_Jqgrid

Javascript jqGrid可编辑问题

javascript jquery jqgrid

Javascript jqGrid可编辑问题,javascript,jquery,jqgrid,Javascript,Jquery,Jqgrid,我无法让我的jqGrid变成可编辑的，我很难说到底出了什么问题我有一个函数，当点击链接并创建新网格时调用 Javascript <script language="javascript"> function getCharacteristics(id) { $.getJSON('json/getCharacteristics.php?category_id='+id, function(data) { $("#grid").jqGrid("GridUnload

我无法让我的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>

头部部分

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


分类{
高度：200px；
溢出y：滚动；
溢出x：隐藏；
}
td th
{
字体大小：10px；
边框：1px实心#98bf21；
填充：10px 10px 10px 7px；
}
th
{
字体大小：11px；
文本对齐：左对齐；
垫面：5px；
垫底：4px；
背景色：#A7C942；
颜色：#fff；
}
tr.alt td
{
颜色：#000；
背景色：#EAF2D3；
}
#重叠式{
位置：绝对位置；
边框：5px纯灰；
填充：10px；
背景：白色；
宽度：270px；
高度：190px；
}
#流行音乐{
显示：块；
边框：1px纯色灰色；
宽度：65px；
文本对齐：居中；
填充：6px；
边界半径：5px；
文字装饰：无；
保证金：0自动；
}

OnSeRow中的选择器不正确，请将

jQuery（“#”+options.table）

替换为

jQuery（“#网格”）

请检查演示

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