web-dev-qa-db-ja.com

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

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

31
raouf

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

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

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

使用例:

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

危険ですが、動作します。

17
Pawel

ユーザー機能を使用した基本的なソリューションの例を次に示します。

    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;
}
15
raouf

何時間も悲嘆した後、私はこれが最も簡単な解決策であることがわかりました。行データを取得する前にこれを呼び出します:

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

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

6
Aidan

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

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

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

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

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

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

4
Justin Ethier

こんにちは、私もこの問題に出会いました。最後に、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');
2
LLQ

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

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

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'] + ',';
        });
2
David C

次の方法で入手できます... !!

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
1

あなたの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); 
1
zaheerprince

これは私の解決策です:

                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;
                }
1
hovno

私の場合、セルの内容はフォーマッターの結果として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セルの未加工の値にアクセスする方法を他の誰かが探している場合に備えて、これを投稿します。

1
timbrown

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

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

私には解決策があります:1. this.valueを使用して、編集行の現在の編集値を取得します。 2.セルがフォーカスを失ったときに、セルの値を非表示フィールドに保存します。 3.必要なときに隠しフィールドを読みます。

コード:

 colModel="[
       { name: 'Net', index: 'Net', editable:true, editoptions: { dataEvents: [ { type: 'focusout', fn: function(e) {$('#HiddenNet').val(this.value);} }] }, editrules:{custom:true,}},
       { name: 'Tax', index: 'Tax', editable:true, editoptions: { dataEvents: [ { type: 'focus', fn: function(e) {this.value=$('#HiddenNet').val(); } }] }, editrules:{custom:true}}
    ]" 

がんばろう

1
user2066558

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

しかし、その特定の列から値を取得し、動作してテストするソリューションは次のとおりです

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

var values = getValue(rowId, 'cellid');
0
Pradeep nain

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

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

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

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

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

  • セル参照をハードコードする必要はありません。
    • GetRowData()を使用してグリッド全体を取得するのに特に適しています。これは、編集中のセルを気にしないためです。
    • 将来変更される可能性のあるjqGridによって生成されたマークアップを解析しようとはしていません。
    • ユーザーが保存している場合、編集セッションを終了することは、とにかく望む動作です。
0
StuartQ

かなり間接的な方法があります。データには一意の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()を使用できます)

0
jackysee

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

0
David

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

例:

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:retrieving_data#jsonreader_as_function)からのセル値の配列です。

その後、いつでも次を使用してこれらの属性をフェッチできます。

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

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

0

インライン編集時にセル値を取得するには、このイベント(または別の同様のイベント、 documentation )をキャプチャする必要があります。

beforeSaveCell:関数(rowid、celname、value、iRow、iCol){}

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

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

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

0
Cacho Santa

JavaScriptを使用して編集値を取得します。

document.getElementById( 'idCell')。value

この情報が誰かに役立つことを願っています。

0
Ignacio Ayuste