easyui datagrid table在没有数据时显示相关提示内容

快来打我* 2022-05-22 12:57 268阅读 0赞

老规矩先上图：

![70][]当数据为空时相应的提示数据美化，接下来看代码

解决这个问题的方式有很多种博主给出项目中常用的两种：

在这里补充一点 在easyui 1.5 版本 新增一个新的属性emptyMsg 可以直接定义

第一种：

var body = $(this).data().datagrid.dc.body2;    
   var width = body.width();

body.find('table tbody').append('<tr>center><td width = '+width+' style="height: 25px; text-align:       center;color:red;border: 0px solid ;" colspan='+9+'>没有对应的数据!</td></center></tr>');

代码就不过多解析很简单，第一种会把的你的复选框

![70 1][]

覆盖掉，列起始位置不会出现复选框；

第二种：

$(this).datagrid('appendRow', \{  
                                id: '<div style="text-align:center;color:red">没有相关记录！</div>'\})

.datagrid('mergeCells', \{ index: 0, field: 'id', colspan: 8 \})

第二种呢用到easyui 的两个参数 第一个参数appendRow  append 添加 row 行（添加一行） 在最后的插入一行，第二个参数mergeCells它的意思呢是合并单元格 分别有四个参数：

合并单元格，options包含以下属性：  
index：行索引。  
field：字段名称。  
rowspan：合并的行数。

colspan：合并的列数。

第二种呢 列起始位置会出现复选框 附图：

![70 2][]

这两种任意选择都可以，到这里就结束了

[70]: /images/20220522/0f9d53eabe9f4f8aa9ca07593a2c4d7a.png
[70 1]: /images/20220522/2f3815ae2eeb4f1fa8a26b0f1efd1140.png
[70 2]: /images/20220522/c0dbe7d3a09b4f76a246bf9a0731d618.png