easyui datagrid遇到的问题

easyUI数据表格

1.分页

• 常规分页

  后台代码直接返回rows:[ ]和total两个参数组成的json字符串,这种分页比较常见,就不介绍了

• 非常规分页

  后台代码返回json对象,该对象为统一返回对象,比如JsonResult,这种不常见,下面的为js代码

//js代码
var initTable = function() {
    $("#dg").datagrid({
        remoteSort: false,
        fit: true,
        border: false,
        pagination: true,
        singleSelect: true,
        rownumbers: true,
        //fitColumns: true,
        striped: true,
        onLoadSuccess: function () {
            //表格中使用图标,必须写在这里
            $("a[name='edit']").linkbutton({iconCls:"icon-w-edit"});
            $("a[name='delete']").linkbutton({iconCls:"icon-w-delete"});
            $(this).datagrid("fixRownumber");
        }
    });

find(1,10);
   //分页
   var pager = $('#dg').datagrid('getPager');
   pager.pagination({
       total:0,
       rows : 0,
       pageNumber : 1,
       pageList : [10, 20, 30, 50, 100],// 可以设置每页记录条数的列表    
    onSelectPage:function(pageNumber,pageSize){    
        find(pageNumber, pageSize);  
    } 
   });

}
function find(pageNumber, pageSize) {
    $("#dg").datagrid('getPager').pagination({pageNumber : pageNumber, pageSize : pageSize});//重置
    $("#storeLists").datagrid("loading"); //加屏蔽
    $.ajax({
        url: 'XXXXXXXX',
        type: 'post',
        //将要传递到后台的参数,参数中要包含page和rows,最好一起封装
        data: {"params" : XXX, "page" : pageNumber, "rows" : pageSize},
        cache: false,
        dataType: 'json',
        //result就是后台返回的JsonResult对象
        success: function(result) {
            if (result.state) {
                //result.data中是一个map,map中有两个key,一个是rows,一个是total
                $("#dg").datagrid("loadData", result.data);
                $("#dg").datagrid("loaded");//移除屏蔽         
            } else {
                $("#dg").datagrid("loaded");//移除屏蔽
                $.messager.alert('提示', result.message, 'info');
            }       
        },
        error: function() {
            $("#dg").datagrid("loaded");//移除屏蔽
            $.messager.alert('提示', '网络或者服务器异常', 'info');
        }
    });
}

2.数据为空时的提示

当后台返回的数据为空时,让id="noRecord"的div显示,亲测效果不错

//html
<table  id="dg" class="easyui-datagrid">
</table>
<div id="noRecord" class="datagrid-empty" style="font-size: 20px; margin: 80px auto; position: absolute; left: 0px; top: 32px; width: 100%; text-align: center; display:none">
                没有符合条件的记录
            </div>

注意: 使用此方法可能会导致本页数据不会自动清除,办法见3.

3.清除数据表格中的数据

easyui 的api中没有明确的方法(我用的1.4版本…),但是有两种办法可以实现

//方法一:可以清空,但是如果你的方法中存在 onloadSuccess方法时有给出提示,则不能使用,否则会弹出两次
$('#dg').datagrid('loadData', { total: 0, rows: [] });

//方法二:这种方法比较理想
clearDataGrid("dg");

/*清除指定id的数据表格中的数据*/
function clearDataGrid(id){
    //获取当前页的记录数
    var item = $('#' + id).datagrid('getRows');  
    for (var i = item.length - 1; i >= 0; i--) {  
        var index = $('#' + id).datagrid('getRowIndex', item[i]);  
        $('#' + id).datagrid('deleteRow', index);  
    }  
}

4.使用display:none时导致数据表格表头不显示

办法: 展现div后,使用$("#dg").datagrid('resize');即可.