EasyUI中datagrid表格验证数据为空且加tip提示

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wangxinxin1992816/article/details/84961291

在项目中,表格数据如果为空会显示空白,会缺乏视觉感。
因此想用–字符填充
在这里插入图片描述
在表格中首先要验证数据为空的状态,封装一个判断为空的函数

function subSpace(str) {
    if (str == "" || str == "null" || str == null || str == undefined || str == "undefined") {
        return true
    } else {
        return false
    }
}

然后就是在表格中如何显示呢

columns: [[
            {field: 'beginTime', title: '开始时间', width: '14%', align: 'center',formatter:formatterIsNull},
            {field: 'endTime', title: '结束时间', width: '14%', align: 'center',formatter:formatterIsNull}
        ]],

其中在formatter中formatterIsNull函数来进行判断显示情况

//判断datagrid是否为空--显示,超长溢出tip提示
function formatterIsNull(val) {
    if (subSpace(val)) {
        return '—';
    }else{
        return "<div style='width: 100%;height:30px;margin:0;line-height:30px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;' title='" + val + "'>" + val + "</div>"
    }
}

这样就实现了对表格完美的实现。

猜你喜欢

转载自blog.csdn.net/wangxinxin1992816/article/details/84961291