0
Я не могу заставить jqGrid стать редактируемым, и я в тупике о том, что не так.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>