在jqgrid中单击警报框后，将焦点放在特定的单元格上 [英] focus a particular cell after make clicking alert box in jqgrid
问题描述
在单击jqgrid中的警报框后，我想关注特定的单元格值，请任何人提出解决方案
I wanna create a focus on a particular cell value after clicking the alert box in jqgrid please any one suggest a solution thanks in advance
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/css/ui.jqgrid.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/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.5.4/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.blockUI.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var lastsel2;
var myGrid = $('#rowed5');
var selRowId = myGrid.jqGrid ('getGridParam', 'selrow');
var celValue = myGrid.jqGrid ('getCell', selRowId, 'columnName');
jQuery("#rowed5").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'name',index:'name', width:150,editable: true, editoptions:{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true, edittype:"checkbox",editoptions: {value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true, edittype:"select",formatter:'select',
editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea",
editoptions:{rows:"2",cols:"10"}}
],
onSelectRow: function(id){
if(id && id!==lastsel2){
jQuery('#rowed5').editRow(id,true);
alert("hi");
//---here i missed alert after clicking this i want to focus on the cell that the user had already clicked--
setTimeout(function(){celValue.focus();},1);
//--here i get the particular cell value and i try to focus after clicking the alert box----
//-- i also try with $(this).focus as setTimeout(function(){$(this).focus();},1); but i did not get any possible output----
}
},
caption: "Input Types"
});
var mydata2 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FE"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"IN"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TN"},
{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"AR"},
{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FE"},
{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FE"},
{id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"AR"},
{id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TN"},
{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FE"}
];
for(var i=0;i<mydata2.length;i++)
jQuery("#rowed5").addRowData(mydata2[i].id,mydata2[i]);
});
</script>
</head>
<body>
<table id="rowed5" class="scroll"></table>
</body>
</html>
推荐答案
如果您使用最新的免费jqGrid (免费jqGrid是我开发的jqGrid的分支).它允许您如下实现onSelectRow
You get the most simple solution if you would use the latest source of free jqGrid which you can download from GitHub (free jqGrid is the fork of jqGrid which I develop). It allows you to implement onSelectRow as below
onSelectRow: function (rowid, status, e) {
var $self = $(this), savedRow = $self.jqGrid("getGridParam", "savedRow");
if (savedRow.length > 0 && savedRow[0].id !== rowid) {
//$self.jqGrid("restoreRow", savedRow[0].id);
$self.jqGrid("saveRow", savedRow[0].id);
}
$self.jqGrid("editRow", rowid, { focusField: e.target });
}
请参见演示. onSelectRow的3-d参数的target属性是单击的元素.可以使用editRow的focusField: e.target选项将焦点设置在单击的单元格中的输入/选择上.
See the demo. The target property of 3-d parameter of onSelectRow is the clicked element. One can use focusField: e.target option of editRow to set the focus on the input/select in the clicked cell.
如果需要使用alert但不想更改焦点，则可以将当前焦点保存在变量中，然后调用alert并将焦点设置在调用
If you need to use alert but you don't want to change the focus then you can save the current focus in a variable then call alert and set the focus on the element which had focus before calling alert:
var $focused = $(":focus"); // get focus
alert("hi");
$focused.focus();
请在此处查看相应的演示.
此外，我建议您将演示中修改后的代码与原始代码进行比较.例如，使用addRowData填充网格非常糟糕.而不是那个，应该使用jqGrid的data: mydata2参数.
Moreover I recommend you compare the modified code from my demo with your original code. For example it's very bad to fill the grid using addRowData. Instead of that one should use data: mydata2 parameter of jqGrid.
这篇关于在jqgrid中单击警报框后，将焦点放在特定的单元格上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
