本示例實現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'}]]
});
});product.json
{"total":0,"rows":[]}
一路走來數個年頭，感謝RDIFramework.NET框架的支持者與使用者，現在啓用了RDIFramework.NET官方網站與官方博客，大家可以通過下面的地方訪問。
RDIFramework.NET官方網站：http://www.rdiframework.net/
RDIFramework.NET官方博客：http://blog.rdiframework.net/
同時需要說明的，以後的所有技術文章以官方網站爲準，歡迎大家收藏！
RDIFramework.NET框架由專業團隊長期打造、一直在更新、一直在升級，請放心使用！
歡迎關注RDIFramework.NET框架官方公衆微信（微信號：rdiframework-net），及時瞭解最新動態。
掃描二維碼立即關注
