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 });注意:
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; }
相关推荐
sql 高效分页存储过程 sql 高效分页存储过程 sql 高效分页存储过程 sql 高效分页存储过程 sql 高效分页存储过程
分页存储过程 分页存储过程 分页存储过程 sql代码
项目开发中写的oracle 增加,删除,修改,分页存储过程,含有对条件的判断和错误处理
sql Server 通用分页存储过程 sql Server 通用分页存储过程 sql Server 通用分页存储过程 sql Server 通用分页存储过程
MySql 分页 存储过程 MySql 分页 存储过程 MySql 分页 存储过程
oracle分页存储过程,oracle分页存储过程
高效分页存储过程高效分页存储过程高效分页存储过程高效分页存储过程高效分页存储过程高效分页存储过程高效分页存储过程高效分页存储过程高效分页存储过程高效分页存储过程
万能的分页存储过程 可实现各种情况下的分页功能 简单好用
通用分页存储过程 适用于分页 的通用存储过程
高效多条件 Oracle 分页存储过程 ,快速分页
分页存储过程示例系统,采用存储过程分页!
oracle分页存储过程详细的编码 可直接使用 拿去使用吧
PHP+MySql分页显示示例分析 PHP+MySql分页显示示例分析
分页存储过程 分页存储过程分页存储过程分页存储过程
MYSQL分页存储过程 非常实用的东西哦 希望大家能用上
SqlServer 分页 存储过程
sqlserver 分页调用的存储过程 t-sql 语句
自己利用分页存储过程实现GridView分页,可查询,排序,选择删除,批量删除,还有编辑。效率不错,App_Date下为数据库存储过程脚本,数据库为自带实例数据库NorthWind。
在DataGrid里执行分页增加删除修改分页