easyui-datagrid查询到没有数据时，如何设置显示“没有相关记录”?

easyuijquery

解决方案 »

  1.   


    设置onLoadSuccess函数：
    function  onLoadSuccess（data）{if(data.total==0)
    alert("没有数据！");
    }
      

  2.   


    不是想alert，是想在datagrid行中显示“没有相关记录”
      

  3.   


    不是想alert，是想在datagrid行中显示“没有相关记录”你可以用开发工具看一下生成的表格名字，之后用脚本加一个行进去显示没有相关记录。
      

  4.   

    动态添加一数据行，设置值为 没有相关记录就好了。。如果要和并列，需要自己写js代码执行列合并
    onLoadSuccess:function(data){
    if(data.total>0)return;
    $('#dg').datagrid('appendRow',{
    中间显示的列的字段名称: '没有相关记录'
    });
    }
      

  5.   

    而且组件也提供了相关功能，API都不看下mergeCells  options  Merge some cells to one cell, the options contains following properties:
    index: the row index.
    field: the field name.
    rowspan: the rowspan count to be merged.
    colspan: the colspan count to be merged.
      

  6.   

    onLoadSuccess:在这个方法中添加行提示没有记录。会有问题 ，这个方发执行完还会，还会重置表格的。是显示不出来的。
      

  7.   

    http://www.jeasyui.com/forum/index.php?topic=1881.0
    按上面操作没效果 我x
      

  8.   

    是有效果的，拿个实例页面做个测试，代码如下
    <!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 up, 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>
    显示效果如同
      

  9.   

    datagrid没有数据显示无数据提示信息
    都说新增一行再mergeCells就好了。。
      

  10.   

    我X 原来是width和height未设，没效果 真蛋痛