本示例實(shí)現(xiàn)easyui datagrid加載/查詢數(shù)據(jù)時(shí)，如果沒有相關(guān)記錄，則在datagrid中顯示沒有相關(guān)記錄的提示信息，效果如下圖所示
本實(shí)例要實(shí)現(xiàn)如下圖所示的效果：
本示例easyui版本為1.3.4，如果運(yùn)行后沒有效果，自己檢查easyui版本
不同版本對(duì)appendRow和mergeCells支持不一樣，參數(shù)不一致什么的。
無法隱藏分頁導(dǎo)航容器，可以用chrome開發(fā)工具或者firebug查看分頁導(dǎo)航容器的樣式和原始datagrid table表格的關(guān)系。
源代碼如下
$(function () { $('#dg').datagrid({ fitColumns: true, url: 'product.json', pagination: true, pageSize: 3, onLoadSuccess: function (data) { if (data.total == 0) { //添加一個(gè)新數(shù)據(jù)行，第一列的值為你需要的提示信息，然后將其他列合并到第一列來，注意修改colspan參數(shù)為你columns配置的總列數(shù) $(this).datagrid('appendRow', { itemid: '<div style="text-align:center;color:red">沒有相關(guān)記錄！</div>' }).datagrid('mergeCells', { index: 0, field: 'itemid', colspan: 4 }) //隱藏分頁導(dǎo)航條，這個(gè)需要熟悉datagrid的html結(jié)構(gòu)，直接用jquery操作DOM對(duì)象，easyui datagrid沒有提供相關(guān)方法隱藏導(dǎo)航條 $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide(); } //如果通過調(diào)用reload方法重新加載數(shù)據(jù)有數(shù)據(jù)時(shí)顯示出分頁導(dǎo)航容器 else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show(); }, title: 'easyui datagrid沒有數(shù)據(jù)顯示無數(shù)據(jù)提示信息', 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":[]}以上所述是小編給大家介紹的jQuery Easyui學(xué)習(xí)教程之實(shí)現(xiàn)datagrid在沒有數(shù)據(jù)時(shí)顯示相關(guān)提示內(nèi)容的全部敘述，希望對(duì)大家有所幫助，如果大家有任何問題歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
下面給大家介紹 jQuery EasyUI datagrid 無記錄時(shí)，增加"暫無數(shù)據(jù)"提示
在 datagrid 的onLoadSuccess事件進(jìn)行操作：
onLoadSuccess: function (data) { if (data.total == 0) { var body = $(this).data().datagrid.dc.body2; body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1>暫無數(shù)據(jù)</h1></td></tr>'); }}新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
