JqG​​rid设置对SelectRow的关注不起作用

JqG​​rid设置对SelectRow的关注不起作用

本文介绍了JqG​​rid设置对SelectRow的关注不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个jqgrid,当用户单击一行中有一个单元格时,我需要专注于单击的单元格,而不是第一个可编辑的单元格.

I have a jqgrid which i need to focus on the clicked cell rather than the first editable cell when the user clicks on a cell with in a row.

我正在使用oleg发布的这段代码,但它并没有关注所选的单元格.

I am using this code posted by oleg but it is not focusing on the selected cell.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>http://stackoverflow.com/questions/6536654/how-to-edit-the-selected-cell-on-jqgrid/6538102#6538102</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/css/ui.jqgrid.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/js/jquery.jqGrid.src.js"></script>

    <script type="text/javascript">
    //<![CDATA[
        $(document).ready(function () {
            'use strict';
            var mydata = [
                    {id:"1", invdate:"2007-10-01",name:"test",  note:"note",  amount:"200.00",tax:"10.00",closed:true, ship_via:"TN",total:"210.00"},
                    {id:"2", invdate:"2007-10-02",name:"test2", note:"note2", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE",total:"320.00"},
                    {id:"3", invdate:"2007-09-01",name:"test3", note:"note3", amount:"400.00",tax:"30.00",closed:false,ship_via:"FE",total:"430.00"},
                    {id:"4", invdate:"2007-10-04",name:"test4", note:"note4", amount:"200.00",tax:"10.00",closed:true ,ship_via:"TN",total:"210.00"},
                    {id:"5", invdate:"2007-10-31",name:"test5", note:"note5", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE",total:"320.00"},
                    {id:"6", invdate:"2007-09-06",name:"test6", note:"note6", amount:"400.00",tax:"30.00",closed:false,ship_via:"FE",total:"430.00"},
                    {id:"7", invdate:"2007-10-04",name:"test7", note:"note7", amount:"200.00",tax:"10.00",closed:true ,ship_via:"TN",total:"210.00"},
                    {id:"8", invdate:"2007-10-03",name:"test8", note:"note8", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE",total:"320.00"},
                    {id:"9", invdate:"2007-09-01",name:"test9", note:"note9", amount:"400.00",tax:"30.00",closed:false,ship_via:"TN",total:"430.00"},
                    {id:"10",invdate:"2007-09-08",name:"test10",note:"note10",amount:"500.00",tax:"30.00",closed:true ,ship_via:"TN",total:"530.00"},
                    {id:"11",invdate:"2007-09-08",name:"test11",note:"note11",amount:"500.00",tax:"30.00",closed:false,ship_via:"FE",total:"530.00"},
                    {id:"12",invdate:"2007-09-10",name:"test12",note:"note12",amount:"500.00",tax:"30.00",closed:false,ship_via:"FE",total:"530.00"}
                ],
                grid = $("#list"), lastSel = -1;

            grid.jqGrid({
                datatype:'local',
                data: mydata,
                colNames:['Inv No','Date','Client','Amount','Tax','Total','Closed','Shipped via','Notes'],
                colModel:[
                    {name:'id',index:'id',width:70,align:'center',sorttype:'int',hidden:true},
                    {name:'invdate',index:'invdate',width:80,align:'center',sorttype:'date',
                     formatter:'date',formatoptions: {newformat:'m/d/Y'},datefmt:'m/d/Y'},
                    {name:'name',index:'name',width:70,editable:true},
                    {name:'amount',index:'amount',width:70,formatter:'number',align:'right',editable:true},
                    {name:'tax',index:'tax',width:50,formatter:'number',align:'right',editable:true},
                    {name:'total',index:'total',width:60, formatter:'number',align:'right',editable:true},
                    {name:'closed',index:'closed',width:60,align:'center',editable:true,
                     formatter:'checkbox',edittype:'checkbox',editoptions:{value:'Yes:No',defaultValue:'Yes'}},
                    {name:'ship_via',index:'ship_via',width:90,align:'center',formatter:'select',editable:true,
                     edittype:'select',editoptions:{value:'FE:FedEx;TN:TNT;IN:Intim',defaultValue:'Intime'}},
                    {name:'note',index:'note',width:70,sortable:false,editable:true}
                ],
                rowNum:10,
                rowList:[5,10,20],
                pager: '#pager',
                gridview:true,
                rownumbers:true,
                sortname: 'invdate',
                viewrecords: true,
                sortorder: 'desc',
                caption:'Just simple local grid',
                height: '100%',
                editurl: 'clientArray',
                beforeSelectRow: function(rowid) {
                    if (rowid !== lastSel) {
                        grid.jqGrid('restoreRow',lastSel);
                        lastSel = rowid;
                    }
                    return true;
                },
               onSelectRow: function (rowid, status, e) {


                    var p = grid[0].p;
                    if ((p.multiselect && $.inArray(rowid, p.selarrrow) < 0) || rowid !== p.selrow) {
                        // if the row are still non-selected
                        grid.jqGrid("setSelection",rowid,true);
                    }
                    /*grid.jqGrid('editRow',rowid,true,function(){
                       // $("input, select",e.target).focus();
                    });*/
                    grid.jqGrid('editRow',rowid,true);
                   $("input, select",e.target).focus();
                    return;
                }
            });
            grid.jqGrid('gridResize', { minWidth: 450, minHeight: 150 });
        });
    //]]>
    </script>
</head>
<body>
    <table id="list"><tr><td/></tr></table>
    <div id="pager"></div>
</body>
</html>

推荐答案

问题在于,可以将<input>元素放在之后$("input, select",e.target).focus();.下一个原因:可以将焦点设置为执行设置的焦点所在行之后的第一个可编辑元素 .

The problem is that the <input> element could be placed after the line $("input, select",e.target).focus(); will be executed. The next reason: the focus could be set to the first editable element after the line where you set focus will be executed.

我认为您可以通过将.focus()的调用放在setTimeout内部并留有足够的超时时间来解决该问题:

I think that you can solve the problem by placing the call of .focus() inside of setTimeout with large enough timeout:

var $clickedCell = $(e.target).closest("td");
setTimeout(
    $clickedCell.find("input, select").focus();
, 100);

这篇关于JqG​​rid设置对SelectRow的关注不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-14 10:45