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

實現easyui datagrid在沒有數據時顯示相關提示內容：本示例實現easyui datagrid加載/查詢數據時，如果沒有相關記錄，則在datagrid中顯示沒有相關記錄的提示信息

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

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

　　本示例easyui版本為1.3.4，如果運行后沒有效果，自己檢查easyui版本

不同版本對appendRow和mergeCells支持不一樣，參數不一致什么的。

無法隱藏分頁導航容器，可以用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'}]]
            });
        });