EditGridPanel增加，保存，删除，分页全过程分析 -

zyjustin9

浏览: 1293583 次
性别:
来自: 杭州

最近访客更多访客>>

XiaoPY

loginboot

xutao2811

杀死肉山

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EditGridPanel增加，保存，删除，分页全过程分析

博客分类：

Extjs

Extjs EditGridPanel

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;
}

Dao:

/**
 * 增加或更新资金
 * @return
 */
public boolean addOrUpdateApprociateFund(List<AppropriateFund> funds) {
	boolean done = false;
	Session s = null;
	try {
		s = HibernateUtil.getSession();
		s.beginTransaction();
		for (int i = 0; i < funds.size(); i++) {
			AppropriateFund fund = funds.get(i);
			if (fund.getId() == -1) {
				s.save(fund);
			}
			else {
				s.update(fund);
			}
		}
		s.getTransaction().commit();
		done = true;
	} catch (Throwable e) {
		logger.error(e.toString());
		HibernateUtil.endSession(s);
	} finally {
		HibernateUtil.endSession(s);
	}
	return done;
}

注意Ajax请求的返回值！！！

7.Extjs：删除一行或多行记录（通过获取勾选的记录来删除）

function removeFund(){
	var rcs = fundGrid.getSelectionModel().getSelections();  //获取勾选的记录
    if(!rcs||rcs.length<1){  
        Ext.Msg.alert("提示","请先选择要删除的行");  
        return;  
    }  
    else{  
        Ext.Msg.confirm("确认删除","请确认是否删除选中的项目支出条目？",function(btn){  
            if(btn == "yes"){//选中"是"的按钮  
                var ids = new Array();  
                for (var i = 0; i < rcs.length; i++) {  
                    ids.push(rcs[i].get("id"));  
                }  
                //异步发请求  
                Ext.Ajax.request({  
                    url:"deleteFunds.pay?doType=deleteFunds",  
                    method:"POST",  
                    params:{fundIds:ids.join(",")},  
                    success:function(response,option){  
                        var result = Ext.util.JSON.decode(response.responseText);  
                        if (result.success) {  
                            Ext.Msg.alert("删除成功","选中的下达资金信息已成功删除！");  
                            fundStore.rejectChanges();  
                            fundStore.reload();  
                        }
                        else {
                        	Ext.Msg.alert("删除失败","选中的下达资金信息删除失败！");  
                            fundStore.rejectChanges();  
                            fundStore.reload();  
                        }
                    },  
                    failure:function(response,option){  
                        Ext.Msg.alert("删除失败","删除过程中发生错误！");  
                    }  
                });  
            }  
        });  
    }  
}

注意：

1.获取勾选的记录进行删除。

2.可能是多个记录，需要拼接为字符串传到后台。

3.无论删除成功与否，都要清除掉修改过的记录并重新加载！

8.Java：删除一行或多行记录

Servlet：

else if ("deleteFunds".equals(action)) {
	String str;
	AppropriateDao dao = new AppropriateDao();
	String idStr = request.getParameter("fundIds");
	String[] idsArr = idStr.split(",");//分割字符串
	boolean done = dao.deleteAppropriateFunds(idsArr);
	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;
}

Dao：

/**
 * 删除资金信息
 * @param idsArr
 * @return
 */
public boolean deleteAppropriateFunds(String[] idsArr) {
	boolean done = false;
	Session s = null;
	try {
		s = HibernateUtil.getSession();
		s.beginTransaction();//注意必须开启事务
		StringBuffer ids = new StringBuffer();
		if (idsArr != null && idsArr.length > 0) {
			for (int i = 0; i < idsArr.length; i++) {
				ids.append(idsArr[i]);
				if (i != idsArr.length - 1) {
					ids.append(",");
				}
			}
		}
		SQLQuery query = s.createSQLQuery("delete from appropriate_fund where id in(" + ids +")");
		query.executeUpdate();
		s.getTransaction().commit();
		done = true;
	} catch (Throwable e) {
		logger.error(e.toString());
		HibernateUtil.endSession(s);
	} finally {
		HibernateUtil.endSession(s);
	}
	return done;
}

图示：