jquery - 单击行时 jqgrid 重定向到另一个页面

Question

我正在尝试将 jqgrid list 用于特定项目。我阅读了发布的在线文档，但找不到解决我的问题的方法。我在列出和查看项目时没有问题。但我需要在每一行中有一个按钮，当单击该按钮时，浏览器应重定向到另一个页面(可以编辑该行。例如:？Section=news&Process=EditNews&NEWSID=1)。

我认为我已经接近解决方案，但现在陷入困境......

    <script type="text/javascript">

    var lastsel;

$(function() {

    $("#list").jqGrid({
            url: '/FLPM/cp/news.cs.asp?Process=ViewNews',
            datatype: 'xml',
            mtype: 'Get',
            height: '100%',
            colNames: ['Actions','ID #','Page', 'Category Name', 'Active', 'Date Entered'],
            colModel: [
                {name:'Actions', index:'Actions', width:100, sortable:false, search:false},
                {name:'ID', index:'ID', width:30},
                {name:'Title', index:'Title', width:360},
                {name:'Category', index:'Category', width:115},
                {name:'Active', index:'Active', width:40, editable:true, edittype:"select", editoptions:{value:"1:Yes;0:No"}},
                {name:'Date', index:'Date', width:126}, 
            ],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [10,20,30],
            sortname: 'Date', 
            sortorder: 'desc',
            viewrecords: true,
            imgpath: 'js/jqGrid/themes/basic/images',
            onSelectRow: function(id) { 
                if(id && id!==lastsel) {
                    $('#list').restoreRow(lastsel); 
                    $('#list').editRow(id,true); 
                    lastsel=id; 
                    } 
                }, 
            loadComplete: function(){ 
                var ids = jQuery("#list").getDataIDs(); 
                for(var i=0;i<ids.length;i++){ 
                    var cl = ids[i]; 
                    de = "<input style='height:25px;width:25px;' type='button' value='DE' onclick=location.href='?Section=news&Process=EditNews&NEWSID='; />";              
                    be = "<input style='height:25px;width:25px;' type='button' value='E' onclick=jQuery('#list').editRow("+cl+"); ></ids>"; 
                    se = "<input style='height:25px;width:25px;' type='button' value='S' onclick=jQuery('#list').saveRow("+cl+"); />"; 
                    ce = "<input style='height:25px;width:25px;' type='button' value='C' onclick=jQuery('#list').restoreRow("+cl+"); />"; 
                    jQuery("#list").setRowData(ids[i],{Actions:de+be+se+ce}) 
                } 
            }, 
            editurl: "custompages.cs.asp?Process=EditPage",             
    }).navGrid("#pager",{edit:true,add:false,del:true});    

});
    </script>

Answer 1

为了让它工作，我需要向 de 元素添加一个 ID:

id='"+cl+"_buttonEditTest' 

我还需要将 Actions 更改为 act 以使控件实际显示在每一行中:

jQuery("#list").setRowData(ids[i],{act:de+be+se+ce}) 

此外，您可能希望将行的 ID 附加到链接中:

onclick=location.href='?Section=news&Process=EditNews&NEWSID="+cl+"';

所以最终的代码是:

de = "<input style='height:25px;width:25px;' type='button' value='DE' onclick=location.href='?Section=news&Process=EditNews&NEWSID="+cl+"'; id='"+cl+"_buttonEditTest' />";              
be = "<input style='height:25px;width:25px;' type='button' value='E' onclick=jQuery('#list').editRow("+cl+"); ></ids>"; 
se = "<input style='height:25px;width:25px;' type='button' value='S' onclick=jQuery('#list').saveRow("+cl+"); />"; 
ce = "<input style='height:25px;width:25px;' type='button' value='C' onclick=jQuery('#list').restoreRow("+cl+"); />"; 
jQuery("#list").setRowData(ids[i],{act:de+be+se+ce}) ;