Extjs之grid单元格编辑校验

Posted 2020-09-05 拉风的帅猫

效果如图所示：

1. 添加CSS样式
<style>
.x-grid-cell-invalid .x-grid-cell-inner:before{content: "";position: absolute;z-index: 0;top: 0;bottom: 0;left: 0;right: 0;border: 1px solid red;}
</style>
2. 监听单元格编辑插件的事件
{ptype: \'cellediting\', clicksToEdit: 1, pluginId: \'edit\',listeners:{
    //单元格编辑完成之后会触发此事件
    validateedit:function(editor,context,eOpts){
        //字段名判断
        if(context.field==="typeId") {
            //后台校验
            Ext.Ajax.request({
                url: \'/service/articleTypeService/uniquenessCheck\',
                params: {id: context.value},
                success: function (obj) {
                    if (obj.success === false) {
                        //校验未通过后给单元格添加class
                        var node=Ext.get(context.node);
                        var td=node.query(\'[data-columnid=\'+context.column.id+\']\',false)[0];
                        td.addCls("x-grid-cell-invalid invalid-id");
                    }
                },
                loadMask:false
            });
        }
        return true;
    }
}}
3. 给未校验通过的单元格添加tooltip提示
//表格事件监听
listeners:{
    afterrender:function(view){
        Ext.create(\'Ext.tip.ToolTip\',{
            target:view.el,
            delegate:\'.invalid-id\',
            html:\'<span style="color:red">无效的ID,ID重复</span>\'
        });
    }
}
4. 当表格渲染时就想进行验证的时候使用的方式（可省略第2步）
{xtype:\'textcolumn\',text: \'编码\', dataIndex: \'typeId\', align: \'left\', flex: 1,editor:{}
,renderer:function(value,metaData,record,rowIndex,colIndex,store,view){
    if(value==40){
        metaData.tdCls="x-grid-cell-invalid invalid-age";
    }
    return value;}
}
5.校验
invalid:function(){
    var tds=this.getView().getEl().query(\'td.x-grid-cell-invalid\');
    return tds.length>0;
},
备注：在Extjs5.1下测试通过，写的都是些代码片段，相信大家都看明白其中含义。