JQgrid将单元格设置为按'TAB'键 [英] JQgrid set cell focus on press 'TAB' key
问题描述
我是JQgrid的初学者。我已经开始通过添加自定义删除& amp;来实现JQGrid。重复的动作.Below是我的网格结构。
Hi,
I'm beginner in JQgrid. I have started implementing JQGrid by adding custom delete & duplicate actions.Below is my grid structure.
$("#jQGridDemo").jqGrid({
url: "<%= ConfigurationManager.AppSettings["WebApiUri"].ToString() %>" + "api/Person/GetDummyPersons",
datatype: "json",
colNames: ['Row No', 'Name', 'Age', 'Gender', 'Address', '', ''],
colModel: [
{ name: 'RowNo', label: 'Row No', index: 'RowNo', width: 150, editable: false, hidden: true },
{ name: 'sName', label: 'Name', index: 'sName', width: 150, editable: true, edittype: 'text' },
{ name: 'iAge', label: 'Age', index: 'iAge', width: 150, editable: true, edittype: 'text', editrules: { integer: true } },
{ name: 'sGen', label: 'Gender', index: 'sGen', width: 150, editable: true, edittype: 'select' },
{ name: 'sAddress', label: 'Address', index: 'sAddress', width: 160, editable: true, edittype: 'text' },
{
name: 'Delete', width: 20, sortable: false,
formatter: function () {
return "<img src='http://icons.iconarchive.com/icons/hopstarter/button/16/Button-Delete-icon.png'/>"
}
},
{
name: 'Duplicate', width: 20, sortable: false,
formatter: function () {
return "<img src='http://icons.iconarchive.com/icons/hopstarter/soft-scraps/16/File-New-icon.png'/>"
}
}
],
hidegrid: false,
width: '100%',
height: '100%',
scrollOffset: 0,
viewrecords: true,
rowNum: -1,
rownumbers : true,
caption: "Job Details",
cellEdit: true,
cellsubmit: 'clientArray',
editurl: 'clientArray',
pager: '#jQGridDemo_pager',
.......
因为我有行动键（del&在我的网格右侧，当用户点击TAB键时，我需要将注意力集中在这些键上。重点关注之后，我需要开始关注下一行的第一个单元格（在我的情况下为'sName'）。
我遇到很多例子，比如
Since i have action keys(del & dup) at right side of my grid, when users hitting TAB key I need to set focus on those keys. After key's focus again i need to start focus on next row's first cell('sName' in my case).
I come across many examples like
$("#" + id + "lg_description").focus();
即使我尝试过
Even I tried like
$('#1_sName').focus(); //To set focus onload very first time
什么都行不通。在检入渲染内容时，只有在特定单元格的鼠标点击时才会生成可编辑单元格1_sName。在最开始时，JQgrid只生成< td>内部没有任何内容的标签。（仅在点击特定单元格时，可编辑控件正在呈现）。
这里我没有任何帖子/保存。我只是想创建一个可编辑的网格。
我从谷歌尝试了更多的例子，但没有运气！帮我解决一些提示。
Nothing works. While checking in rendered content the editable cell "1_sName" is only generated on mouse click of an particular cell.At the very beginning JQgrid is simply generate "< td >" tags without any content inside.(only on clicking particular cell, the editable controls are rendering).
Here i dont have any post/save. I'm just trying to create an editable grid.
I have tried lot more examples from google but no luck !! help me out with some tips.
推荐答案
（ #jQGridDemo）。jqGrid（{
url： <％= ConfigurationManager.AppSettings [ WebApiUri ]。ToString（）％> + api / Person / GetDummyPersons，
datatype： json，
colNames：[' 行号'，' 名称'，' 年龄'，' 性别'，' 地址'，< span class =code-string>' '，' ']，
colModel：[
{name：' RowNo'，标签：' 行号'，索引：' RowNo'，宽度： 150 ，可编辑： false ，隐藏： true }，
{name：' sName'，label：' 名称' ，index：' sName'，width： 150 ，可编辑： true ，编辑类型：' text'}，
{name：' iAge'，label：' 年龄'，索引：' iAge'，宽度： 150 ，可编辑： true ，edittype：' text'，editrules：{integer： true }}，
{name：' sGen'，label：' Gender'，index：' sGen'，width： 150 ，可编辑： true ，edittype：' select'}，
{name：' sAddress'，label：' 地址'，索引：' sAddress'，width： 160 ，可编辑： true ，edittype：' text'}，
{
name：' 删除'，宽度： 20 ，可排序： false ，
formatter： function （）{
return < img src ='http：//icons.iconarchive.com/icons/hopstarter/button/16/Button-Delete-icon png格式'/>中
}
}，
{
name：' 重复'，宽度： 20 ，可排序： false ，
格式化程序：< span class =code-keyword> function （）{
return < img src ='http：//icons.iconarchive.com/icons/hopstarter/soft-scraps/16/File-New-icon.png'/>
}
}
]，
hidegrid： false ，
宽度：' 100％'，
height：' 100％'，
scrollOffset： 0 ，
viewrecords： true ，
rowNum：-1，
rownumbers： true ，
标题： 作业详细信息，
cellEdit ： true ，
cellsubmit：' clientArray' ，
editurl：' clientArray'，
pager：< span class =code-string>' ＃jQGridDemo_pager'，
.......
("#jQGridDemo").jqGrid({ url: "<%= ConfigurationManager.AppSettings["WebApiUri"].ToString() %>" + "api/Person/GetDummyPersons", datatype: "json", colNames: ['Row No', 'Name', 'Age', 'Gender', 'Address', '', ''], colModel: [ { name: 'RowNo', label: 'Row No', index: 'RowNo', width: 150, editable: false, hidden: true }, { name: 'sName', label: 'Name', index: 'sName', width: 150, editable: true, edittype: 'text' }, { name: 'iAge', label: 'Age', index: 'iAge', width: 150, editable: true, edittype: 'text', editrules: { integer: true } }, { name: 'sGen', label: 'Gender', index: 'sGen', width: 150, editable: true, edittype: 'select' }, { name: 'sAddress', label: 'Address', index: 'sAddress', width: 160, editable: true, edittype: 'text' }, { name: 'Delete', width: 20, sortable: false, formatter: function () { return "<img src='http://icons.iconarchive.com/icons/hopstarter/button/16/Button-Delete-icon.png'/>" } }, { name: 'Duplicate', width: 20, sortable: false, formatter: function () { return "<img src='http://icons.iconarchive.com/icons/hopstarter/soft-scraps/16/File-New-icon.png'/>" } } ], hidegrid: false, width: '100%', height: '100%', scrollOffset: 0, viewrecords: true, rowNum: -1, rownumbers : true, caption: "Job Details", cell true, cellsubmit: 'clientArray', editurl: 'clientArray', pager: '#jQGridDemo_pager', .......
因为我有行动键（del& amp;在我的网格右侧，当用户点击TAB键时，我需要将注意力集中在这些键上。重点关注之后，我需要开始关注下一行的第一个单元格（在我的情况下为'sName'）。
我遇到很多例子，比如
Since i have action keys(del & dup) at right side of my grid, when users hitting TAB key I need to set focus on those keys. After key's focus again i need to start focus on next row's first cell('sName' in my case).
I come across many examples like
（ ＃ + id + lg_description）。focus（ ）;
("#" + id + "lg_description").focus();
即使我尝试过
Even I tried like
（' ＃1_sName'）。焦点（）; // 第一次设置焦点onload
('#1_sName').focus(); //To set focus onload very first time
什么都行不通。在检入渲染内容时，只有在特定单元格的鼠标点击时才会生成可编辑单元格1_sName。在最开始时，JQgrid只生成< td>内部没有任何内容的标签。（仅在点击特定单元格时，可编辑控件正在呈现）。
这里我没有任何帖子/保存。我只是想创建一个可编辑的网格。
我从谷歌尝试了更多的例子，但没有运气！帮我解决一些提示。
Nothing works. While checking in rendered content the editable cell "1_sName" is only generated on mouse click of an particular cell.At the very beginning JQgrid is simply generate "< td >" tags without any content inside.(only on clicking particular cell, the editable controls are rendering).
Here i dont have any post/save. I'm just trying to create an editable grid.
I have tried lot more examples from google but no luck !! help me out with some tips.
这篇关于JQgrid将单元格设置为按'TAB'键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
