首页 > 代码库 > Extjs之grid单元格编辑校验
Extjs之grid单元格编辑校验
效果如图所示:
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=http://www.mamicode.com/=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下测试通过,写的都是些代码片段,相信大家都看明白其中含义。
Extjs之grid单元格编辑校验
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。