IgGrid 更新功能 EditMode 'row' 和 'cell'(制表符丢失焦点和验证)
IgGrid updating feature EditMode 'row' and 'cell' (tab-lost focus and validations)
我正在使用基于 jquery 的 IgGrid,我正在尝试按照以下方式设置网格:
function igGridBind() {
$("#JournalGrid").igGrid({
dataSourceType: 'json',
dataSource: journals,
primaryKey: "journal_id",
featureChooserIconDisplay: "always",
autoGenerateColumns: false,
autoGenerateLayouts: false,
rowVirtualization: true,
virtualizationMode: "continuous",
autoCommit: true,
width: "100%",
height: "800px",
columns: columns,
features: [
{ name: "Paging", pageSize: 20 },
{
name: 'Updating',
enableAddRow: true,
enableDeleteRow: true,
editMode: 'row',
columnSettings: [{
columnKey: "journal_id",
editorType: 'numeric',
editorOptions: { readOnly: true }
}, {
columnKey: "journal_gl_id",
editorType: 'numeric',
editorOptions: { readOnly: true }
}, {
columnKey: "journal_gl_chart_id",
editorType: 'combo',
required: true,
editorOptions: {
mode: "dropdown",
dataSourceType: 'json',
dataSource: chartCombo,
textKey: "chart_master_code",
valueKey: "chart_master_id"
}
}, {
columnKey: "journal_gl_description",
editorType: 'string',
validation: true,
editorOptions: { required: true }
}, {
columnKey: "journal_gl_net",
editorType: 'numeric',
validation: false,
editorOptions: { required: false }
}, {
columnKey: "journal_gl_debit",
editorType: 'numeric',
validation: false,
editorOptions: { required: false }
}, {
columnKey: "journal_gl_credit",
editorType: 'numeric',
validation: false,
editorOptions: { required: false }
}]
}
]
});
}
var columns = [
{ headerText: "JournalID", key: "journal_id", dataType: "number", hidden: true, allowHiding: false },
{ headerText: "JournalGlID", key: "journal_gl_id", dataType: "number", hidden: true, allowHiding: false },
{ headerText: "Chart", key: "journal_gl_chart_id", dataType: "number", width: "30%", formatter: formatChartCombo },
{ headerText: "Description", key: "journal_gl_description", dataType: "string", width: "30%" },
{ headerText: "Net", key: "journal_gl_net", dataType: "number", hidden: true, allowHiding: false },
{ headerText: "Debit", key: "journal_gl_debit", dataType: "number", width: "20%" },
{ headerText: "Credit", key: "journal_gl_credit", dataType: "number", width: "20%" }
如果我使用 editMode:'row',完成和取消按钮工作并且 grid.on("iggridupdatingeditrowended",函数 (e, args) 在点击完成按钮后被调用。但是 none 的验证工作。当我使用选项卡时,焦点将进入下一列,如果它是最后一列,它将聚焦完成按钮并在单击完成后调用 rowended 方法(如预期的那样)。但是我是每次我从一栏失去焦点并转到下一栏时都会出现这些错误
另一方面,如果我使用 editMode : 'cell',则不会出现此错误,验证将起作用,事件 "keydown" 和 "keyup" 将被触发。但是,未呈现“完成”和“取消”按钮。
有谁知道是否有办法同时设置这两个功能?如果开箱即用无法实现,我将如何打开“完成”和“取消”按钮模式弹出窗口?这样我就可以在第一个焦点列中呈现,并在最后一列之后单击“完成”焦点?或者如果有人可以指出示例代码,我可以在其中遵循可自定义的 igGrid 更新功能
当前项目使用这些版本:
- Infragistics.Web.Mvc 版本 5.17.2.183。
- jquery-1.10.2.min.js
- jquery-ui-1.10.4.min.js
我的公司有 2017 版本,但我想知道哪个 jquery 版本最适合 2017 版本,如果这个 5.17.2.183 是我可以使用 2017 许可证的最新 dll?
编辑:
还添加 EditMode : 'dialog' 不是一个选项,它基本上呈现一个包含所有列的模式弹出窗口,因此行受到威胁,因为它是一个表单
经过更多调查,igGrid 已被修改(语法)。我正在关注最 "complete" 文档之一 2012 Version 并且在过去几年中此语法已更改:
- 无需添加不需要验证的列,这是新语法的实际设置:
function igGridBind() {
$("#JournalGrid").igGrid({
dataSourceType: 'json',
dataSource: journals,
primaryKey: "journal_id",
featureChooserIconDisplay: "always",
autoGenerateColumns: false,
autoGenerateLayouts: false,
rowVirtualization: true,
virtualizationMode: "continuous",
autoCommit: true,
width: "100%",
height: "800px",
columns: columns,
features: [
{ name: "Paging", pageSize: 20 },
{
name: 'Updating',
enableAddRow: true,
enableDeleteRow: true,
editMode: 'row',
columnSettings: [
{
columnKey: "journal_gl_chart_id",
editorType: 'combo',
required: true,
editorOptions: {
mode: "dropdown",
dataSourceType: 'json',
dataSource: chartCombo,
textKey: "chart_master_code",
valueKey: "chart_master_id"
}
}
,
{
columnKey: "journal_gl_description",
editorType: 'string',
required: true
}
]
}
]
});
}
我正在使用基于 jquery 的 IgGrid,我正在尝试按照以下方式设置网格:
function igGridBind() {
$("#JournalGrid").igGrid({
dataSourceType: 'json',
dataSource: journals,
primaryKey: "journal_id",
featureChooserIconDisplay: "always",
autoGenerateColumns: false,
autoGenerateLayouts: false,
rowVirtualization: true,
virtualizationMode: "continuous",
autoCommit: true,
width: "100%",
height: "800px",
columns: columns,
features: [
{ name: "Paging", pageSize: 20 },
{
name: 'Updating',
enableAddRow: true,
enableDeleteRow: true,
editMode: 'row',
columnSettings: [{
columnKey: "journal_id",
editorType: 'numeric',
editorOptions: { readOnly: true }
}, {
columnKey: "journal_gl_id",
editorType: 'numeric',
editorOptions: { readOnly: true }
}, {
columnKey: "journal_gl_chart_id",
editorType: 'combo',
required: true,
editorOptions: {
mode: "dropdown",
dataSourceType: 'json',
dataSource: chartCombo,
textKey: "chart_master_code",
valueKey: "chart_master_id"
}
}, {
columnKey: "journal_gl_description",
editorType: 'string',
validation: true,
editorOptions: { required: true }
}, {
columnKey: "journal_gl_net",
editorType: 'numeric',
validation: false,
editorOptions: { required: false }
}, {
columnKey: "journal_gl_debit",
editorType: 'numeric',
validation: false,
editorOptions: { required: false }
}, {
columnKey: "journal_gl_credit",
editorType: 'numeric',
validation: false,
editorOptions: { required: false }
}]
}
]
});
}
var columns = [
{ headerText: "JournalID", key: "journal_id", dataType: "number", hidden: true, allowHiding: false },
{ headerText: "JournalGlID", key: "journal_gl_id", dataType: "number", hidden: true, allowHiding: false },
{ headerText: "Chart", key: "journal_gl_chart_id", dataType: "number", width: "30%", formatter: formatChartCombo },
{ headerText: "Description", key: "journal_gl_description", dataType: "string", width: "30%" },
{ headerText: "Net", key: "journal_gl_net", dataType: "number", hidden: true, allowHiding: false },
{ headerText: "Debit", key: "journal_gl_debit", dataType: "number", width: "20%" },
{ headerText: "Credit", key: "journal_gl_credit", dataType: "number", width: "20%" }
如果我使用 editMode:'row',完成和取消按钮工作并且 grid.on("iggridupdatingeditrowended",函数 (e, args) 在点击完成按钮后被调用。但是 none 的验证工作。当我使用选项卡时,焦点将进入下一列,如果它是最后一列,它将聚焦完成按钮并在单击完成后调用 rowended 方法(如预期的那样)。但是我是每次我从一栏失去焦点并转到下一栏时都会出现这些错误
另一方面,如果我使用 editMode : 'cell',则不会出现此错误,验证将起作用,事件 "keydown" 和 "keyup" 将被触发。但是,未呈现“完成”和“取消”按钮。
有谁知道是否有办法同时设置这两个功能?如果开箱即用无法实现,我将如何打开“完成”和“取消”按钮模式弹出窗口?这样我就可以在第一个焦点列中呈现,并在最后一列之后单击“完成”焦点?或者如果有人可以指出示例代码,我可以在其中遵循可自定义的 igGrid 更新功能
当前项目使用这些版本:
- Infragistics.Web.Mvc 版本 5.17.2.183。
- jquery-1.10.2.min.js
- jquery-ui-1.10.4.min.js
我的公司有 2017 版本,但我想知道哪个 jquery 版本最适合 2017 版本,如果这个 5.17.2.183 是我可以使用 2017 许可证的最新 dll?
编辑:
还添加 EditMode : 'dialog' 不是一个选项,它基本上呈现一个包含所有列的模式弹出窗口,因此行受到威胁,因为它是一个表单
经过更多调查,igGrid 已被修改(语法)。我正在关注最 "complete" 文档之一 2012 Version 并且在过去几年中此语法已更改:
- 无需添加不需要验证的列,这是新语法的实际设置:
function igGridBind() {
$("#JournalGrid").igGrid({
dataSourceType: 'json',
dataSource: journals,
primaryKey: "journal_id",
featureChooserIconDisplay: "always",
autoGenerateColumns: false,
autoGenerateLayouts: false,
rowVirtualization: true,
virtualizationMode: "continuous",
autoCommit: true,
width: "100%",
height: "800px",
columns: columns,
features: [
{ name: "Paging", pageSize: 20 },
{
name: 'Updating',
enableAddRow: true,
enableDeleteRow: true,
editMode: 'row',
columnSettings: [
{
columnKey: "journal_gl_chart_id",
editorType: 'combo',
required: true,
editorOptions: {
mode: "dropdown",
dataSourceType: 'json',
dataSource: chartCombo,
textKey: "chart_master_code",
valueKey: "chart_master_id"
}
}
,
{
columnKey: "journal_gl_description",
editorType: 'string',
required: true
}
]
}
]
});
}