Ext GridPanel Note(SSH简单增删改查)
index.jsp
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/ext-all.css" type="text/css"></link>
<script type="text/javascript" src="${pageContext.request.contextPath }/resources/ext-base.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/resources/ext-all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/resources/ext-lang-zh_CN.js" charset="utf-8"></script>
<SCRIPT type="text/javascript" src="${pageContext.request.contextPath }/index.js"></SCRIPT>
</head>
<body>
<div id="topic-grid" align="center"></div>
</body>
index.js
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL = './resources/images/default/s.gif';
var status; //区分是update(status=1)还是insert(status=0)
var reader = new Ext.data.JsonReader({
root : "list",
totalProperty : 'totalCount',
fields : [ 'levelid', 'levelname', 'description']
});
var proxy = new Ext.data.HttpProxy({
url :"good!findAll.action"
});
var store = new Ext.data.Store({
reader : reader, // 读取数据源用json方法(三种方法1.读取json用JsonReader,2读取数组使用ArrayReader3.读取XML用XmlReader)
proxy : proxy
});
var renderer_date = function(value) { //对日期字段进行转换显示,否则将显示[object , object]
var _value;
if(Ext.isEmpty(value)) return "";
else if(Ext.isEmpty(value.time)) _value = new Date(value);
else _value = new Date(value.time); return _value.format("Y-m-d H:i:s");
};
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({header : "编号",width : 60}),
{header : "名称", dataIndex : 'levelname', width : 150, align:"center" ,locked : false},
// {header : "日期", dataIndex : 'description',align:"center",width : 400,renderer : renderer_date}
{header : "描述", dataIndex : 'description',align:"center",width : 400}
]);
cm.defaultSortable = true;
var combobox = new Ext.form.ComboBox({ // 定义一个智能感应的ComboBox,放在tbar里
id : 'cmbox',
title : '名称',
store : store,
mode : "local", // 从本地加载数据（智能感应效果）
displayField : 'levelname', // 显示字段类似DropDownlist中的DataTextField
valueField : 'levelname', // 类似DropDownlist中的DataValueField
width : 160,
shadow:"frame",
allowBlank : false, // 不允许为空
emptyText : '输入名称进行搜索', // 默认值
blankText : '请输入名称' // 当为空的时候提示
});
var grid = new Ext.grid.GridPanel({
collapsible : true, // 是否可以展开
id : 'grid_id',
renderTo : "topic-grid",
title : 'GridPanel',
width : 700,
height : 500,
store : store,
cm : cm,
loadMask : {
msg : '加载数据中,请等待......'
},
stripeRows:true,//stripeRows : Boolean 是否显示行的分隔符
tbar : [{
text : "编辑",
cls : 'x-btn-text-icon details',
icon : "./resources/images/default/tree/edit.png",
handler :editPanel
},{
text : "添加",
cls : 'x-btn-text-icon details',
icon : "./resources/images/default/tree/add.png",
handler : function() {
Edit_Panel.getForm().reset();
status = 0;
Edit_Window.setTitle("添加编辑");
Edit_Window.show();
}
},{
text : "删除",
cls : 'x-btn-text-icon details',
icon : "./resources/images/default/tree/remove.png",
handler : delRecord
},'-',
combobox,'-',{ // 定义一个搜索框
xtype : 'button',
cls : 'x-btn-text-icon details',
icon : "./resources/images/default/tree/search.png",
text : "查找",
handler : function() {
// Ext.getCmp("searchfield").getValue()得到Textfield的值
// 过滤条件为角色名称(RoleName)来搜索匹配的信息,
// filter方法第一个参数:过滤的字段名称,第二个参数要匹配的信息,
// 第三个参数true表示从开始位置开始搜索,第四个参数false表示不区分大小写
store.filter('levelname',Ext.getCmp("combobox").getValue(), false, false);
}
}
],
bbar : new Ext.PagingToolbar({// 自带分页工具条
pageSize : 10,
store : store,
displayInfo : true,
displayMsg : '显示 {0}-{1}条 / 共 {2} 条',
emptyMsg : "没有数据"
})
});
store.load({params:{start:0,limit:10}});
function editPanel() { //var editPanel = function(){} 此格式亦可,但handler : editPanel 无效,所以写成function editPanel(){}
Edit_Panel.getForm().reset(); // 重置编辑模板.也就是将form里面的值reset掉,you know?
rows = Ext.getCmp("grid_id").getSelectionModel().getSelections();
if (rows.length != 1) {
Ext.MessageBox.alert("提示", "请你选择一行数据进行操作！");
return;
}
Edit_Window.setTitle("修改编辑");
status = 1;
Edit_Window.show(); // 打开窗体
Edit_Panel.getForm().findField('levelid').setValue(rows[0].get('levelid')); // 将选中项的信息绑定到TextField中
Edit_Panel.getForm().findField('levelname').setValue(rows[0].get('levelname'));
Edit_Panel.getForm().findField('description').setValue(rows[0].get('description'));
};
grid.on("rowdblclick",function (){ //GirdPanel 双击事件
editPanel();
});
var Edit_Panel = new Ext.form.FormPanel({ // 编辑panel，用于添加，修改
labelWidth : 70,
labelAlign:"right",
url : "good!updateLevel.action", //默认url
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 380,
defaults : {
width : 150
},
defaultType : 'textfield',
items : [
{ fieldLabel : '编号 ', name : 'levelid', xtype : "hidden"},
{ fieldLabel : '名称 ', name : 'levelname',
allowBlank : false, blankText : "不允许为空", // 是否允许为空！false不允许 \提示信息
minLength : 2, minLengthText : "姓名最少2个字符"} ,
{ fieldLabel : "描述 ", name : "description"}]
});
var Edit_Window = new Ext.Window({ // 弹出层
collapsible : true, maximizable : true, height : 200, width : 378, modal : true, closeAction : "hide",
layout : 'form', // layout布局方式为form 所谓布局就是指容器组件中子元素的分布，排列组合方式
plain : true, bodyStyle : 'padding:5px;', buttonAlign : 'center', items : Edit_Panel,
buttons : [
{ text : '保存', handler : function (){
submitForm();
Edit_Window.hide();
}
}, {
text : '重置',handler : function() {
Edit_Panel.getForm().reset();
}
},{
text : "关闭", handler : function() {
Edit_Window.hide();
}
} ]
});
function submitForm() {
if(status == 0) {
Edit_Panel.form.submit({
method : "post",
scope : this,
params : "method=add",
success : function (form,action) {
store.reload();
grid.store.reload();
},
failure : function (form,actiion) {
Ext.MessageBox.alert("提示","输入有误,请重新输入");
}
});
} else {
Edit_Panel.form.submit({
method : "post",
scope : this,
params : "method=update",
success : function (form,action) {
store.reload();
grid.store.reload();
},
failure : function (form,actiion) {
Ext.MessageBox.alert("提示","输入有误,请重新输入");
}
});
}
}
function delRecord() { // 删除方法
rows = Ext.getCmp("grid_id").getSelectionModel().getSelections(); // 获取ID为grid_id的控件名称得到当前选中项
if (rows.length == 0) {
Ext.MessageBox.alert("提示", "请至少选择一行你要删除的数据！");
return;
}
Ext.MessageBox.confirm('提示', '确实要删除所选的记录吗?', showResult);
}
function showResult(btn) {
if (btn == 'yes') {
var row = Ext.getCmp("grid_id").getSelectionModel().getSelections();
var ids = "";
for ( var i = 0 ; i < row.length; i++) {
ids = ids+row[i].get("levelid")+",";
}
// 将要删除的信息传递到后台处理,然后重新加载grid
var conn = new Ext.data.Connection();
conn.request({
url : "good!deleteLevel.action",
params : "ids="+ids,
method : 'post',
scope : this,
callback : function(options, success, response) {
if (success) {
store.reload();
grid.store.reload();
} else {
Ext.MessageBox.alert("提示", "所选记录删除失败！");
}
}
});
}
};
});
struts.xml 就不写了,里面就一个
<action name="good" class="action.Action"> </action>
BaseAction.java
Action.java
public class Action extends BaseAction{
private Level level;
private List levels;
public void findAll() throws IOException {
HttpServletResponse resp = ServletActionContext.getResponse();
resp.setContentType("text/html;charset=utf-8"); //设置编码,防止乱码
PrintWriter out =resp .getWriter();
IBaseDAO dao = (BaseDAOImpl)getBean("DAO");
levels = dao.findAll("from Level");
JSONArray array = JSONArray.fromObject(levels);
out.println("{success:true,totalCount : " + levels.size() + ", list:" + array.toString() + "}"); //success:true,为了update,add的提交之后的callback
out.flush();
out.close();
}
public void updateLevel() throws Exception{
HttpServletRequest req = ServletActionContext.getRequest();
HttpServletResponse resp = ServletActionContext.getResponse();
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
model.Level level = new model.Level();
IBaseDAO dao = (BaseDAOImpl)getBean("DAO");
String param = req.getParameter("method");
System.out.println("method : "+param);
if("update".equals(param)) {
level.setLevelid(Long.parseLong( req.getParameter("levelid")));
level.setLevelname(req.getParameter("levelname"));
level.setDescription(req.getParameter("description"));
dao.update(level);
} else if("add".equals(param)) {
level.setLevelname(req.getParameter("levelname"));
level.setDescription(req.getParameter("description"));
dao.insert(level);
}
findAll();
}
public void deleteLevel() {
HttpServletRequest req = ServletActionContext.getRequest();
IBaseDAO dao = (BaseDAOImpl)getBean("DAO");
String ids = req.getParameter("ids");
String id[] = ids.split(",");
for(int i=0;i<id.length;i++) {
Level l = (Level)dao.searchById(Level.class, Long.parseLong(id[i]));
dao.delete(l);
}
}
public Level getLevel() {
return level;
}
public void setLevel(Level level) {
this.level = level;
}
public List getLevels() {
return levels;
}
public void setLevels(List levels) {
this.levels = levels;
}
}
其实真没啥技术含量,不过刚开始弄的时候有点麻烦。传几张图片吧
对了,那个分页好像没用,因为用的是Ext.data.HttpProxy,而Ext.PagingToolbar 好像不支持这个。无语中.........继续想办法吧,
网友们要是有什么好的方法可以发我邮箱(guoxianlong@foxmail.com),一起分享.
