0

私は単純な問題の解決策を求めてインターネット全体を検索してきましたが（願っています）、残念ながら何も役に立ちませんでした..

私はjqGridの初心者で、すべてのサンプル配列データをテーブルに表示することに成功しました。私が望むのは、「役割」列をインラインで編集して配列データに保存できるようにすることです... Zend フレームワークを使用していますが、次の問題があります。

私の問題

データをまったく編集できません。いつものように選択して強調表示するだけで、テキストエリアは提供されていません..

これが私の HTML です (正しいライブラリを使用していることを確認してください):

<html>
<head>
    <title>JqGrid Test</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  
    <link rel="stylesheet" type="text/css" media="screen" href="/js/jquery-ui-1.8.18.custom/css/ui-lightness/jquery-ui-1.8.18.custom.css" />  
    <link rel="stylesheet" type="text/css" media="screen" href="/js/jquery.jqGrid-4.4.0/css/ui.jqgrid.css" />  
    <script src="/js/jquery.jqGrid-4.4.0/js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="/js/jquery.jqGrid-4.4.0/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="/js/jquery.jqGrid-4.4.0/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="/js/test/index.js" type="text/javascript"> </script>
    <script src="/js/jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>    
    <script src="/js/jquery.jqGrid-4.4.0/src/grid.loader.js" type="text/javascript"> </script>      
</head>
<body>
    <table id="list"  class="scroll"></table>
    <br />
</body>
</html>

次の私のindex.js：

$(document).ready(function(){
    var lastsel2;
    jQuery("#list").jqGrid({
        datatype: "local",
        height: 250,
        colNames:['Role Id','name'],
        colModel:[
            {name:'id',index:'id', width:60, sorttype:"int", editable: true},           
            {name:'name',index:'name', width:100, sortable:false,editable: true,
                edittype:"textarea", editoptions:{rows:"2",cols:"10" },     
        ],
        onSelectRow: function(id){
            if(id && id!==lastsel2){
                jQuery('#list').restoreRow(lastsel2);
                jQuery('#list').editRow(id,true);
                lastsel2=id;
            }
        },
        caption: "Manipulating Array Data",
    });
    var mydata = [  
            {id:"1",name:"test"},
            {id:"2",name:"test2"},
            {id:"3",name:"test3"},
            {id:"4",name:"test"},
            {id:"5",name:"test2"},
            {id:"6",name:"test3"},
            {id:"7",name:"test"},
            {id:"8",name:"test2"},
            {id:"9",name:"test3"}
        ];
    for(var i=0;i<=mydata.length;i++)
        jQuery("#list").jqGrid('addRowData',i+1,mydata[i]);
});

私は何が欠けていますか？私の質問が明確であったことを願っています。回答を投稿してくれたすべての人に感謝します。

4

1 に答える 1

4

あなたが投稿したコードには多くのエラーがあります。

  • <html>なしで使用しないで<!DOCTYPE html ...ください。HTML のquirks モードを意味します。後の HTML コードは XHTML のように見えます。だからあなたは使うべきです
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  • JavaScript ライブラリのバージョンを1 つだけ含める必要があります。コードに最初に jQuery 1.8.2 を含め (src属性にもエラーがありました。そうである必要がありますsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js")、次に を含めjquery-1.7.2.min.jsました。同じように、最初grid.locale-en.jsにインクルードしてからインクルードすると、同じ jqGrid コードがjquery.jqGrid.min.js含まれますが、最小化されません。grid.loader.js
  • 次の点は実際のエラーではありませclass="scroll"んが、jqGrid で多くのバージョンが使用されているため、削除できます。
  • 列の定義に'name'構文エラーが含まれています: 列}の定義の最後に含める必要があり'name'ます。
  • for(var i=0;i<=mydata.length;i++)の代わりに使用しfor(var i=0;i<mydata.length;i++)ます。グリッドを埋めるためのの使用addRowDataは悪く、ゆっくりです。mydatajqGrid を作成しdata: mydataて追加のパラメーターとして追加するコードの前に定義するコードを移動するだけです。
  • データのローカル編集を実装する場合はediturl: "clientArray"、グリッドに追加のパラメーターを追加する必要があります。

次の問題は、私が回答を書いた主な理由でした。'id'問題は、グリッドで編集可能な列を定義したことです。問題は、jqGrid が行 ID として知られる行 (要素)"id"の属性として内部的に使用することです。したがって、列の名前を別の名前に変更する必要があります。さらに、ROWID として使用される入力データに属性を指定する必要があります。id<tr> idid

カスタム データを含む列の元の名前を保持することを希望し、jqGridで、たとえば、含める必要が"id"ある行 ID などの他のプロパティ名を使用する場合"id1"

localReader: {id: "id1"}, // needed for reading of the rowids
prmNames: {id: "id1"}     // needed for editing

この場合、mydata次のようになります

var mydata = [
        {id: "1", id1: "10", name: "test"},
        {id: "2", id1: "20", name: "test2"},
        {id: "3", id1: "30", name: "test3"},
        {id: "4", id1: "40", name: "test"},
        {id: "5", id1: "50", name: "test2"},
        {id: "6", id1: "60", name: "test3"},
        {id: "7", id1: "70", name: "test"},
        {id: "8", id1: "80", name: "test2"},
        {id: "9", id1: "90", name: "test3"}
    ];

ここでは、元のコードを修正するデモが表示されます。値 "10"、"20"、...、"90" ( ) を行 ID (要素の属性のid1値) として使用し、編集可能なカスタム データと共に使用します。id<tr>id

于 2012-10-18T18:02:09.123 に答える