jqgrid - 編集時にjqGridセル値を取得する方法

Question

インライン編集時に jqGrid セル値を取得する方法 (getcell および getRowData は、入力要素の実際の値ではなく、セルの内容を返します)。

score 17 · Accepted Answer

指定された行 ID とセル ID を持つセルの値を取得する一般的な関数

js コード関数で作成します。

function getCellValue(rowId, cellId) {
    var cell = jQuery('#' + rowId + '_' + cellId);        
    var val = cell.val();
    return val;
}

使用例:

var clientId = getCellValue(15, 'clientId');

危険ですが、機能します。

score 15 · Accepted Answer

これは、ユーザー関数を使用した基本的なソリューションの例です。

    ondblClickRow: function(rowid) {
        var cont = $('#grid').getCell(rowid, 'MyCol');
        var val = getCellValue(cont);
    }

...

function getCellValue(content) {
    var k1 = content.indexOf(' value=', 0);
    var k2 = content.indexOf(' name=', k1);
    var val = '';
    if (k1 > 0) {
        val = content.substr(k1 + 7, k2 - k1 - 6);
    }
    return val;
}

score 7 · Accepted Answer

何時間もの悲しみの後、これが最も簡単な解決策であることがわかりました。行データをフェッチする前にこれを呼び出します。

$('#yourgrid').jqGrid("editCell", 0, 0, false);

現在の編集を保存し、グリッドに行がない場合はスローしません。

score 4 · Accepted Answer

あなたが述べたように、getCellとgetRowDataのjqGridドキュメントによると：

行またはセルを編集するときは、この方法を使用しないでください。これにより、入力要素の実際の値ではなく、セルの内容が返されます

これらのメソッドはどちらもデータを直接返さないため、セルコンテンツ自体を返すためにそれらを使用してから、おそらくjQueryを使用して解析する必要があります。jqGridの将来のバージョンが、この解析自体の一部を実行する手段を提供したり、APIを提供してより簡単にすることができれば素晴らしいと思います。しかし一方で、これは本当に頻繁に発生するユースケースですか？

または、元の問題をより詳細に説明できる場合は、他のオプションがある可能性があります。

score 3 · Accepted Answer

これを試してください、それはあなたに特定の列の値を与えるでしょう

onSelectRow: function(id) {
    var rowData = jQuery(this).getRowData(id); 
    var temp= rowData['name'];//replace name with you column
    alert(temp);
}

score 2 · Accepted Answer

基本的に、セルの内容にアクセスする前に行を保存する必要があります。

その場合、セルが編集モードのときに表示されるマークアップではなく、セルの値を取得します。

jQuery.each(selectedRows, function(index, foodId) {
            // save the row on the grid in 'client array', I.E. without a server post
            $("#favoritesTable").saveRow(foodId, false, 'clientArray'); 

            // longhand, get grid row based on the id
            var gridRow = $("#favoritesTable").getRowData(foodId);

            // reference the value from the editable cell
            foodData += foodId + ":" + gridRow['ServingsConsumed'] + ',';
        });

score 2 · Accepted Answer

こんにちは、私もこの問題に遭遇しました。最後に、この問題を jQuery で解決しました。しかし、答えはグリッド自体に関連しており、一般的なものではありません。それが役に立てば幸い。

このような私のソリューション：

var userIDContent = $("#grid").getCell(id,"userID");  // Use getCell to get the content
//alert("userID:" +userID);  // you can see the content here.

//Use jQuery to create this element and then get the required value.
var userID = $(userIDContent).val();  // var userID = $(userIDContent).attr('attrName');

score 1 · Accepted Answer

私の場合、セルの内容はフォーマッタの結果としての HTML です。アンカータグ内の値が必要です。セルの内容をフェッチし、jQuery を介して html から要素を作成することで、新しく作成した要素で .text() を呼び出して生の値にアクセスできます。

var cellContents = grid.getCell(rowid, 'ColNameHere');
console.log($(cellContents)); 
//in my case logs <h3><a href="#">The Value I'm After</a></h3>

var cellRawValue = $(cellContents).text();
console.log(cellRawValue); //outputs "The Value I'm After!"

私の答えは@LLQの答えに基づいていますが、私の場合、cellContentsは生の値にアクセスする.text()代わりに使用する必要がある入力ではない.val()ため、他の誰かが方法を探している場合に備えてこれを投稿すると思いましたフォーマットされた jqGrid セルの生の値にアクセスします。

score 1 · Accepted Answer

これが私の解決策です：

                function getDataLine(grida, rowid){  //vykradeno z inineeditu a vohackovano

                    if(grida.lastIndexOf("#", 0) === 0){
                        grida = $(grida);
                    }else{
                        grida = $("#"+grida);
                    }

                    var nm, tmp={}, tmp2={}, tmp3= {}, editable, fr, cv, ind;

                    ind = grida.jqGrid("getInd",rowid,true);
                    if(ind === false) {return success;}
                    editable = $(ind).attr("editable");
                    if (editable==="1") {
                        var cm;
                        var colModel = grida.jqGrid("getGridParam","colModel") ;
                        $("td",ind).each(function(i) {
                            // cm = $('#mygrid').p.colModel[i];
                            cm = colModel[i];
                            nm = cm.name;
                            if ( nm != 'cb' && nm != 'subgrid' && cm.editable===true && nm != 'rn' && !$(this).hasClass('not-editable-cell')) {
                                switch (cm.edittype) {
                                    case "checkbox":
                                        var cbv = ["Yes","No"];
                                        if(cm.editoptions ) {
                                            cbv = cm.editoptions.value.split(":");
                                        }
                                        tmp[nm]=  $("input",this).is(":checked") ? cbv[0] : cbv[1]; 
                                        break;
                                    case 'text':
                                    case 'password':
                                    case 'textarea':
                                    case "button" :
                                        tmp[nm]=$("input, textarea",this).val();
                                        break;
                                    case 'select':
                                        if(!cm.editoptions.multiple) {
                                            tmp[nm] = $("select option:selected",this).val();
                                            tmp2[nm] = $("select option:selected", this).text();
                                        } else {
                                            var sel = $("select",this), selectedText = [];
                                            tmp[nm] = $(sel).val();
                                            if(tmp[nm]) { tmp[nm]= tmp[nm].join(","); } else { tmp[nm] =""; }
                                            $("select option:selected",this).each(
                                                function(i,selected){
                                                    selectedText[i] = $(selected).text();
                                                }
                                            );
                                            tmp2[nm] = selectedText.join(",");
                                        }
                                        if(cm.formatter && cm.formatter == 'select') { tmp2={}; }
                                        break;
                                }
                            }
                        });
                    }
                    return tmp;
                }

score 1 · Accepted Answer

その非常に単純なコードを grid.php に記述し、値を他の page.php
に渡すと、他の列のセルの値を取得できます。

しかし、誰もがwindow.open（値を渡すパス....）のようなものをファンシーボックスまたはクロアボックスで作成できますか？

$custom = <<<CUSTOM
jQuery("#getselected").click(function(){

    var selr = jQuery('#grid').jqGrid('getGridParam','selrow'); 
    var kelr = jQuery('#grid').jqGrid('getCell', selr, 'stu_regno');
    var belr = jQuery('#grid').jqGrid('getCell', selr, 'stu_school');
    if(selr) 

     window.open('editcustomer.php?id='+(selr), '_Self');


    else alert("No selected row");
    return false;
});

CUSTOM;
$grid->setJSCode($custom);

score 1 · Accepted Answer

以下の方法で入手できます…!!

var rowId =$("#list").jqGrid('getGridParam','selrow');  
var rowData = jQuery("#list").getRowData(rowId);
var colData = rowData['UserId'];   // perticuler Column name of jqgrid that you want to access

score 1 · Accepted Answer

これを直接使用できます....

onCellSelect: function(rowid,iCol,cellcontent,e) {
            alert(cellcontent);
        }

score 0 · Accepted Answer

エイダンの答えは断然最高だと思います。

$('#yourgrid').jqGrid("editCell", 0, 0, false);

これにより、現在の編集がコミットされ、実際の値にアクセスできるようになります。私はそれを好む：

にセル参照をハードコーディングする必要はありません。

getRowData（）を使用してグリッド全体を取得するのに特に適しています。これは、編集したばかりのセルを気にしないためです。

将来変更される可能性のあるjqGridによって生成されたマークアップを解析しようとしているのではありません。

ユーザーが保存している場合、編集セッションを終了することは、とにかく彼らが望む動作である可能性があります。

score 0 · Accepted Answer

ご存知のように、編集モードで HTML を返す getCell を使用するよりも良い解決策は、jquery を使用してフィールドに直接アクセスすることだと思います。あなたがやっているように解析しようとすることの問題は、それが入力フィールドに対してのみ機能し (select のようなものではない)、入力フィールドにいくつかのカスタマイズを行った場合には機能しないことです。以下は、input 要素と select 要素で動作し、1 行のコードのみです。

ondblClickRow: function(rowid) {
    var val = $('#' + rowid + '_MyCol').val();
}

score 0 · Accepted Answer

私の回避策は、元の値を含むオブジェクトをグリッド内の各 tr 要素にアタッチすることです。jqGrid が値を破棄する前に afterAddRecord コールバックを使用して値を取得し、jQuery の「データ」メソッドを使用してそれらを作業に格納しました。

例：

afterInsertRow: function( rowid, rowdata, rowelem ) {
  var tr = $("#"+rowid);
  $(tr).data("jqgrid.record_data", rowelem);
},

「rowelem」は、JSON データフィードまたは [jsonReader] (http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrifying_data#jsonreader_as_function) からのセル値の配列です。

次に、いつでも次を使用してこれらの属性を取得できます。

$(tr).data(“jqgrid.record_data”).

詳細: http://wojciech.oxos.pl/post/9423083837/fetching-original-record-values-in-jqgrid

score 0 · Accepted Answer

私が取得する前に：テキストボックスのhtmlタグのようなもの

しかし、これはその特定の列から値を取得するための解決策であり、機能してテストされています

function getValue(rowId, cellId) {
        var val = $("[rowId='"+rowId+"'][name='"+cellId+"']").val();
        return val;
       }

var values = getValue(rowId, 'cellid');

score 0 · Accepted Answer

これを拡張すると、それが得られると思います。 jqgrid からの元の行データの取得

score 0 · Accepted Answer

私はかなり間接的な方法を持っています。データには一意の ID が必要です。

まずはフォーマッターの設定

$.extend(true, $.fn.fmatter, {          
numdata: function(cellvalue, options, rowdata){
    return '<span class="numData" data-num="'+rowdata.num+'">'+rowdata.num+'</span>';
}
});

ColModel でこのフォーマッタを使用します。ID を取得するには (例: 選択された行)

var grid = $("#grid"), 
    rowId = grid.getGridPara('selrow'),
    num = grid.find("#"+rowId+" span.numData").attr("data-num");

(または、最新の jquery 1.4.4 では .data() を直接使用できます)

score 0 · Accepted Answer

インライン編集時にセルの値を取得するには、このイベント (または別の同様のイベント、ドキュメントを確認してください)をキャプチャする必要があります。

beforeSaveCell: 関数 (rowid、セル名、値、iRow、iCol) { }

値パラメーターには、現在編集されているセルの「値」があります。

行の残りの値を取得するには、getRowData() を使用します。

これで多くの時間を失いました。これが役立つことを願っています。

score -1 · Accepted Answer

受け取る afterEditCell イベントにサブスクライブしてみてください (rowid、cellname、value、iRow、iCol) ここで、value はセルの新しい値です

score -2 · Accepted Answer

getCol を使用して列の値を配列として取得し、関心のある行でインデックスを付けることができます。

var col = $('#grid').jqGrid('getCol', 'Sales', false);

var val = col[row];

jqgrid - 編集時にjqGridセル値を取得する方法

23 に答える 23

Related

Reference