![[前端][easyui]简单DataGrid表格](https://www.qiuyue.org/source/img/logo-ico.png){kind=logo}
工作第三个任务是解决日报提交页面，第一次接触了前端框架jQuery，和其插件EasyUI，虽然有很多代码是直接copy同事的，但是也有很多收获。感谢我的同事们对我的帮助。 1.首先是导入jQuery和
工作第三个任务是解决日报提交页面，第一次接触了前端框架jQuery，和其插件EasyUI，虽然有很多代码是直接copy同事的，但是也有很多收获。感谢我的同事们对我的帮助。
1.首先是导入jQuery和EasyUI的js文件
<!-- JQUERY EASYUI --> <script src="${contextPathCore}/jquery-easyui-1.3.6/easyui.min.js"></script> <script src="${contextPathCore}/jquery-easyui-1.3.6/easyui-lang-zh_CN.js"></script> <script src="${contextPathCore}/jquery-easyui-1.3.6/datagrid-dnd.js"></script> <script src="${contextPathCore}/jquery-easyui-1.3.6/datagrid-detailview.js"></script> <script src="${contextPathCore}/jquery-easyui-1.3.6/jquery.edatagrid.js" charset="utf-8"></script> <script src="${contextPathCore}/js/userEmpower.js" charset="utf-8"></script> <!-- easyui --> <link rel="stylesheet" type="text/css" href="${contextPathCore}/jquery-easyui-1.3.6/themes/bootstrap/easyui.css"> <link rel="stylesheet" type="text/css" href="${contextPathCore}/jquery-easyui-1.3.6/themes/icon.css">2.建立DataGrid数据表格
<div class="widget-body"> <table id="dailyReportVerifyDG" title="" class="easyui-datagrid" url="${contextPathCore}/dailyreportverify/getDailyReport.htm" toolbar="#toolbar-dailyreportverify" pagination="true" rownumbers="true" fitColumns="true" data-options="height:620"> <thead> <tr> <th field="ck" checkbox="true"></th> <!-- <th field="choose" width="50">choose</th> --> <!-- <th field=id" width="50" type="hidden"></th> --> <th field="userId" width="50" >Staff Id</th> <th field="userName" width="50">Staff Name</th> <th field="project" width="50">Project</th> <th field="task" width="50">Task</th> <th field="role" width="50">Role</th> <th field="category" width="50">Category</th> <th field="activity" width="50">Activity</th> <th field="reportDate" width="50">Date</th> <th field="hours" width="50">Hours/Total</th> <th field="description" width="50">Description</th> <th field="status" width="50">status</th> </tr> </thead> </table> </div> pagination属性是分页组件，singleselect属性是控制复选框checkbook是否为单选（上面图中没有）。
table中url属性是DataGrid用来获取后台数据的，后台java代码如下：
public ModelAndView getDailyReport(WebInput in, WebOutput out, LoginUser loginUser, Map<String, Object> model) throws Exception { // params int page = in.getInt("page", 1); int rows = in.getInt("rows", 20); // condition serach String userid = in.getString("userId"); String username = in.getString("userName"); System.out.println(userid); System.out.println(username); String sort = in.getString("sort"); String order = in.getString("order"); int start = super.getStart(page, rows); String query = in.getString("q"); // search DailyReport search = in.getBean(DailyReport.class); // cnd Cnd cnd = Cnd.newCnd(); /* * if (query != null) { //cnd.like(MonthlyReport.USERNAME, "%" + query + * "%"); cnd.eq(DailyReport.DIRECTORID, * Long.valueOf(LoginUser.ID)).isNull * (DailyReport.STATUS).like(DailyReport.USERNAME, "%" + query + "%"); } */ if (username == null && userid == null) { cnd.eq(DailyReport.DIRECTORID, loginUser.getId()).eq(DailyReport.STATUS, "pending"); } if (username != null) { cnd.eq(DailyReport.DIRECTORID, loginUser.getId()).eq(DailyReport.STATUS, "pending").like(DailyReport.USERNAME, "%" + username + "%"); } if (userid != null) { cnd.eq(DailyReport.DIRECTORID, loginUser.getId()).eq(DailyReport.STATUS, "pending").eq(DailyReport.USERID, Long.valueOf(userid)); } if (sort != null) { cnd = sort(cnd, sort, order); } else { cnd.asc(DailyReport.USERID); cnd.desc(DailyReport.STARTTIME); } Pagination<DailyReportDB> pageObject = dailyReportManager.loadDBPage(cnd, start, rows); // JsonPage<DailyReportDB> jsonPage = new JsonPage<DailyReportDB>(pageObject); out.toJson(jsonPage); // System.out.println("success"); // model return null; } table中toolbar属性是用来添加工具栏的，我在表格中添加了4个按钮，搜索（通过Id，Name搜索），重置，Approve，Reject，代码如下：
<div id="toolbar-dailyreportverify" style="padding:3px"> <span>User ID:</span> <input id="userId" style="line-height:26px;border:1px solid #ccc"> <span>User Name:</span> <input id="userName" style="line-height:26px;border:1px solid #ccc"> <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a> <a href="#" class="easyui-linkbutton" plain="true" onclick="doReset()">Reset</a> <a href="#" class="easyui-linkbutton" plain="true" onclick="doApprove()">Approve</a> <a href="#" class="easyui-linkbutton" plain="true" onclick="doReject()">Reject</a> </div>工具栏对应的javascript代码如下：
注意，对DataGrid执行load操作DataGrid会重新使用URL属性申请数据（可以带参数）。
例如下面doSerach()方法：将userId和userName作为参数。这样会重新调用后台的getDailyReport()方法，返回根据条件申请的数据（上面第三个代码块）。
另外doApprove()方法通过‘getChecked’获取checkbox选中的项（EasyUI中文官网上使用‘getSelection’本文使用的时候无效，之后可能会深入研究）。
<script> function doSearch(){ $('#dailyReportVerifyDG').datagrid('load',{ userId: $('#userId').val(), userName: $('#userName').val() }); } function doReset(){ $('#dailyReportVerifyDG').datagrid('load',{ userId: null, userName: null }); $('#userId').val(""); $('#username').val(""); } function doApprove(){ var rows = $('#dailyReportVerifyDG').datagrid('getChecked'); if (rows){ var formId; var ids=[]; $.each(rows , function(index,row){ ids.push(row.id); }); formId = ids.join(','); $.post('core/dailyreportverify/approveDailyReport.htm',{ids:formId},function(result){ if(result.error){ $.messager.alert('Error', result.errorMsg); } $('#dailyReportVerifyDG').datagrid('reload'); },'json'); } } function doReject(){ //var rows = $('#monthlyReportVerifyDG').datagrid('getChecked'); var rows = $('#dailyReportVerifyDG').datagrid('getChecked'); if (rows){ var formId; var ids=[]; $.each(rows , function(index,row){ ids.push(row.id); }); formId = ids.join(','); $.post('core/dailyreportverify/rejectDailyReport.htm',{ids:formId},function(result){ if(result.error){ $.messager.alert('Error', result.errorMsg); } $('#dailyReportVerifyDG').datagrid('reload'); },'json'); } }</script>上面js代码对应的后台处理方法（java）如下所示：
public ModelAndView approveDailyReport(WebInput in, WebOutput out, LoginUser loginUser, Map<String, Object> model) throws Exception { String[] ids = null; if (in.getString("ids") != null) { ids = in.getString("ids").split(","); } if (ids != null) { for (int i = 0; i < ids.length; i++) { System.out.println(ids[i]); DailyReport update = dailyReportManager.load(Long.parseLong(ids[i])); update.setStatus("Approved"); // MonthlyReport update = monthlyReportManager.load(ids[i]); dailyReportManager.update(update); } } model.put("success", "true"); out.toJson(model); return null; }public ModelAndView rejectDailyReport(WebInput in, WebOutput out, LoginUser loginUser, Map<String, Object> model) throws Exception { String[] ids = null; if (in.getString("ids") != null) { ids = in.getString("ids").split(","); } if (ids != null) { for (int i = 0; i < ids.length; i++) { System.out.println(ids[i]); DailyReport update = dailyReportManager.load(Long.parseLong(ids[i])); update.setStatus("Reject"); // MonthlyReport update = monthlyReportManager.load(ids[i]); dailyReportManager.update(update); } } model.put("success", "true"); out.toJson(model); return null; }