OA项目（增删改查功能基本实现---下）
二、岗位管理模块的 CRUD
步骤1、编写岗位管理列表的界面（webapp / app / view / role / List.js），内容如下：
Ext.define('OA.view.role.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.rolelist',
layout : 'fit',
id : 'rolelist',
store: 'Roles',
selModel : Ext.create('Ext.selection.CheckboxModel'),
//定义顶部按钮
tbar: {
xtype: 'toolbar',
items: [{
text: '添加',
iconCls : 'icon-add',
action: 'onAddClick'
},'-',{
text: '删除',
iconCls : 'icon-delete',
action: 'onDeleteClick'
}]
},
// dockedItems: [{
bbar: [{
xtype: 'pagingtoolbar',
store: 'Roles',
dock: 'bottom',
displayMsg: '显示 {0} - {1} 条记录，总共 {2} 条记录',
beforePageText: "第",
afterPageText: "页,共 {0} 页",
displayInfo: true
}],
columns: [{
header: 'ID',
dataIndex: 'id',
}, {
header: '岗位',
dataIndex: 'name',
flex: 1
}, {
header: '岗位描述',
dataIndex: 'description',
flex: 1
}],
});
PS：①、 tbar 定义顶部工具栏
②、bbar 定义底部工具栏，里面要传入 store，用于分页
步骤2、编写 store层组件（webapp / app / store / Roles.js） 内容如下：
Ext.define('OA.store.Roles', {
extend: 'Ext.data.Store',
model: 'OA.model.Role',
id : 'roleStore',
pageSize: 3,
autoLoad: true,
proxy: {
type: 'ajax', // 发送 ajax 请求
api: {
read: 'roleActionListByPage.action', // 请求分页查询的 URL
},
reader: {
type:'json', // 返回 JSON 格式数据
root: 'roles', // 指定数组（集合）的 key
totalProperty: 'totalCount' // 指定返回总记录数的 key
}
}
});PS：①、 pageSize：3 表示每一页3条记录，在发送ajax 请求时会变成 limit=3 传入给后台
②、autoLoad : true, 表示创建组件的时候就加载数据
步骤3、编写 model 层组件（webapp / app / model / Role.js），内容如下：
Ext.define('OA.model.Role', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'description']
});步骤4、编写 view层组件（webapp / app / view / role / RoleManagerWindow.js），内容如下：
Ext.define('OA.view.role.RoleManagerWindow', {
extend: 'Ext.window.Window',
alias: "widget.rolemanagerwindow",
id: 'rolemanagerwindow',
title: '添加岗位',
layout: 'fit',
autoShow: true,
width: 300,
height: 200,
bodyPadding : '10 5',
modal : true,
initComponent: function(){
this.items = [{
xtype: 'form',
fieldDefaults : {
labelAlign : 'left',
labelWidth : 90,
anchor : '100%'
},
items: [{
xtype: 'textfield',
name: 'id',
fieldLabel: "ID",
readOnly : true
},{
xtype:'textfield',
name: 'name',
fieldLabel: "岗位"
}, {
xtype:'textfield',
name: 'description',
fieldLabel: "岗位描述"
}]
}];
this.buttons = ['->',{
text:'保存',
iconCls : 'icon-save',
action: 'save'
}, {
text:'取消',
iconCls : 'icon-cancel',
scope: this,
handler: this.close
},'->'];
this.callParent(arguments);
}
});
PS：action: 'save'，当点击保存时，调用某方法实现保存，该方法在 controller 层定义。
步骤5、编写 controller 层组件（webapp / app / controller / Roles.js），内容如下：
Ext.define('OA.controller.Roles', {
extend: 'Ext.app.Controller',
models: [
'Role'
],
stores: [
'Roles' //先向 控制器中注册 store组件， 然后在 view层才可以使用这个 store存储的数据
],
views: [
'role.List',
'role.RoleManagerWindow'
],
init: function(){
this.control({
'rolelist': {
itemdblclick: this.editRole
},
'rolelist button[action="onAddClick"]':{ //点击 新增按钮
click: this.onAddClick
},
'rolelist button[action="onDeleteClick"]':{ // 点击 删除按钮
click: this.onDeleteClick
},
'rolemanagerwindow button[action="save"]' : {
click: this.onSave //点击保存按钮
}
})
},
//点击添加按钮
onAddClick: function(btn){
var win = Ext.widget('rolemanagerwindow');
var form = win.down('form').getForm();
form.findField('id').hide();
},
//双击 grid数据
editRole: function(grid, record){
var win = Ext.widget('rolemanagerwindow');
win.setTitle('岗位信息修改');
win.down('form').loadRecord(record);
},
//点击删除按钮
onDeleteClick: function(){
var rolelist = Ext.getCmp('rolelist');
var me = this;
Ext.Msg.confirm('删除确认', '删除的记录不可恢复，继续吗？', function(btn){
if(btn == 'yes'){
var s = rolelist.getSelectionModel().getSelection();
var ids = [];
var idProperty = 'id';
for (var i = 0, r; r = s[i]; i++) {
ids.push(r.get(idProperty));
}
Ext.Ajax.request({
url : 'roleActionDelete.action',
params : {
ids : ids.join(',')
},
success : function(response) {
if (response.responseText != '') {
var res = Ext.JSON.decode(response.responseText);
if (res.success) {
Ext.Msg.alert('消息提示', '删除成功');
// Ext.example.msg('系统信息', '{0}', "操作成功！");
rolelist.getStore().reload();
} else {
Ext.Msg.alert('消息提示', '删除失败,原因：'+res.msg);;
}
}
}
});
}
});
},
onSave: function(btn){
var rolelist = Ext.getCmp('rolelist');
//1.数据校验，校验通过后发起Ajax 请求
var win = btn.up('window');
var form = win.down('form').getForm();
if(form.isValid()){
var vals = form.getValues();
var url;
if(vals['id'] == null || vals['id'] == ""){// 没有id值的，认为是新增操作
url = "roleActionAdd.action";
} else {
url = "roleActionUpdate.action";
}
console.info(url);
Ext.Ajax.request({
url: url,
params: {
'role.id':vals['id'],
'role.name': vals['name'],
'role.description' : vals['description']
},
method: 'POST',
success : function(response) {
if (response.responseText != '') {
var res = Ext.JSON.decode(response.responseText);
if (res.success) {
Ext.Msg.alert('消息提示', '保存成功');
win.close();
rolelist.getStore().reload();
} else {
Ext.Msg.alert('消息提示', '保存失败,原因：'+res.msg);;
}
}
},
failure : function(response) {
Ext.Msg.alert('消息提示', '保存失败');;
}
});
}
}
});
PS: ①、 将以上定义的 view 层、 model层、 store层组件注册到 controller 组件中
②、添加事件监听函数，如 双击列表某一列， 点击添加按钮，点击删除按钮，点击保存按钮。
三、分页查询
1、分页查询请求，当点击左侧树型菜单中的 "岗位管理" 时，在主区域tabpanel 添加 xtype：'rolelist'的 gridpanel 面板，由于设置了 autoLoad： true，因此请求在加载 store的js文件的时候就以及发送出去了。
请求地址：http://localhost:8080/oa/roleActionListByPage.action?_dc=1561688311168&page=1&start=0&limit=3
2、在struts.xml 中配置相应的action 来处理这个请求
3、RoleAction 类中处理请求的代码
package cn.oa.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.beanutils.ConvertUtils;
import org.apache.struts2.ServletActionContext;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import com.google.gson.Gson;
import com.google.gson.JsonArray;
import com.google.gson.JsonElement;
import com.google.gson.JsonObject;
import com.opensymphony.xwork2.ActionSupport;
import cn.oa.model.Role;
import cn.oa.service.RoleService;
import net.sf.json.JSONObject;
@Controller
@Scope("prototype")
public class RoleAction extends ActionSupport{
@Resource
private RoleService roleService;
private Role role;
private String ids;
private int start; //从第几条开始
private int limit; //查询几条
...................此处省略 get / set 方法..........................
/**
* 列表
*/
public void listByPage() throws Exception {
//1. 查询总页数
int totalCount = roleService.getTotalCount();
System.out.println("totalCount= "+ totalCount);
//1. 调用service 层查询所有数据
List roles = roleService.findByPage(start, limit);
System.out.println("roles= "+ roles);
//2. 将数据以JSON 格式输出
JSONObject obj = new JSONObject();
obj.element("totalCount", totalCount);
obj.element("roles", roles);
writeJSON(obj);
}
private void writeJSON(Object obj) throws IOException{
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(obj);
out.close();
}
}
PS： ①、编写 writeJSON 方法用于方便输出 JSON 格式数据
②、 start 与 limit 属性用于接收前端传来的数据，从第几条数据开始取，一次取几条数据。
4、在 RoleService 接口中定义这个方法， RoleServiceImpl 类实现该方法
package cn.oa.service.impl;
import java.util.List;
import javax.annotation.Resource;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import cn.oa.dao.RoleDao;
import cn.oa.model.Role;
import cn.oa.service.RoleService;
@Service("roleService")
@Transactional
public class RoleServiceImpl implements RoleService{
@Resource
private RoleDao roleDao;
@Override
public List findByPage(int start, int limit) throws Exception {
return roleDao.findByPage(start, limit);
}
@Override
public int getTotalCount() throws Exception {
return roleDao.getTotalCount();
}
}
5、在 BaseDao 接口中定义方法， 在 BaseDaoImpl 类中实现
package cn.oa.base;
import java.lang.reflect.ParameterizedType;
import java.util.Collections;
import java.util.List;
import javax.annotation.Resource;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import cn.oa.model.Role;
@SuppressWarnings("unchecked")
public class BaseDaoImpl implements BaseDao {
@Resource
private SessionFactory sessionFactory;
public void setSessionFactory(SessionFactory sessionFactory) {
this.sessionFactory = sessionFactory;
}
protected Class clazz;
public BaseDaoImpl() {
// 通过反射得到T的真实类型
ParameterizedType pt = (ParameterizedType) this.getClass().getGenericSuperclass();
this.clazz = (Class) pt.getActualTypeArguments()[0];
System.out.println("clazz = " + clazz.getName());
}
protected Session getSession() {
return sessionFactory.getCurrentSession();
}
@Override
public int getTotalCount() throws Exception {
Long res = (Long) getSession().createQuery("SELECT COUNT(*) FROM " + clazz.getSimpleName()).uniqueResult();
return res.intValue();
}
@Override
public List findByPage(int start, int limit) throws Exception {
return getSession().createQuery("FROM "+ clazz.getSimpleName())
.setFirstResult(start)
.setMaxResults(limit)
.list();
}
}
四、删除记录
1、在列表左侧添加一列 复选框，用于多选。 首先给删除按钮注册监听函数，当选中数据点击删除时，弹出窗口询问确定是否删除？ 如果选中确定删除，则发送请求给后台删除数据，删除成功后给出弹窗提示删除成功。
发送删除请求的URL: http://localhost:8080/oa/roleActionDelete.action
2、在struts.xml 中配置相应的action 来处理这个请求
3、RoleAction 类中处理请求的代码
/**
* 删除岗位
* @throws Exception
*/
public void delete() throws Exception {
long[] temp = (long[]) ConvertUtils.convert(ids.split(","),long.class);
try{
roleService.delete(temp);
writeJSON("{success:true}");
} catch (Exception e) {
writeJSON("{success:false,msg:"+e.getMessage()+"}");
throw e;
}
}4、在 RoleService 接口中定义这个方法， RoleServiceImpl 类实现该方法
@Override
public void delete(long[] ids) throws Exception {
for(int i = 0; i < ids.length; i++){
roleDao.delete(ids[i]);
}
}5、在 BaseDao 接口中定义方法， 在 BaseDaoImpl 类中实现
@Override
public void delete(Long id) throws Exception {
Object obj = getSession().get(clazz, id);
getSession().delete(obj);
}
五、添加与修改岗位管理
1、定义 弹出窗口代码，并设置相应的点击事件
2、点击保存按钮的相应事件
3、在struts.xml 中配置相应的action 来处理这个请求
4、RoleAction 类中处理请求的代码
/**
* 添加岗位
* @throws Exception
*/
public void add() throws Exception {
System.out.println("add()....");
System.out.println(role);
try{
roleService.save(role);
writeJSON("{success:true}");
} catch (Exception e) {
writeJSON("{success:false,msg:"+e.getMessage()+"}");
throw e;
}
}
/**
* 更新岗位
* @throws Exception
*/
public void update() throws Exception {
System.out.println("update()....");
System.out.println(role);
try{
roleService.update(role);
writeJSON("{success:true}");
} catch (Exception e) {
writeJSON("{success:false,msg:"+e.getMessage()+"}");
throw e;
}
}5、在 RoleService 接口中定义这个方法， RoleServiceImpl 类实现该方法
@Override
public void save(Role role) throws Exception {
roleDao.save(role);
}
@Override
public void update(Role role) throws Exception {
roleDao.update(role);
}6、在 BaseDao 接口中定义方法， 在 BaseDaoImpl 类中实现
@Override
public void save(T t) throws Exception {
getSession().save(t);
}
@Override
public void update(T t) throws Exception {
getSession().update(t);
}