编辑和删除按钮不会显示在每一行上

时间:2014-05-06 04:00:12

标签: javascript jquery html jqgrid

我正在开发一个jqgrid,我需要在每一行上显示Edit和Save按钮。我是第一次使用它,我无法在每行显示按钮。现在它只显示在最后一行。这是我的HTML和脚本。

HTML:

    <table id="grid"></table>
    <div id="pager"></div>

Script: 

    <script type="text/javascript">
    var mydata = [
        { name : "abc1", id : "12345", address : "capetown"},
                { name : "abc2", id : "45474", address : "capetown"},
                { name : "abc3", id : "54142", address : "capetown"},
                { name : "abc4", id : "87845", address : "capetown"},
                { name : "abc5", id : "54145", address : "capetown"},
                { name : "abc6", id : "54896", address : "capetown"},
                { name : "abc7", id : "52514", address : "capetown"}
    ];

    $("#grid").jqGrid({ 
    data: mydata, 
    datatype: 'local',
    width: 450,
    emptyrecords: "Nothing to display",
    //autowidth: true,
        height: 'auto',
    colNames:['Actions', 'Emp Name','Emp ID','Address'], 
    colModel:[
        {name:'act',index:'act', width:75, sortable:false},
        {name:'emp_name', index:'emp_name', key: true, width:100, editable:true},
        {name:'emp_id', index:'emp_id', width:80, editable:true},
        {name:'addr', index:'addr', width:100, editable:true}
    ], 
    gridComplete: function(){
        var ids = jQuery("#grid").jqGrid('getDataIDs');
        for(var i=0;i < ids.length;i++){
            var cl = ids[i];
            a1 = "<input style='height:22px;width:40px;' type='button' value='Edit' onclick=\"jQuery('#grid').editRow('"+cl+"');\"  />"; 
            b1 = "<input style='height:22px;width:40px;' type='button' value='Save' onclick=\"jQuery('#grid').saveRow('"+cl+"');\"  />"; 
            jQuery("#grid").jqGrid('setRowData',ids[i],{act:a1+b1});
        }   
    },
    pager: '#pager', 
    rowNum: 4, 
    pgbuttons: true,
    altRows: true,
    sortname: 'emp_name',
    viewrecords: true, 
    sortorder: "asc", 
});
//jQuery("#grid").jqGrid('navGrid',"#pager",{edit:false,add:false,del:false});
</script>

我在控制台中看不到任何未定义的错误。任何想法,如何让按钮在每一行显示它?

0 个答案:

没有答案