我有一个jqgrid，我想将焦点放在onSelectRow中的特定单元格上。我发现可以使用$（'＃{RowID} _ {ColumnName}'）。focus（）为除我想要的字段以外的所有字段设置焦点。唯一将所需列分开的是将此列的edittype设置为“ select”。我需要为这些类型的单元格设置不同的焦点吗？
$("#jqgrid_results").jqGrid({
url: "/EmployeeTime/GetDetails?ID=" + catchID,
datatype: 'json',
mtype: 'Get',
height: 'auto',
colNames: ['ID', 'Actions', 'Employee', 'Hrs', 'Code', 'Category', 'Hrs', 'Code', 'Category', 'Hrs', 'Code', 'Category', 'Hrs', 'Code', 'Category', 'Hrs', 'Code', 'Category', 'Hrs', 'Code', 'Category', 'Hrs', 'Code', 'Category', 'Total Hrs', 'Notes'],
colModel: [{
key: true,
hidden: true,
name: 'ID',
index: 'ID'
}, {
name: 'act',
index: 'act',
sortable: false,
width: 75
}, {
name: 'Employee',
index: 'Employee',
editable: true,
edittype: "select",
editoptions: {
dataUrl: '@Url.Action("getEmployees")',
dataEvents: [
{
type: 'change',
fn: function (e) {
var selr = $('#jqgrid_results').jqGrid('getGridParam', 'selrow');
$.ajax({
type: "GET",
url: '/EmployeeTime/getEmployeeData',
data: { 'ID': $(e.target).val() },
success: function (data) {
if (data != null) {
$('#' + selr + '_Sun_Category').val(data);
$('#' + selr + '_Mon_Category').val(data);
$('#' + selr + '_Sat_Category').val(data);
}
return true;
},
error: function (error) {
console.log(error);
}
})
}
}]
},
editrules: { required: true },
formatter: parameterFormatter
}, {
name: 'Sun_Hrs',
index: 'Sun_Hrs',
align: "right",
formatter: 'number',
required: false,
width: 75,
editable: true,
editoptions: {
defaultValue: '0'
}
}, {
name: 'Sun_Code',
index: 'Sun_Code',
align: "right",
required: false,
width: 75,
editable: true,
edittype: "select",
editoptions: {
dataUrl: '@Url.Action("getPayrollCodes")'
},
editrules: { required: false },
formatter: parameterFormatter
},{
name: 'Sun_Category',
index: 'Sun_Category',
align: "right",
required: false,
width: 75,
editable: true,
edittype: "select",
editoptions: {
dataUrl: '@Url.Action("getPayrollCategories")'
},
editrules: { required: false },
formatter: parameterFormatter
}, {
name: 'Mon_Hrs',
index: 'Mon_Hrs',
align: "right",
formatter: 'number',
required: false,
width: 75,
editable: true,
editoptions: {
defaultValue: '0'
}
}, {
name: 'Mon_Code',
index: 'Mon_Code',
align: "right",
required: false,
width: 75,
editable: true,
edittype: "select",
editoptions: {
dataUrl: '@Url.Action("getPayrollCodes")'
},
editrules: { required: false },
formatter: parameterFormatter
}, {
name: 'Mon_Category',
index: 'Mon_Category',
align: "right",
required: false,
width: 75,
editable: true,
edittype: "select",
editoptions: {
dataUrl: '@Url.Action("getPayrollCategories")'
},
editrules: { required: false },
formatter: parameterFormatter
}, {
name: 'Sat_Hrs',
index: 'Sat_Hrs',
align: "right",
formatter: 'number',
required: false,
width: 75,
editable: true,
editoptions: {
defaultValue: '0',
dataEvents: [{
type: 'keypress'
}
}, {
name: 'Sat_Code',
index: 'Sat_Code',
align: "right",
required: false,
width: 75,
editable: true,
edittype: "select",
editoptions: {
dataUrl: '@Url.Action("getPayrollCodes")'
},
editrules: { required: false },
formatter: parameterFormatter
}, {
name: 'Sat_Category',
index: 'Sat_Category',
align: "right",
required: false,
width: 75,
editable: true,
edittype: "select",
editoptions: {
dataUrl: '@Url.Action("getPayrollCategories")'
},
editrules: { required: false },
formatter: parameterFormatter
}, {
name: 'Total_Hrs',
index: 'Total_Hrs',
align: "right",
formatter: 'number',
required: false,
width: 75,
}, {
name: 'Notes',
index: 'Notes',
required: true,
width: 200,
editable: true,
editoptions: {
dataEvents: [{
type: 'keydown',
fn: function (e) {
var selr = $('#jqgrid_results').jqGrid('getGridParam', 'selrow');
var key = e.charCode || e.keyCode;
if (key == jQuery.ui.keyCode.TAB || key == 9) {
var grid = $('#jqgrid_results');
//Save editing for current row
grid.jqGrid('saveRow', selr, false, 'clientArray');
//If at bottom of grid, create new row
Duplicate(selr);
}
}
}]
}
}],
rowNum: 25,
rowList: [20, 50, 100],
emptyrecords: 'No results to display',
pager: '#pjqgrid_results',
sortname: 'Employee',
toolbarfilter: true,
viewrecords: true,
multiselect: false,
sortorder: "asc",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
gridComplete: function () {
var ids = jQuery("#jqgrid_results").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<button class='btn btn-xs btn-default' data-original-title='Edit Row' onclick=\"jQuery('#jqgrid_results').editRow('" + cl + "');\"><i class='fa fa-pencil'></i></button>";
se = "<button class='btn btn-xs btn-default' data-original-title='Save Row' onclick=\"jQuery('#jqgrid_results').saveRow('" + cl + "',false,'clientArray');\"><i class='fa fa-save'></i></button>";
ca = "<button class='btn btn-xs btn-default' data-original-title='Cancel' onclick=\"jQuery('#jqgrid_results').delRowData('" + cl + "');\"><i class='fa fa-times'></i></button>";
jQuery("#jqgrid_results").jqGrid('setRowData', ids[i], {
act: be + se + ca
});
}
},
caption: "Time Details",
onSelectRow: function (rowid, e) {
$("#" + rowid + "_Employee").focus();
//$("#" + rowid + "_Mon_Hrs").focus();
},
});
答案 0 :(得分：0)
使用onSelectRow编写方式时，它不会聚焦于任何字段。仅当该字段处于编辑模式时（即，您编辑行时），该字段才会被聚焦。
解释您的工作。
仅当您单击使用自定义按钮创建的编辑图标时才执行编辑模式，而无论是否是编辑按钮，每次单击行独立时都会执行onSelectRow事件。
为了聚焦某个字段，您无需使用onSelectRow，而是在editRow方法中设置一个参数，但这取决于所使用的jqGrid的版本。
此外，调用editRow的方式将使设置此参数（即focusField）变得困难。我建议您在可以使用所需参数的editRow内调用创建自己的函数。如果您阅读此文档，那就太好了。
function myeditRow( id )
{
jQuery('#jqgrid_results').editRow(id, {focusField: 5 });
}
...
gridComplete: function () {
var ids = jQuery("#jqgrid_results").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<button class='btn btn-xs btn-default' data-original-title='Edit Row' onclick=\"myeditRow('" + cl + "');\"><i class='fa fa-pencil'></i></button>";
se = "<button class='btn btn-xs btn-default' data-original-title='Save Row' onclick=\"jQuery('#jqgrid_results').saveRow('" + cl + "',false,'clientArray');\"><i class='fa fa-save'></i></button>";
ca = "<button class='btn btn-xs btn-default' data-original-title='Cancel' onclick=\"jQuery('#jqgrid_results').delRowData('" + cl + "');\"><i class='fa fa-times'></i></button>";
jQuery("#jqgrid_results").jqGrid('setRowData', ids[i], {
act: be + se + ca
});
}
},
但是，如果您使用旧版本的jqGrid，则不会发生这种情况。