Question

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

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

我的代码：

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未定义它在我的代码中所以不知道为什么它不能发现它猜测它的范围问题，任何想法如何解决它？

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

在此主题Answer here

中找到了答案

我为一个名为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}); 
            }

然后为该类创建了一个click函数，该函数读入包含正确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定义为全局，因此最高级别如jQuery。

我建议您查看实施相同行为的其他可能性：here和here。

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

jqgrid自定义编辑功能undefined

2 个答案: