编辑时如何获取jqGrid单元格值答案

【问题标题】：How to get a jqGrid cell value when editing编辑时如何获取jqGrid单元格值
【发布时间】：2010-12-19 00:46:20
【问题描述】：

在线编辑时如何获取 jqGrid 单元格值（getcell 和 getRowData 返回单元格内容，而不是输入元素的实际值）。

【问题讨论】：

标签： jqgrid cell

【解决方案1】：

我使用 javascript 获取编辑值：

document.getElementById('idCell').value

我希望这些信息对某人有用。

【讨论】：

【解决方案2】：

在我得到之前：文本框的html标签类似于

但这是从该特定列获取值的解决方案，工作和测试

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

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

【讨论】：

【解决方案3】：

获取具有给定行 ID 和单元格 ID 的单元格值的通用函数

在你的 js 代码函数中创建：

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

使用示例：

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

狡猾，但有效。

【讨论】：

【解决方案4】：

试试这个，它会给你特定列的值

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

【讨论】：

我很困惑，认为 rowData 是一个属性，但它只是：jQuery('#GridTableId').getRowData(id)['name'] 以防有人犯我犯的同样错误
为什么对这个答案投赞成票，它根本不是问题的答案。
@Meraj：因为每个人都来这里阅读问题标题:)
这是不对的。一旦您处于编辑模式，这将不起作用。正如 OP 所说，您将获得 HTML，而不是数据值。

【解决方案5】：

它非常简单地在你的 grid.php 中编写代码并将值传递给另一个 page.php
这样就可以得到其他列单元格的值了

但是任何人都可以在花哨的盒子或颜色盒子中制作类似的 window.open(path to pass value....)？

$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);

【讨论】：

【解决方案6】：

在我的情况下，我的单元格的内容是 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 单元格的原始值。

【讨论】：

【解决方案7】：

你可以通过以下方式获取...！！

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

【讨论】：

该列表仅是 jqgrid id @sathya
你能帮我解答这个问题吗...stackoverflow.com/questions/24647113/…

【解决方案8】：

我有一个解决方案： 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}}
    ]"

祝你好运

【讨论】：

【解决方案9】：

你好，我也遇到了这个问题。最后我通过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');

【讨论】：

如果.val() 不存在，请查看我的答案，基于我在其上的innerText 之后的选择器我的容器HTML，因此使用.text() 代替了诀窍。 @LLQ 感谢您为我指明了正确的方向！

【解决方案10】：

这是我的解决方案：

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

【讨论】：

【解决方案11】：

我认为艾丹的回答是迄今为止最好的。

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

这会提交任何当前的编辑，让您访问真正的价值。我更喜欢它，因为：

您不必在其中硬编码任何单元格引用。

它特别适合使用 getRowData() 来获取整个网格，因为它不关心您刚刚编辑的是哪个单元格。

您没有尝试解析 jqGrid 生成的某些标记，这些标记将来可能会发生变化。

如果用户正在保存，那么结束编辑会话很可能是他们想要的行为。

【讨论】：

【解决方案12】：

我的解决方法是将包含原始值的对象附加到网格中的每个 tr 元素。我使用 afterAddRecord 回调在 jqGrid 丢弃它们之前获取值，并使用 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:retrieving_data#jsonreader_as_function) 的单元格值数组

然后我可以随时使用以下方法获取这些属性：

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

【讨论】：

【解决方案13】：

你可以直接用这个....

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

【讨论】：

【解决方案14】：

经过数小时的悲伤后，我发现这是最简单的解决方案。在获取行数据之前调用它：

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

它将保存任何当前的编辑，如果网格中没有行则不会抛出。

【讨论】：

太棒了。这为我做到了。明确一点，在调用$('#yourgrid').jqGrid("getCell", rowId, 'column')之前需要调用上面的代码。

【解决方案15】：

为了在行内编辑时获取单元格值，您需要捕获此事件（或其他类似事件，请查看documentation）：

beforeSaveCell: 函数 (rowid, celname, value, iRow, iCol) { }

在 value 参数中，您有当前编辑的单元格的“值”。

要获取行中的其余值，请使用 getRowData()

我为此浪费了很多时间，希望这会有所帮助。

【讨论】：

【解决方案16】：

我有一个相当间接的方法。您的数据应该有一个唯一的 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");

（或者您可以直接使用 .data() 获取最新的 jquery 1.4.4）

【讨论】：

【解决方案17】：

基本上，您必须在访问单元格内容之前保存该行。

如果这样做，那么您将获得单元格的值，而不是单元格处于编辑模式时出现的标记。

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

【讨论】：

【解决方案18】：

我认为比使用 getCell 更好的解决方案，如您所知，在编辑模式下返回一些 html 是使用 jquery 直接访问字段。尝试像您所做的那样进行解析的问题在于，它仅适用于输入字段（而不是 select 之类的东西），并且如果您对输入字段进行了一些自定义，它将不起作用。以下将使用输入和选择元素，并且只有一行代码。

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

【讨论】：

这不起作用，并且您的 JQuery 选择器错误，应该类似于 $('#'+rowid+' [aria- describeby$=_'+'colName'+']')。但这得到了单元格，你仍然无法在没有解析的情况下检索值。
非常适合我。 “单元格”是指吗？我所看到的是这将获得编辑控件的值，无论是什么，并且假设您没有按照原始答案中的说明对输入控件进行任何自定义。

【解决方案19】：

我认为对此的扩展会为您提供。 retrieving-original-row-data-from-jqgrid

【讨论】：

【解决方案20】：

尝试订阅 afterEditCell 事件，它将收到 (rowid, cellname, value, iRow, iCol) 其中 value 是您的单元格的新值

【讨论】：

【解决方案21】：

这是一个带有用户功能的基本解决方案示例。

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

【讨论】：

如果设置，内容总是包含 value 属性，后跟 name 属性。
这不起作用。它没有拉出选择的值，只是第一个？
这部分是我检查空值所需的全部内容：$('#grid').getCell(rowid, 'MyCol');

【解决方案22】：

如您所说，according to the jqGrid documentation 用于 getCell 和 getRowData：

在编辑行或单元格时不要使用此方法。这将返回单元格内容，而不是输入元素的实际值

由于这两种方法都不会直接返回您的数据，因此您必须使用它们来返回单元格内容本身，然后对其进行解析，也许使用 jQuery。如果 jqGrid 的未来版本可以提供一种方法来自己进行某些解析，和/或提供一个 API 使其更简单，那就太好了。但另一方面，这真的是一个经常出现的用例吗？

或者，如果您可以更详细地解释您的原始问题，则可能还有其他选择。

【讨论】：

完全没有问题。但令我感到非常惊讶的是，不解析内容或调用用户函数就无法直接获取 jqgrid 单元格值！...
好吧，不看源代码我想原因是在内联编辑期间网格添加标记以显示编辑控件。此时 getCell / getRowData 函数不能按原样使用，因为网格中的数据可能会从其下方更改出来。在这种情况下，网格必须足够聪明才能自己进行解析，这是当前用户代码必须做的。最好的解决方案可能是让网格尝试自行解析，但如果（例如）您使用尚不支持的控件，请提供一些用户 API（事件？）来覆盖网格的代码。

【解决方案23】：

您可以使用 getCol 将列值作为数组获取，然后按您感兴趣的行对其进行索引。

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

var val = col[row];

【讨论】：

这行不通。 getCol 返回与 getCell 和 getRowData 相同的结果：单元格内容而不是输入元素的实际值...