jqgrid row id和gridrow id

时间:2011-05-27 13:28:56

标签: javascript jquery 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' alt='Edit Location' onclick=\"jQuery('#rowed2').editGridRow('"+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+"');\" />";
                    fl = "<input style='height:22px;width:50px;' type='button' value='Find' alt='Find Location' class='findMe' rel='"+cl+"' />";
                    gc = "<input style='height:22px;width:50px;' type='button' value='Geo' class='geocodeMe' rel='"+cl+"' />";
                    jQuery("#rowed2").jqGrid('setRowData',ids[i],{Actions:fl+gc}); 
                } 
            }

对于我的编辑删除功能,它将jqgrid行id作为id参数发布,这需要是记录集ID,因此我可以过滤要编辑/删除的记录。 所以我将id_~mdt colulm设置为key:true,因此它将此作为id传递。

现在我无法使用以下方法检索网格行id :(它之前返回了gridrow ref,现在它返回recordId)

ids = jQuery("#rowed2").jqGrid('getDataIDs');

那我现在如何重新审视gridrowId ???放入我的按钮的rel属性

我假设我应该使用除getRowIds以外的其他内容,例如获取GridRowID或其他内容,但无法在wiki中找到使用的内容......

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' alt='Edit Location' onclick=\"jQuery('#rowed2').editGridRow('"+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+"');\" />";
                    fl = "<input style='height:22px;width:50px;' type='button' value='Find' alt='Find Location' class='findMe' rel='"+cl+"' />";
                    gc = "<input style='height:22px;width:50px;' type='button' value='Geo' class='geocodeMe' rel='"+cl+"' />";
                    jQuery("#rowed2").jqGrid('setRowData',ids[i],{Actions:fl+gc}); 
                } 
            }
        }); 

继承我的完整代码并使用col设置:

myGrid = jQuery("#rowed2").jqGrid({ 
        url:'data/stokistdata_s_json.php?q=3', 
        datatype: "json",
        mtype: "POST", 
        rowNum:10, 
        rowList:[50,100,150,200,300,400,500,600], 
        pager: '#prowed2', 
        sortname: 'name_mdt', 
        viewrecords: true, 
        gridview:true,
        sortorder: "asc", 
        rowNum:50, 
        scroll: true, 
        editurl: "data/server.php", 
        caption:"Stockist's and Orchid days",
        colNames:[
            'Actions',
            'id',
            'Type', 
            'Name', 
            'Geo Address',
            'Display Address',
            'Telephone',
            'Email', 
            'website', 
            'lat', 
            'lng', 
            'flag', 
            'description', 
            'active'
        ], 
        colModel:[{
            name:'Actions',
            index:'Actions',
            width:100,
            sortable:false,
            search:false
        }, {
            name:'id_mdt',
            index:'id_mdt',
            width:15,
            align:"left",
            sortable:true,
            search:false,
            hidden: true, 
            editable: true, 
            editrules: { edithidden: true }, 
            editoptions:{readonly:true},
            hidedlg: true,
            key: true
        }, {
            name:'id_etp',
            index:'id_etp', 
            width:90, 
            align:"left",
            sortable:true,
            editable:true,
            edittype:"select",
            formatter:'select',
            editoptions:{value:{1:'Stokist',0:'Orchid Day'}},
            editrules:{required:true},
            search:true,
            stype:'select',
            sopt: ['eq'],
            searchoptions:{value:{'':'All',1:'Stockist',2:'Orchid Day'}}
        },{
            name:'Name_mdt',
            index:'Name_mdt',
            align:"left", 
            width:150,
            editable:true,
            editrules:{required:true},
            search:true,
            stype:'text',
            sopt:['cn']
        }, {
            name:'geoaddr_mdt',
            index:'geoaddr_mdt',
            width:150, 
            align:"left",
            editable:true,
            search:false,
            edittype:"textarea", 
            editoptions:{rows:"3",cols:"30"}
        }, {
            name:'displayaddr_mdt',
            index:'displayaddr_mdt', 
            width:150, 
            align:"left",
            editable:true,
            search:false,
            edittype:"textarea", 
            editoptions:{rows:"3",cols:"30"}
        }, {
            name:'telephone_mdt',
            index:'telephone_mdt', 
            width:80,
            align:"left",
            editable:true,
            search:false
        }, {
            name:'email_mdt',
            index:'email_mdt', 
            editrules:{email:true, required:false},
            width:80, 
            align:"left",
            sortable:false,
            editable:true,
            search:false
        }, {
            name:'website_mdt',
            index:'website_mdt', 
            editrules:{url:true, required:false},
            width:80, 
            align:"left",
            sortable:false,
            editable:true,
            search:false
        }, {
            name:'lat_mdt',
            index:'lat_mdt', 
            width:40, 
            align:"left",
            sortable:false,
            editable:true,
            search:false
        } , {
            name:'lng_mdt',
            index:'lng_mdt', 
            width:40, 
            align:"left",
            sortable:false,
            editable:true,
            search:false
        }, {
            name:'flag_mdt',
            index:'flag_mdt', 
            width:20, 
            align:"left",
            sortable:true,
            editable:true,
            edittype:"select",
            editoptions: {value:{1:'Flagged',0:'No Flag'}},
            search:true,//
            stype:'select',
            searchoptions:{value:{'':'All',1:'Flagged',0:'No Flag'}}//{value:":Both;1:Flagged;0:No Flag"}
        }, {
            name:'description_mdt',
            index:'description_mdt', 
            width:150, 
            align:"left",
            sortable:false,
            editable:true,
            search:false,
            edittype:"textarea", 
            editoptions:{rows:"3",cols:"30"}
        }, {
            name:'active_mdt',
            index:'active_mdt', 
            width:20, 
            align:"left",
            sortable:true,
            editable:true,
            edittype:"select",
            editoptions: {value:{1:'Active',0:'Hidden'}},
            search:true,//
            stype:'select',
            searchoptions:{value:{'':'All','1':'Active','0':'Hidden'}} //{value:":Both;1:Active;0:Hidden"}
        }], search : {
             caption: "Search...",
             Find: "Find",
             Reset: "Reset",
             matchText: " match",
             rulesText: " rules"
       },

        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' alt='Edit Location' onclick=\"jQuery('#rowed2').editGridRow('"+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+"');\" />";
                fl = "<input style='height:22px;width:50px;' type='button' value='Find' alt='Find Location' class='findMe' rel='"+cl+"' />";
                gc = "<input style='height:22px;width:50px;' type='button' value='Geo' class='geocodeMe' rel='"+cl+"' />";
                jQuery("#rowed2").jqGrid('setRowData',ids[i],{Actions:fl+gc}); 
            } 
        }
    }); 

    jQuery("#rowed2").jqGrid('navGrid',"#prowed2",
        {edit:true,add:true,del:true,search:true,refresh:true},
        {closeOnEscape:true, recreateForm: true, width:500},
        {closeOnEscape:true, recreateForm: true, width:500}    // Add options

    ); 
    myGrid.jqGrid('filterToolbar',{defaultSearch:'cn',stringResult:true});
});

2 个答案:

答案 0 :(得分:5)

我不知道我是否完全理解你的问题。

通常,您的行ID应该是您的记录ID,除非您在传递JSON数据时指定其他ID 最好的选择是将您的记录ID传递给jqGrid,以便在必须执行某些CRUD操作时可以引用数据库行。

如果您想获取其他一些字段,可以使用:

var ret = myGrid.jqGrid('getRowData', id);

现在您可以访问网格的列:ret [0]

答案 1 :(得分:3)

我知道这是一篇旧帖子,但我遇到了类似的问题,我无法让接受的邮政编码工作。

jqGrid有各种各样的行,所以我给了我的按钮相同的类名,并在按钮的单击功能中获得了最接近的tr,id属性,它对我来说效果很好。

    $('.buttonClassName').click(function (){
        var row = $(this).closest("tr").attr("id")
        alert(row);
    });