毕业论文开发语言企业开发JAVA技术.NET技术WEB开发Linux/Unix数据库技术Windows平台移动平台嵌入式论文范文英语论文
您现在的位置: 毕业论文 >> WEB开发 >> 正文

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

更新时间:2015-11-27:  来源:毕业论文

jquery-easyui-1.3.2  easyui-datagrid通过url当查询到没有数据时,如何设置显示“没有相关记录”?
设置onLoadSuccess函数:
function  onLoadSuccess(data){

if(data.total==0)
alert("没有数据!");
}


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

设为首页 | 联系站长 | 友情链接 | 网站地图 |

copyright©youerw.com 优尔论文网 严禁转载
如果本毕业论文网损害了您的利益或者侵犯了您的权利,请及时联系,我们一定会及时改正。