当easyui datagrid无数据时，显示特定值。如：没有数据

最新推荐文章于 2023-08-11 11:26:33 发布

yyongsheng

最新推荐文章于 2023-08-11 11:26:33 发布

阅读量4k

点赞数

分类专栏：前台

前台专栏收录该内容

37 篇文章

订阅专栏

本文展示了一个使用 jQuery EasyUI 的 DataGrid 控件的基本示例，该示例通过 HTML 标记创建了一个 DataGrid，并设置了空数据提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>