easyui datagrid 小结

最新推荐文章于 2024-09-21 19:42:30 发布

carter171717

最新推荐文章于 2024-09-21 19:42:30 发布

阅读量650

点赞数

分类专栏：技术篇文章标签： easyui

本文链接：https://blog.csdn.net/u013303551/article/details/51868131

版权

技术篇专栏收录该内容

28 篇文章 1 订阅

订阅专栏

今天又稍微改进了datagird 的功能，增加了列表为空的时候，提示“暂无数据” ，代码如下：

//在js中先定义一个myview
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" style="font-size:20px;color:#F00"></div>').html(opts.emptyMsg || '').appendTo(vc);
                d.css({
                    position:'absolute',
                    left:0,
                    top:150,
                    width:'100%',
                    textAlign:'center'
                });
            }
        }
    });
使用方法是在加载数据表格的时候，指定一下你要显示的提示语，如下：

$("#tt").datagrid({
                    loadMsg:'数据加载中,请稍后...', //加载数据期间的提示语
                    remoteSort: false,
                    multiSort:false,
                    singleSelect:true, //指定只可以单行被选中，而不能是多行
                   view:myview, //指定上面定义好的view的名称
                    emptyMsg: '暂无数据' //指定无数据时候的提示语
            });

最后，清空datagrid用的是：

   $("#tt").datagrid('loadData', { total: 0, rows: [] });
这时候，如果已经指定了无数据的提示，又不想让无数据提示显示在界面上，只要把无数据提示的提示语改成空就可以了

$("#tt").datagrid({
                    loadMsg:'数据加载中,请稍后...', //加载数据期间的提示语
                    remoteSort: false,
                    multiSort:false,
                    singleSelect:true, //指定只可以单行被选中，而不能是多行
                   view:myview, //指定上面定义好的view的名称
                    emptyMsg: '' //指定无数据时候的提示语，此时为空
            });

OK，本次两个小模块，功能都做的还可以，加入了自己的想法，很不错，继续加油！希望自己接下来更加努力，天天向上！