EditGridPanel增加,保存,删除,分页全过程分析
一.基础准备:
1.表结构:
2.实体类:
public class AppropriateFund { private Long id; private Long aid; private double totalFunds; private double country; private double province; private double county; private String fileNo; private Date fileDate; private String remark; ...... ...set/get }
3.映射文件:
<?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd"> <!-- Generated 2014-10-24 14:50:17 by Hibernate Tools 3.4.0.CR1 --> <hibernate-mapping> <class name="com.*.*.*.entity.AppropriateFund" table="APPROPRIATE_FUND"> <id name="id" type="java.lang.Long"> <column name="ID" precision="28" scale="0" /> <generator class="sequence"> <param name="sequence">SQ_APPROPRIATE_FUND</param> </generator> </id> <property name="aid" type="java.lang.Long"> <column name="AID" /> </property> <property name="totalFunds" type="double"> <column name="TOTAL_FUNDS" /> </property> <property name="country" type="double"> <column name="COUNTRY" /> </property> <property name="province" type="double"> <column name="PROVINCE" /> </property> <property name="county" type="double"> <column name="COUNTY" /> </property> <property name="fileNo" type="java.lang.String"> <column name="FILE_NO" /> </property> <property name="fileDate" type="java.sql.Date"> <column name="FILE_DATE" /> </property> <property name="remark" type="java.lang.String"> <column name="REMARK" /> </property> </class> </hibernate-mapping>
二:Extjs设计页面
1.创建Store:
var fundRecord = new Ext.data.Record.create([ {name:"id",type:"int"}, //注意type类型! {name:"aid",type:"int"}, {name:"totalFunds",type:"float"}, {name:"country",type:"float"}, {name:"province",type:"string"}, {name:"county",type:"string"}, {name:"fileNo",type:"string"}, {name:"fileDate",type:"date",format:"Y-m-d"}, {name:"remark",type:"string"} ]); var fundProxy = new Ext.data.HttpProxy({url:'getAppropriateFund.pay?doType=getAppropriateFund'}); var fundReader = new Ext.data.JsonReader({ root:'rows', totalProperty:'totalCount' //分页必须要有该项! },fundRecord); var fundStore = new Ext.data.Store({ proxy:fundProxy, reader:fundReader });注意:
扫描二维码关注公众号,回复:
586267 查看本文章
1).EditGridPanel增加行时需要用到Record,所以此处创建Store必须用Record!
2).Record没有long和double类型!
3).若要分页,则Reader必须加上totalProperty属性!
2.创建ColumnModel:
var fundSm = new Ext.grid.CheckboxSelectionModel();//表格面板的复选框 var fundCm = new Ext.grid.ColumnModel({ defaultSortable:false,//默认排序 columns:[ fundSm,//复选框 { header:"编号", dataIndex:"id", hidden:true, width:50 },{ header:"项目ID", dataIndex:"aid", hidden:true, width:50 },{ header:"总下达资金", dataIndex:"totalFunds", align:"center", editor:new Ext.form.NumberField({ decimalPrecision: 2, minValue: 0.01 }), width:100 },{ header:"中央资助金额", dataIndex:"country", align:"center", editor:new Ext.form.NumberField({ decimalPrecision: 2, minValue: 0.01 }), width:100 },{ header:"省资助金额", dataIndex:"province", align:"center", editor:new Ext.form.NumberField({ decimalPrecision: 2, minValue: 0.01 }), width:100 },{ header:"县资助金额", dataIndex:"county", align:"center", editor:new Ext.form.NumberField({ decimalPrecision: 2, minValue: 0.01 }), width:100 },{ header:"下达政策文件号", dataIndex:"fileNo", align:"center", editor:new Ext.form.TextField(), width:150 },{ header:"下达政策时间", dataIndex:"fileDate", align:"center", editor:new Ext.form.DateField({ format:'Y-m-d', readOnly:true }), renderer :function(v,p,r){ if(r.data.id==-1){ return ""; }else if(v==null||v==""){ return ""; }else{ return regDate(v,p,r); } }, width:120 },{ header:"备注", dataIndex:"remark", align:"center", editor:new Ext.form.TextField(), width:150 } ] });注意:
1).复选框需要在ColumnModel中加入。
2).注意NumberField的精度。
3).注意DateField的日期格式化。
3.创建EidtGridPanel:
var fundGrid = new Ext.grid.EditorGridPanel({ title:"资金明细", layout:"fit", sm:fundSm, //复选框 cm:fundCm, //ColumnModel ds:fundStore, //Store clicksToEdit:1, //单击几次可编辑 stripeRows:true, //斑马条纹 loadMask:{msg:'正在加载数据,请稍侯……'}, tbar:[ { text:"保存", iconCls:"save", handler:saveFund },{ text:"增加行", iconCls:"add", handler:addFund },{ text:"删除行", iconCls:"remove", handler:removeFund } ], bbar: new Ext.PagingToolbar({ pageSize: pageSize, store: fundStore, displayInfo: true, displayMsg: '当前显示 {0} - {1} ,共{2}条记录', emptyMsg: "没有数据", items: ['-'] }) });
注意:
1.分页必须要有Store,并且该Store必须要有totalProperty属性!
返回的分页数据:
{ totalCount: 2,//注意:分页的话必须要有该项 rows: [ { "aid": 27, "country": 0, "county": 1800, "id": 42, "province": 200, "totalFunds": 2000 }, { "aid": 27, "country": 0, "county": 0, "id": 41, "province": 10000, "totalFunds": 10000 } ] }
4.Extjs:增加一列空行
/*增加一行资金空行信息*/ function addFund(){ var newFund = new fundRecord({ id:-1, //id为-1是为了Dao中判断插入还是更新 aid:aid, totalFunds:0,//注意:这里若默认为"",在不输入值的情况下,后台取值会报错!!! country:0, province:0, county:0, fileNo:"", fileDate:"", remark:"" }) fundGrid.stopEditing(); //关闭表格的编辑状态 fundStore.add(newFund); fundGrid.startEditing(0,0); }
5.Extjs:保存资金信息
/*保存资金信息*/ function saveFund(){ //只提交修改过的记录 var records = fundStore.getModifiedRecords(); //获取更改过的记录 if(records && records.length > 0){ Ext.Msg.wait("正在保存..."); var rows = new Array(); for (var i = 0; i < records.length; i++) { var record = records[i]; var row = new Object(); var fields = record.data; var totalFunds = fields["totalFunds"]; var country = fields["country"]; var province = fields["province"]; var county = fields["county"]; if (totalFunds != (country + province + county)) { Ext.Msg.alert("系统提示","各级资助金额总和必须等于总下达资金"); return; } row = {id:fields.id,aid:fields.aid,totalFunds:fields.totalFunds,country:fields.country,province:fields.province, county:fields["county"],fileNo:fields["fileNo"],fileDate:fields["fileDate"],remark:fields["remark"]}; rows.push(row); }//此处展示了Js的两种不同的取值方式 //发送异步请求,保存数据 Ext.Ajax.request({ url:"updateAppropriateFund.pay?doType=updateAppropriateFund", method:"POST", timeout:300000, params:{updateSets:Ext.encode(rows)},//将对象编码转化为Json字符串 success:success, failure:function(){Ext.Msg.alert('信息','未成功提交数据!'); } }); function success(response,options){ var result = Ext.decode(response.responseText);//返回值转码 if(result.success){ Ext.Msg.hide(); Ext.Msg.show({title:'成功', msg: '数据保存成功', buttons: Ext.Msg.OK, icon: Ext.MessageBox.INFO}); //保存成功后刷新修改过的脏数据。 fundStore.rejectChanges(); fundStore.reload(); }else{ Ext.Msg.hide(); Ext.Msg.alert('信息','保存数据未成功!'); } } } }注意:
1.获取修改过的记录进行提交
2.要将修改过的记录编码转化为Json字符串,再传到后台
3.数据保存成功后,需要将改变的记录去除掉,再重新加载!
6.Java:增加或更新资金信息
Servlet:else if ("updateAppropriateFund".equals(action)) { String str; AppropriateDao dao = new AppropriateDao(); String fundsStr = request.getParameter("updateSets"); JSONArray jArray = new JSONArray(fundsStr); List<AppropriateFund> funds = new ArrayList<AppropriateFund>(); if (jArray != null) { for (int i = 0; i < jArray.length(); i++) { AppropriateFund fund = new AppropriateFund(); JSONObject jObject = jArray.getJSONObject(i); fund.setId(jObject.getLong("id")); fund.setAid(jObject.getLong("aid")); fund.setTotalFunds(jObject.getDouble("totalFunds")); fund.setCountry(jObject.getDouble("country")); fund.setProvince(jObject.getDouble("province")); fund.setCounty(jObject.getDouble("county")); fund.setFileNo(jObject.getString("fileNo")); if (jObject.getString("fileDate") != null && !jObject.getString("fileDate").equals("")) { fund.setFileDate(Date.valueOf(jObject.getString("fileDate").substring(0, jObject.getString("fileDate").lastIndexOf("T")))); } fund.setRemark(jObject.getString("remark")); funds.add(fund); } } boolean done = dao.addOrUpdateApprociateFund(funds); if(done){ str="{success:true}"; }else{ str="{success:false}"; } response.setContentType("text/html;charset=UTF-8"); PrintWriter out=response.getWriter(); out.print(str); out.close(); return; }