本文實(shí)例為大家分享了EasyUI DataGird的使用方法,供大家參考,具體內(nèi)容如下
1. html代碼
<table id="grid" style="width: 940px" title="用戶操作" 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)前用戶的信息的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, // 異步查詢的參數(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??? 返回類型 * @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代碼*******************/@Overridepublic 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); }@Overridepublic 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類型數(shù)據(jù) --> <result name="success" type="json"> <param name="root">map</param> </result> </action></package>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注