1. 本章任务
上一章已实现了项目信息的分页浏览，本章来实现新增项目的功能。为了方便用户使用，我们通过弹窗来实现项目信息的输入。最终达到如下效果：
2. 添加新增按钮
在body中添加操作栏，并在操作栏中添加新增按钮
<body> <div class="tool-box"><!-- 操作栏 --> <a id="btn" onclick="btnAddClick()" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a> </div> <table id="mainTable" title="项目列表" class="easyui-datagrid" url="CoreServlet?method=getProjectPage" pagination="true" singleSelect="true" fitColumns="true"> <thead> <tr> <th data-options="field:'id',width:50">序号</th> <th data-options="field:'type',width:50">类型</th> <th data-options="field:'name',width:50">名称</th> <th data-options="field:'about',width:100">简介</th> </tr> </thead> </table> </body> 然后稍微调下样式： .tool-box { margin-bottom: 12px; } 1 2 3 3. 点击新增后弹窗 注意新增绑定了btnAddClick方法，所以在此方法中可以操作弹窗。 <script> function btnAddClick() { $('#dialog-add').dialog('open'); } </script> 1 2 3 4 5 解释下，执行btnAddClick方法后，id为dialog-add的弹窗将显示在页面上。 4. 弹窗代码编辑 我们根据需要开发下弹窗代码： <!-- 新增弹窗 --> <div id="dialog-add" class="easyui-dialog" title="新增" data-options="iconCls:'icon-ok',closed:'true'" style="width: 600px; height: 400px; padding: 10px"> <table> <tr> <td>类型：</td> <td> <select id="add-type" class="easyui-combobox" style="width: 200px;"> <option value="award">奖学金</option> <option value="help">助学金</option> </select> </td> </tr> <tr> <td>名称：</td> <td><input id="add-name" class="easyui-textbox" style="width: 200px"></td> </tr> <tr> <td>简介：</td> <td><input id="add-about" class="easyui-textbox" style="width: 200px"></td> </tr> <tr> <td></td> <td><a id="btn" onclick="btnAddSubmit()" href="#" class="easyui-linkbutton">保存</a></td> </tr> </table> </div> 注意使用class="easyui-dialog"样式后，div默认隐藏，并且在显示时会将内容显示为弹窗样式。 5. 提交新增内容 点击保存按钮，执行btnAddSubmit方法，如下。注意新增成功后，需要重新加载数据表格，以便从界面上显示新增的项目信息。 // 新增保存 function btnAddSubmit() { var param = { type: $("#add-type").val(), name: $("#add-name").val(), about: $("#add-about").val(), } $.ajax({ url: "CoreServlet?method=addProject", type: "post", dataType: "json", data: param, success: function (res) { console.log(res); if (res.code == 0) {//成功则刷新表格 $('#mainTable').datagrid('reload'); $('#dialog-add').dialog('close');//关闭新增弹窗 } else {//提示错误信息 alert(res.msg); } }, }); } 6. 后台处理 后台处理就很简单了，接收前端输入的参数然后插入数据库就OK。 // 新增项目保存 else if (method.equals("addProject")) { ProjectDao projectDao = new ProjectDao(); Project project = new Project(); project.setType(request.getParameter("type")); project.setName(request.getParameter("name")); project.setAbout(request.getParameter("about")); projectDao.insert(project); result.setCode(0); result.setMsg("操作成功"); } 7. 测试 重启tomcat可进行测试验证，大功告成。