IgGrid更新功能EditMode'row'和'cell'(标签丢失的焦点和验证)

时间:2018-03-01 03:25:40

标签: jquery asp.net-mvc jquery-ui ignite-ui iggrid

我正在使用基于IgGrid的jquery,我正在尝试按以下方式设置网格:

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)。但是没有一个验证工作。当我使用时选项卡,焦点将进入下一列,如果它是最后一列,它将聚焦完成按钮,点击完成后,调用rowended方法(如预期的那样)。但是每次我从一列失去焦点时我都会收到这些错误转到下一个

tab error (lost focus column and go to the next one)

另一方面,如果我使用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版本,但我想知道哪个版本是最适合2017版本的jquery版本,如果这个5.17.2.183是我可以使用2017年许可证的最新版本?

编辑:

另外还添加了EditMode:'dialog'不是一个选项,它基本上呈现了一个包含所有列的模态弹出窗口,因此行是一个strled,因为它是一个表单

1 个答案:

答案 0 :(得分:1)

经过更多调查后,igGrid已被修改(语法)。我正在关注其中一个最完整的"文档here,这种语法在过去几年中发生了变化:

  • 无需添加不需要验证的列,这是新语法的实际设置:



SELECT CURDATE();




相关问题