EasyUI學(xué)習(xí)之DataGird分頁(yè)顯示數(shù)據(jù)
本文實(shí)例為大家分享了EasyUI DataGird的使用方法,供大家參考,具體內(nèi)容如下
1. html代碼
<table id="grid" style="width: 940px" title="用戶(hù)操作" data-options="iconCls:'icon-view'"> </table>
2.顯示
3.js代碼
// 頁(yè)面加載后顯示表數(shù)據(jù) $(function() { var queryData = {};// 可添加一些預(yù)設(shè)條件 InitGrid(queryData);// 初始化Datagrid表格數(shù)據(jù) }); // 實(shí)現(xiàn)對(duì)DataGird控件的綁定操作 function InitGrid(queryData) { $('#grid').datagrid({ // 定位到Table標(biāo)簽,Table標(biāo)簽的ID是grid url : 'getNoticesByUserId',// 指向后臺(tái)的Action來(lái)獲取當(dāng)前用戶(hù)的信息的Json格式的數(shù)據(jù) title : '公告管理', iconCls : 'icon-view', height : 650, width : function() { return document.body.clientWidth },// 自動(dòng)寬度 pagination : true, rownumbers : true, sortName : 'title', // 根據(jù)某個(gè)字段給easyUI排序 pageSize : 20, sortOrder : 'asc', remoteSort : false, idField : 'id', queryParams : queryData, // 異步查詢(xún)的參數(shù) columns : [ [ { field : 'ck', width : '1%', checkbox : true }, { title : '標(biāo)題', field : 'title', width : '9%', sortable : true, halign : 'center' }, { title : '發(fā)布人', field : 'userName', width : '10%', sortable : true, halign : 'center' }, { title : '內(nèi)容', field : 'content', width : '50%', sortable : true, halign : 'center', sortable : false }, { title : '創(chuàng)建日期', field : 'createDate', width : '20%', sortable : true, halign : 'center', align : 'center', sortable : false } ] ], toolbar : [ { id : 'btnAdd', text : '添加', iconCls : 'icon-add', handler : function() { ShowAddDialog();// 實(shí)現(xiàn)添加記錄的頁(yè)面 } }, '-', { id : 'btnEdit', text : '修改', iconCls : 'icon-edit', handler : function() { ShowEditDialog();// 實(shí)現(xiàn)修改記錄的方法 } }, '-', { id : 'btnDelete', text : '刪除', iconCls : 'icon-remove', handler : function() { Delete();// 實(shí)現(xiàn)直接刪除數(shù)據(jù)的方法 } } ] }); };
4.Json數(shù)據(jù)
{ "total": 2, "rows":[{ "content": "11", "createDate": "2016-12-15 23:03:50", "id": 1, "title": "11", "userName": "789" }, { "content": "我是", "createDate": "2016-12-16 20:10:03", "id": 4, "title": "為", "userName": "789" } ] }
5.Java后臺(tái)封裝
/********************1.action代碼*******************/ private NoticeManager noticeManager; private int page; private int rows; Map<String, Object> map = new HashMap<String, Object>(); public NoticeManager getNoticeManager() { return noticeManager; } public void setNoticeManager(NoticeManager noticeManager) { this.noticeManager = noticeManager; } public int getPage() { return page; } public void setPage(int page) { this.page = page; } public int getRows() { return rows; } public void setRows(int rows) { this.rows = rows; } public Map<String, Object> getMap() { return map; } public void setMap(Map<String, Object> map) { this.map = map; } /** * @Title: getNoticesByUserId * @Description: TODO(獲取首頁(yè)顯示的所有公告數(shù)據(jù)) * @return??? 設(shè)定文件 * @return String??? 返回類(lèi)型 * @throws */ public String getNoticesByUserId() { // 存放數(shù)據(jù)的list List<ANotice> aNotices = new ArrayList<ANotice>(); User u = (User) getSession().get("LoginUser"); List<Notice> notices = noticeManager.GetNotices(page, rows, u.getId()); for (Notice notice : notices) { ANotice aNotice = new ANotice(); aNotice.setId(notice.getId()); aNotice.setTitle(notice.getTitle()); aNotice.setCreateDate(notice.getCreateDate()); aNotice.setUserName(u.getUsername()); aNotice.setContent(notice.getContent()); aNotices.add(aNotice); } // total是easyui分頁(yè)工具的總頁(yè)數(shù)。名字固定。 map.put("total", noticeManager.getTotal(page, rows, u.getId())); map.put("rows", aNotices); return SUCCESS; } // total是easyui分頁(yè)工具的總頁(yè)數(shù)。名字固定。 map.put("total", noticeManager.getTotal(page, rows, u.getId())); map.put("rows", aNotices); /********************2.Manager代碼*******************/ @Override public List<Notice> GetNotices(int page, int rows, int userId) { String hql="From Notice Where 1=1 and userId = ?"; return dao.find(hql, new Object[]{userId}, page, rows); } @Override public Long getTotal(int page, int rows, int userId) { String hql="select count(*) from Notice Where 1=1 and userId = ?"; return dao.count(hql, new Object[]{userId}); } /********************3.dao代碼*******************/ public List<T> find(String hql, Object[] param, Integer page, Integer rows) { if (page == null || page < 1) { page = 1; } if (rows == null || rows < 1) { rows = 10; } Query q = this.getCurrentSession().createQuery(hql); if (param != null && param.length > 0) { for (int i = 0; i < param.length; i++) { q.setParameter(i, param[i]); } } return q.setFirstResult((page - 1) * rows).setMaxResults(rows).list(); }
6.struts配置文件
<!--前后臺(tái)通過(guò)Json方式傳輸數(shù)據(jù) --> <package name="jsonPackage" extends="struts-default,json-default"> <action name="getNoticesByUserId" class="NoticeAction" method="getNoticesByUserId"> <!-- 返回json類(lèi)型數(shù)據(jù) --> <result name="success" type="json"> <param name="root">map</param> </result> </action> </package>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- EasyUi中的Combogrid 實(shí)現(xiàn)分頁(yè)和動(dòng)態(tài)搜索遠(yuǎn)程數(shù)據(jù)
- MVC+EasyUI+三層新聞網(wǎng)站建立 分頁(yè)查詢(xún)數(shù)據(jù)功能(七)
- jQuery EasyUI API 中文文檔 - Pagination分頁(yè)
- jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁(yè)的方法
- jQuery EasyUI Pagination實(shí)現(xiàn)分頁(yè)的常用方法
- EasyUi datagrid 實(shí)現(xiàn)表格分頁(yè)
- EasyUI Pagination 分頁(yè)的兩種做法小結(jié)
- SSh結(jié)合Easyui實(shí)現(xiàn)Datagrid的分頁(yè)顯示
- 淺談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁(yè)表格
- EasyUi+Spring Data 實(shí)現(xiàn)按條件分頁(yè)查詢(xún)的實(shí)例代碼
- easyUI使用分頁(yè)過(guò)濾器對(duì)數(shù)據(jù)進(jìn)行分頁(yè)操作實(shí)例分析
相關(guān)文章
jquery.tableSort.js表格排序插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jquery.tableSort.js表格排序插件使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式淘寶動(dòng)畫(huà)效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式淘寶動(dòng)畫(huà)效果,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2018-02-02精選的10款用于構(gòu)建良好易用性網(wǎng)站的jQuery插件
這篇隨筆收集了10款非常給力的jquery 插件,幫助你構(gòu)建易用性良好的網(wǎng)站,希望對(duì)你有用!2011-01-01jquery.flot.js簡(jiǎn)單繪制折線(xiàn)圖用法示例
這篇文章主要介紹了jquery.flot.js簡(jiǎn)單繪制折線(xiàn)圖用法,結(jié)合實(shí)例形式分析了jQuery插件jquery.flot.js實(shí)現(xiàn)圖形繪制的常用操作技巧,需要的朋友可以參考下2017-03-03jquery實(shí)現(xiàn)向下滑出的二級(jí)導(dǎo)航下滑菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)向下滑出的二級(jí)導(dǎo)航下滑菜單效果,涉及jquery實(shí)現(xiàn)頁(yè)面結(jié)點(diǎn)樣式動(dòng)態(tài)變換效果的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08bootstrapValidator表單校驗(yàn)、更改狀態(tài)、新增、移除校驗(yàn)字段的實(shí)例代碼
這篇文章主要介紹了bootstrapValidator表單校驗(yàn)、更改狀態(tài)、新增、移除校驗(yàn)字段,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05jquery實(shí)現(xiàn)的一個(gè)簡(jiǎn)單進(jìn)度條效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)的一個(gè)簡(jiǎn)單進(jìn)度條效果實(shí)例,很好的一個(gè)入門(mén)實(shí)例,從一個(gè)方面介紹了進(jìn)度的實(shí)現(xiàn)原理,需要的朋友可以參考下2014-05-05jQuery遮罩層實(shí)現(xiàn)方法實(shí)例詳解(附遮罩層插件)
這篇文章主要介紹了jQuery遮罩層實(shí)現(xiàn)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery遮罩層樣式及功能實(shí)現(xiàn)技巧,并附帶分析了一個(gè)簡(jiǎn)單jQuery遮罩層插件實(shí)現(xiàn)方法,需要的朋友可以參考下2015-12-12jquery屬性選擇器not has怎么寫(xiě) 行懸停高亮顯示
jquery屬性選擇器中的包含 not has怎么寫(xiě),讓一個(gè)table中沒(méi)有 提交 圖片的行懸停時(shí)都高亮,下面有個(gè)不錯(cuò)的示例,喜歡的朋友可以參考下2013-11-11