1. 程式人生 > >EasyUI中datagrid表格驗證資料為空且加tip提示

EasyUI中datagrid表格驗證資料為空且加tip提示

在專案中,表格資料如果為空會顯示空白,會缺乏視覺感。
因此想用–字元填充
在這裡插入圖片描述
在表格中首先要驗證資料為空的狀態,封裝一個判斷為空的函式

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>"
    }
}

這樣就實現了對錶格完美的實現。