[前端][easyui]简单DataGrid表格

工作第三个任务是解决日报提交页面，第一次接触了前端框架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;

    }

转载于:https://my.oschina.net/u/2353274/blog/405015