easyui datagrid表格数据为空美化

最新推荐文章于 2023-04-25 23:52:50 发布

大宝哥的钢笔

最新推荐文章于 2023-04-25 23:52:50 发布

阅读量3.9k

点赞数 1

分类专栏： web前端文章标签： easyui datagrid

本文链接：https://blog.csdn.net/zhaoliangbao2778/article/details/52753849

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用datagrid表格时经常可能会遇到加载空数据，下面提供一种扩展方法，用于表格空数据的处理

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script>
    var myview = $.extend({},$.fn.datagrid.defaults.view,{
    onAfterRender:function(target){
        $.fn.datagrid.defaults.view.onAfterRender.call(this,target);
        var opts = $(target).datagrid('options');
        var vc = $(target).datagrid('getPanel').children('div.datagrid-view');
        vc.children('div.datagrid-empty').remove();
        if (!$(target).datagrid('getRows').length){
            var d = $('<div class="datagrid-empty"></div>').html(opts.emptyMsg || 'no records').appendTo(vc);
            d.css({
                position:'absolute',
                left:0,
                top:50,
                width:'100%',
                textAlign:'center'
            });
        }
    }
    });
    $(function(){
        var list=[];//数据列表为空

        $('#dg').datagrid({
              data: list,
            view: myview,
              emptyMsg: 'no records found'

        });
    })
    </script>
</head>
<body>
    <h2>Basic DataGrid</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>The DataGrid is created from markup, no JavaScript code needed.</div>
    </div>
    <div style="margin:10px 0;"></div>

     <table id="dg" title="Surveys" class="easyui-datagrid" style="width:550px;height:250px"  toolbar="#toolbar"  rownumbers="true" fitColumns="true" singleSelect="true">  
  <thead>  
    <tr>  
        <th field="id" width="20">Id</th>  
        <th field="name" width="50">Name</th>  
        <th field="number" width="50">Number</th>  
        <th field="description" width="50">Description</th>  
    </tr>  
  </thead>  
 </table>

</body>
</html>

大宝哥的钢笔

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easyui datagrid表格数据为空美化

使用datagrid表格时经常可能会遇到加载空数据，下面提供一种扩展方法，用于表格空数据的处理<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Basic DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css"
复制链接

扫一扫