jqGrid行をオプションとして指定しても編集できないのはなぜですか？

jqGridをASP.NET MVC3の部分ビューに追加しようとしています。このグリッドは、クライアントサイドのためのショートカット電卓としてのみ、彼らはボタンを押し、いくつかの入力されたパラメータに基づいてグリッドが生成されます。グリッドが表示され、addDataRowさえも取得できますが、フィールドはそのように指定されていても行は編集できません。私はIE9、クロム、FF、Safariのすべての同じ結果でそれを試してみました。jqGrid行をオプションとして指定しても編集できないのはなぜですか？

単純なHTMLページにして、それがMVCの部分表示に干渉していても編集可能な行がないことを確認しました。行は選択可能ですが、編集のために開いていません。

私は、行は、デフォルトでは編集できないaddDataRowによって追加されhere

からフルjqGridパッケージをダウンロードしたことを確認するダブルチェック？ jqGrid Wikiのすべてのドキュメントから、私はそれがどこにないのか見当がつかなかった。私はインライン編集のwikiページを何度か読んだので、これはうまくいくはずです。私は何が欠けていますか？私はそれを選択したが、編集のために開いていない行をクリックし

not editable http://bigpichost.com/files/noteditable_zm7rflo0.png

！ここで

は、私がテストしていたHTMLページです：

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Testing JQGrid</title> 
     <link rel="stylesheet" href="../Content/themes/base/jquery.ui.all.css"> 
     <link href="Content/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 
     <link href="Content/themes/redmond/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" /> 
    </head> 

    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-ui-1.8.18.custom.js" type="text/javascript"></script> 
    <script src="Scripts/grid.locale-en.js" type="text/javascript"></script> 
    <script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script> 
    <body> 
     <table id=jqgRequests></table> 

     <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#jqgRequests').jqGrid({ 
       // type of data 
       datatype: 'local', 
       // column names 
       colNames: ['Save', 'Pct-Amt', 'Request', 'French'], 
       // columns model 
       colModel: [ 
        { name: 'Save', index: 'Save', width: 55, sortable: false, editable: true, edittype: 'checkbox', formatter: 'checkbox', align: 'center' }, 
        { name: 'PctAmt', index: 'PctAmt', width: 55, editable: false, align: 'right' }, 
        { name: 'Request', index: 'Request', editable: true, align: 'left' }, 
        { name: 'French', index: 'French', editable: true, align: 'left' } 
        ], 
       //initial sorting column 
       sortname: 'Pct-Amt', 
       // initial sorting direction 
       sortorder: 'asc', 
       // we want to display total records count 
       viewrecords: false, 
       // grid width 
       autowidth: true, 
       // grid header 
       caption: "Generated Requests" 
      }); // end jqgrid 
      var myFirstRow = { Save: "true", PctAmt: "0", Request: "Testing this", French: "Testing Oui" }; 
      $('#jqgRequests').addRowData("1", myFirstRow); 
     }); 
     </script> 
    </body> 
</html>

出典

2012-03-15 Neil Wood

編集可能な行は、それが編集されていないことを意味します。これは、 'editRow'のようなメソッドの呼び出しに関して、inがeditableモードで設定できることを意味します。本当に必要ない場合は 'addRowData'を追加して使用することをお勧めしません。あなたの場合は、 'data：[myFirstRow]'をjqGridオプションのリストに追加することで、データでグリッドを作成することができます。 'myFirstRow'オブジェクトに' id： "1"プロパティを追加することで、新しい行のidを指定することができます。通常、 'data：myArrayOfRowData'を使用します。ここでは、すべての行が配列内にあります。 – Oleg

何かが編集可能な状態に行を切り替える必要があります。あなたは、行がそれを追加した後、編集モードになりたい場合は、あなただけのeditRowメソッドを呼び出す必要があります：

$("#jqgRequests").jqGrid('editRow', "1", false);

あなたがそれを選択したときに、行が編集可能な状態に切り替えたい場合は、コールバックをonSelectRow使用する必要があります。編集モードでは、既にある行を、追加したい場合は

var previousSelectedRowId; 

$('#jqgRequests').jqGrid({ 
    ... 
    onSelectRow: function(currentSelectedRowId) { 
     if(currentSelectedRowId && currentSelectedRowId !== previousSelectedRowId) { 
      $('#jqgRequests').jqGrid('restoreRow', previousSelectedRowId); 
      previousSelectedRowId = currentSelectedRowId; 
     } 
     $('#jqgRequests').jqGrid('editRow', currentSelectedRowId, false); 
    }, 
    ... 
};

、あなたはAddRowメソッドを使用する必要があります。

$('#jqgRequests').jqGrid('addRow', { rowID: "1", initdata: myFirstRow });

出典

2012-03-15 15:22:27 tpeczek

これは機能しました！ありがとうございました！私は例で何かが足りないことを知っていました。 –

jqGrid行をオプションとして指定しても編集できないのはなぜですか？

答えて

関連する問題