實作easyui datagrid在沒有資料時顯示相關提示内容

實作easyui datagrid在沒有資料時顯示相關提示内容：本示例實作easyui datagrid加載/查詢資料時，如果沒有相關記錄，則在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":[]}
      

• 全新跨平台版本.NET靈活開發架構-RDIFramework.NET5.0震撼釋出
• .NET快速開發架構-RDIFramework.NET 全新EasyUI版釋出
• RDIFramework.NET靈活開發架構助力企業BPM業務流程系統的開發與落地
• 通過SignalR技術整合即時通訊(IM)在.NET靈活開發架構中落地
• RDIFramework.NET WinForm版新增通知公告、系統新聞子產品
• RDIFramework.NET Web版報表管理-助力企業高效智能圖表
• RDIFramework.NET — 基于.NET的快速資訊化系統開發架構 — 系列目錄
• RDIFramework.NET靈活開發架構 ━ 工作流程元件介紹
• RDIFramework.NET靈活開發架構 ━ 工作流程元件Web業務平台
• RDIFramework.NET靈活開發架構 ━ 工作流程元件WinForm業務平台
• 微信公衆号開發系列-玩轉微信開發-目錄彙總
• .NET Core部署到linux(CentOS)最全解決方案，正常篇
• .NET Core部署到linux(CentOS)最全解決方案，進階篇(Supervisor+Nginx)
• .NET Core部署到linux(CentOS)最全解決方案，高階篇(Docker+Nginx 或 Jexus)
• .NET Core部署到linux(CentOS)最全解決方案，入魔篇(使用Docker+Jenkins實作持續內建、自動化部署)
• 一網打盡，一文講通虛拟機VirtualBox及Linux使用
• 一文講通.NET Core部署到Windows IIS最全解決方案
• 常用linux指令，開發必備

一路走來數個年頭，感謝RDIFramework.NET架構的支援者與使用者，大家可以通過下面的位址了解詳情。

RDIFramework.NET官方網站：http://www.rdiframework.net/

RDIFramework.NET官方部落格：http://blog.rdiframework.net/

特别說明，架構相關的技術文章請以官方網站為準，歡迎大家收藏！

RDIFramework.NET架構由海南國思軟體科技有限公司專業團隊長期打造、一直在更新、一直在更新，請放心使用！

歡迎關注RDIFramework.NET架構官方微信公衆号（微信号：guosisoft），及時了解最新動态。

使用微信掃描二維碼立即關注

作者：

RDIFramework.NET

出處：http://www.cnblogs.com/huyong/

Email：[email protected]

QQ：406590790

微信：13005007127(同手機号)

架構官網：http://www.rdiframework.net/

架構官網部落格：http://blog.rdiframework.net/

架構其他部落格：http://blog.csdn.net/chinahuyong

http://www.cnblogs.com/huyong

RDIFramework.NET，基于全新.NET Framework與.NET Core的快速資訊化系統開發、整合架構，為企業快速建構垮平台、企業級的應用提供了強大支援。

關于作者：系統架構師、資訊系統項目管理師、DBA。專注于微軟平台項目架構、管理和企業解決方案，多年項目開發與管理經驗，曾多次組織并開發多個大型項目，在面向對象、面向服務以及資料庫領域有一定的造詣。現主要從事基于

RDIFramework.NET

架構的技術開發、咨詢工作，主要服務于金融、醫療衛生、鐵路、電信、物流、物聯網、制造、零售等行業。

如有問題或建議，請多多賜教！

本文版權歸作者和CNBLOGS部落格共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，如有問題，可以通過微信、郵箱、QQ等聯系我，非常感謝。