javascript
  • jquery
  • jqgrid
  • 2013-08-06 78 views 0 likes 
    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> 
    

    回答

    1

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

    请检查演示。

    Demo on jsFiddle

    相关问题