實現easyui datagrid在沒有數據時顯示相關提示內容

　　本示例實現easyui datagrid加載/查詢數據時，若是沒有相關記錄，則在datagrid中顯示沒有相關記錄的提示信息，效果以下圖所示

 

　　本實例要實現以下圖所示的效果：

　　本示例easyui版本爲1.3.4，若是運行後沒有效果，本身檢查easyui版本

1. 不一樣版本對appendRow和mergeCells支持不同，參數不一致什麼的。
2. 沒法隱藏分頁導航容器，能夠用chrome開發工具或者firebug查看分頁導航容器的樣式和原始datagrid table表格的關係。

　　源代碼以下

        $(function () {
            $('#dg').datagrid({
                fitColumns: true,
                url: 'product.json',
                pagination: true,
                pageSize: 3,
                onLoadSuccess: function (data) {
                    if (data.total == 0) {
                        //添加一個新數據行，第一列的值爲你須要的提示信息，而後將其餘列合併到第一列來，注意修改colspan參數爲你columns配置的總列數
                        $(this).datagrid('appendRow', { itemid: '<div style="text-align:center;color:red">沒有相關記錄！</div>' }).datagrid('mergeCells', { index: 0, field: 'itemid', colspan: 4 })
                        //隱藏分頁導航條，這個須要熟悉datagrid的html結構，直接用jquery操做DOM對象，easyui datagrid沒有提供相關方法隱藏導航條
                        $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
                    }
                    //若是經過調用reload方法從新加載數據有數據時顯示出分頁導航容器
                    else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();
                },
                title: 'easyui datagrid沒有數據顯示無數據提示信息',
                width: 550,
                columns: [[{ field: 'itemid', width: 80, title: 'Item ID' },
                 { field: 'productname', width: 100, editor: 'text', title: 'Product Name' },
                 { field: 'listprice', width: 80, align: 'right', title: 'List Pirce' },
                 { field: 'unitcost', width: 80, align: 'right', title: 'Unit Cost'}]]
            });
        });

product.json

{"total":0,"rows":[]}