jqgrid自定义编辑功能未定义

Question

我刚刚开始玩 jqgrid 并遇到一个奇怪的问题？

我从 jqgrid 演示网站复制了自定义编辑示例，并添加了一个额外的按钮

我的代码：

gridComplete: function(){ 
            var ids = jQuery("#rowed2").jqGrid('getDataIDs'); 
            for(var i=0;i < ids.length;i++){ var cl = ids[i]; 
                be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#rowed2').editRow('"+cl+"');\" />"; 
                se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('"+cl+"');\" />"; 
                ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('"+cl+"');\" />";
                gc = "<input style='height:22px;width:20px;' type='button' value='G' onclick=\"geocodeMe("+cl+");\" />";
                jQuery("#rowed2").jqGrid('setRowData',ids[i],{Actions:be+se+ce+gc}); 
            } 
        }

当我单击标记为 G 的按钮时，我应该调用我的函数，

但我收到一个 js 错误，指出 geocodeMe 未定义 它在我的代码中，所以不知道为什么它找不到它，我猜测它是一个范围问题，有什么想法如何修复它吗？？？

地理编码功能：

function geocodeMe(myID) {
        // set default region
        region = 'uk';
        // address not empty
        removemarkers();
        $('#geo_detail').html('<label>Geocoding address...</label>');
        // lookup the address
        var myData = $("#rowed2").getRowData(myID);
        address = myData.geoaddr_mdt;
        geocoder.geocode( {'address':address,'region':region}, function(results, status) {
            // if the address was found
            if(status == google.maps.GeocoderStatus.OK) {
                $str = '<label>Geocode Successful<br> Lattitude: '+results[0].geometry.location.lat()+' Longitude: '+results[0].geometry.location.lng()+'<br> The address is displayed below and will be stored in the database.<br> If the address is incorrect you may edit it before saving the location to the database.<br>If the marker is in the wrong location you may drag it to where you  believe it should be.</label>';
                $('#geo_detail').html($str);
                // insert lat/long into form
                $('#lat').val(results[0].geometry.location.lat());
                $('#lng').val(results[0].geometry.location.lng());
                // create new lat/long object
                latlng = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng());
                $('#disp_addr').val(address);
                $('#form_buttons').show();
                $('#detail_address').show();
                //reverselookup(results[0].geometry.location.lat(), results[0].geometry.location.lng());
                // set zoom option
                map.setZoom(15);
                // center the map on the new location
                map.setCenter(results[0].geometry.location);
                createMarker(map, latlng, true, false);

                if(savetype ='update'){
                    savedata('update');
                };
                if(savedata='save'){
                    savedata('save');
                };
            } else {
                // display error
                $('#geo_detail').append('<label>Geocoder failed to retrieve address: '+status+'</label>');
                $('#disp_addr').val($('#geo_addr').val());
            };
        });
    };

Answer 1

在此线程中找到了答案 答案在这里

我为按钮创建了一个名为 geocode me 的类，

gridComplete: function(){ 
            var ids = jQuery("#rowed2").jqGrid('getDataIDs'); 
            for(var i=0;i < ids.length;i++){ var cl = ids[i]; 
                be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#rowed2').editRow('"+cl+"');\" />"; 
                se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('"+cl+"');\" />"; 
                ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('"+cl+"');\" />";
                gc = "<input style='height:22px;width:20px;' type='button' value='G' class='geocodeMe' rel='"+cl+"' />";
                jQuery("#rowed2").jqGrid('setRowData',ids[i],{Actions:be+se+ce+gc}); 
            } 

然后为该类创建了一个单击函数，该函数读取持有正确 ID 的 rel 属性：

$('body').delegate('.geocodeMe', 'click', function() {
        var myID = $(this).attr('rel');
        var myData = $("#rowed2").getRowData(myID);
        rest of function code.............

    });

Answer 2

如果您使用 onclick=\"geocodeMe("+cl+")，则函数 geocodeMe 必须定义为 global，因此在顶层就像 jQuery 一样，

我建议您寻找实现相同行为的其他可能性：此处和此处此外

，您应该清楚，如果网格中有大量项目（大约 100 个或 100 个），则 for 循环中枚举 jqGrid('getDataIDs') 的所有项目可能会非常慢。更有效的方法是使用描述的 jQuery 选择 这里。更有效的方法是使用 table 元素和 cells 的 rows 数组任何 rows 元素内的 属性。请参阅此处 还有一个答案，其中还包括相应的演示。