会员卡管理系统技术解析(七) 会员卡建卡记录查询

会员卡建卡记录查询这个模块功能可以查看员工录入的建卡记录信息。可以通过日期（如20150528）或记录单号对单据进行模糊筛选查询。还可以对单据进行审核、删除、修改等操作。

1.1界面效果图

1.1（图1）

从界面可以看到本项目这里用到的控件有：

控件名称

说明

搜索框（easyui-searchbox）

第一要设置每个控件的id，第二设置样式不设置也有默认，第三（data-options）是数据操作:可以设置控件的一些属性和事件

表格控件（easyui-datagrid）

表格超链接操作列

1.2功能实现

第1步：数据库（与控件使用方法）

1、表与关系

1.1建卡记录

表1: 员工表（Sys_Staff）

用于存放员工信息

列名

数据类型

主键/外键

说明

StaffID

int

主键

员工ID

MembershipCardStorageLocationID

int

外键

会员卡保管地点表，会员卡保管地点ID

ZoneID

int

外键

区域表，区域ID

IDTypeID

int

外键

基础属性集合明细表，证件类型ID

IDNumber

nchar(20)

　

证件号码

Birthday

date

　

出生日期

MailingAddress

nchar(30)

　

通讯地址

Email

nchar(20)

　

E-mail

PrivateCallNumber

nchar(20)

　

私人电话

MobileNumber

nchar(20)

　

手机号码

StaffDegree

nchar(20)

　

员工学历

Vehicle

nchar(20)

　

交通工具

FamilyMembers

int

　

家庭成员数量

HobbiesAndInterests

nchar(30)

　

兴趣爱好

StaffName

nchar(20)

　

员工姓名

ESEX

nchar(10)

　

员工性别

表2:会员卡建卡记录表（Pw_MembershipCard）

用于存放会员卡建卡记录信息

列名

数据类型

主键/外键

说明

MembershipCardID

int

主键

会员卡建卡记录ID

BookerID

int

外键

员工表，登记人ID

VerifierID

int

外键

员工表，审核人ID

VerifyTime

date

 

审核时间

IsVerify

nchar(10)

 

审核状态

RecordNumber

nchar(30)

 

记录编号

BookTime

date

 

登记时间

 1.2建卡记录明细

表1:会员卡建卡明细表（Pw_MembershipCardDetails）

用于存放建卡记录明细信息

列名

数据类型

主键/外键

说明

MembershipCardDetailsID

int

主键

会员卡建卡明细ID

MembershipCardID

int

外键

会员卡建卡记录表, 会员卡建卡记录ID

MembershipCardTypeID

int

外键

会员卡类型表, 会员卡类型ID

MembershipCardStorageLocationID

int

外键

会员卡保管地点表,保管地点ID

StateOfTheMembershipCardID

int

外键

基础属性集合明细表,会员卡状态ID

ChangeTheMembershipCardID

int

外键

基础属性集合明细表,变更会员卡状态ID

UpdateRankID

int

外键

会员卡级别表,会员卡级别ID

KeeperID

int

外键

员工表,保管人ID

Remarks

nchar(200)

 

备注

MembershipCardCardNumber

nchar(50)

 

会员卡卡号

SpecifyTheValidityTime

date

 

有效期指定时间

ValidityTime

date

 

有效期时间

WriteCardStatus

nchar(10)

 

写卡状态

WriteTime

date

 

写卡时间

NominalAmount

money

 

面值金额

表2:会员卡级别表（Sys_MembershipCardLevel） 

    用于存放会员卡级别信息

列名

数据类型

主键/外键

说明

MembershipCardLevelID

int

主键

会员卡级别ID

MembershipCardNumberLevel

nchar(10)

外键

会员卡级别代码

MembershipCardLevelNames

nchar(30)

外键

会员卡级别名称

                                                                                                                  

表3：会员卡类型（Sys_ MembershipCardType）

用于存放会员卡类型信息

列名

数据类型

主键/外键

说明

MembershipCardTypeID

int

主键

会员卡类型ID

MembersKakaKindID

int

外键

会员卡卡种ID

MembershipCardLevelID

int

外键

会员卡级别ID

MembershipCardIssuanceID

int

外键

会员卡发行方式ID

UseObjectID

int

外键

使用对象ID

DailyManagementFormID

int

外键

日常管理形式ID

TrackMediumID

int

外键

磁道介质ID

PreferentialWayID

int

外键

优惠方式ID

CardValidityPeriodSpecifiedID

int

外键

卡有效期指定方式ID

HairpinWithFaceValue

bit

　

发卡时有面值否

StoredValueCoupons

bit

　

储值优惠券标记否

ParticipateInTheScore

bit

　

参与消费积分否

leadCode

nchar(10)

　

前导码

PostpositionCode

nchar(10)

　

后置码

RequireTheSystemToMakeCard

bit

　

需要系统制卡否

NeedCompulsoryInspectionCard

bit

　

需要强制验卡否

LengthOfThePeriodOfValidity

nchar(10)

　

有效期长度

TrackContentEncryption

bit

　

磁道内容加密否

Invalid

bit

　

作废否

MembershipCardTypeCode

nchar(10)

　

会员卡类型代码

MembershipCardTypeName

nchar(30)

　

会员卡类型名称

KeepRecordsOfConsumption

bit

　

保存消费记录否

TotalLengthCardNumber

int

　

卡号总长度

OpenTheCouponAccount

bit

　

开通优惠券账户否

 

表4：会员卡卡种表（Sys_MembersKakaKind）

用于存放会员卡卡种表信息

列名

数据类型

主键/外键

说明

MembersKakaKindID

int

主键

会员卡卡种ID

MembersKakaCode

nchar(10)

　

会员卡卡种代码

MembersKakaKindsOfNames

nchar(30)

　

会员卡卡种名称

Invalid

bit

　

作废否

 

 

 

表5: 会员卡保管地点（Sys_MembershipCardStorageLocation）

用于存放会员卡保管地点信息

列名

数据类型

主键/外键

说明

MembershipCardStorageLocationID

int

主键

会员卡保管地点ID

MembershipCardStorageLocationFatherID

int

外键

会员卡保管地点父ID

MarkerTypeID

int

外键

标记类型ID

Name

nchar(20)

　

名称

LevelAtTheEndOfTheTag

bit

　

末级标记否

DuplicatedRecord

bit

　

复制记录否

Code

nchar(10)

　

代码

EncodingRules

int

　

编码规则

 

表6：员工表（Sys_Staff）

用于存放员工信息

列名

数据类型

主键/外键

说明

StaffID

int

主键

员工ID

MembershipCardStorageLocationID

int

外键

会员卡保管地点表，会员卡保管地点ID

ZoneID

int

外键

区域表，区域ID

IDTypeID

int

外键

基础属性集合明细表，证件类型ID

IDNumber

nchar(20)

　

证件号码

Birthday

date

　

出生日期

MailingAddress

nchar(30)

　

通讯地址

Email

nchar(20)

　

E-mail

PrivateCallNumber

nchar(20)

　

私人电话

MobileNumber

nchar(20)

　

手机号码

StaffDegree

nchar(20)

　

员工学历

Vehicle

nchar(20)

　

交通工具

FamilyMembers

int

　

家庭成员数量

HobbiesAndInterests

nchar(30)

　

兴趣爱好

StaffName

nchar(20)

　

员工姓名

表7: 基础属性集合明细表Sys_BasicAttributeCollectionDetails

用于存放基础属性集合明细信息

列名

数据类型

主键/外键

说明

BasicAttributeCollectionDetailsID

int

主键

基础属性集合明细ID

BasicAttributeSetID

int

外键

基础属性集合ID

BasicAttributeCollectionSubsidiaryName

nchar(50)

　

基础属性集合明细名称

 

2、控件使用方法：

搜索框（easyui-searchbox）

作用：可以通过日期（如20150528）或记录单号对单据进行模糊筛选查询。

 

搜索框控件截图：

创建搜索框控件界面代码：

<input class="easyui-searchbox" id="shSouSuo" data-options="prompt:'请输入单号查询',searcher:doSearch" />

获取搜索控件值的代码：

function doSearch(value){alert("搜索框的值："+value);}

注：可通过点击搜索图标或回车执行搜索框的搜索功能

表格控件（easyui-datagrid）

作用：以表格的形式展示需要显示的数据

 

表格控件截图：

创建表格控件界面代码：

<table id="tbJianKa" class="easyui-datagrid" title="会员卡建卡记录" style="height:230px" data-options="singleSelect:true,loadMsg:'加载中,请稍后...',url:'getJianKaJiLu', idField:'HuiYuanKaID'"><thead><tr><th data-options="field:'JiLuBianHao',width:150,align:'center'">记录编号</th><th data-options="field:'JianKaShuLiang',width:115,align:'center'">建卡数量</th><th data-options="field:'DengJiRen',width:130,align:'center'">登记人</th><th data-options="field:'DengJiShiJian',width:130,align:'center'">登记时间</th><th data-options="field:'ShenHeZhuangTai',width:130,align:'center'">审核状态</th><th data-options="field:'ShenHeRen',width:130,align:'center'">审核人</th><th data-options="field:'ShenHeShiJian',width:180,height:20,align:'center'">审核时间</th><th data-options="field:'HuiYuanKaID',width:140,align:'center',formatter:returnBtnColumn">操作</th></tr></thead></table>

给表格控件赋值的代码：

$("#tbJianKa").datagrid({url:"getJianKaJiLu"});

获取表格控件值的代码：

$("#tbJianKa").datagrid(‘getData’);

表格超链接操作列

作用：为表格中的每一列提供单独操作的功能

 

表格超链接操作列截图：

创建表格超链接操作列的界面代码：

//建卡记录操作function returnBtnColumn(HuiYuanKaID, row, rowIndex) {return  "<a href='javascript:shenHe(" + HuiYuanKaID + "," + rowIndex+ ")'>审核</a>  " + "<a href='javascript:shanChu(" + HuiYuanKaID + "," + rowIndex+ ")'>删除</a> ";}

第2步：服务层接口（IService）

首先，在之前创建的包“MEMBCERP.IService”下创建一个名为“JianKaYuFaFangIService”的类。结果如下图：

1.2.2（图1）

然后，更改LoginIService类的类型，接着，定义查询会员卡建卡的方法接口，代码如下：

package MEMBCERP.IService;import java.util.List;//服务层接口public interface JianKaYuFaFangIService {public List SelectJianKaXinXi(); /*查询会员卡建卡记录信息*/public List SelectJianKaMingXi(int JianKaMingXiID);/*查询会员卡建卡明细信息*/public List SelectJianKaShuLiang(int JianKaID);/*查询建卡数量*/public List MoHuChaXunJianKaXinXi(String MoHuNeiRong);/*模糊查询建卡记录信息*/}

第3步：服务层（Service）

首先，在之前创建的包“MEMBCERP.Service”下创建一个名为“JianKaYuFaFangService”的类。结果如下图：

1.2.3（图1）

然后，更改LoginIService类的类型，接着，定义查询会员卡建卡的方法接口实现，代码如下：

import java.util.List;import MEMBCERP.IDAO.IDAO;import MEMBCERP.IService.JianKaYuFaFangIService;import MEMBCERP.pojo.PwMembershipCard;import MEMBCERP.pojo.PwMembershipCardDetails;import MEMBCERP.pojo.PwMembershipCardIssued;import MEMBCERP.pojo.PwMembershipCardIssuedDetails;import MEMBCERP.pojo.PwMembershipCardRecipients;import MEMBCERP.pojo.PwMembershipCardRecipientsDetails;import MEMBCERP.pojo.PwMembershipCardRetreatAdopt;import MEMBCERP.pojo.PwMembershipCardRetreatAdoptDetails;import MEMBCERP.pojo.PwMembershipCardTransfers;import MEMBCERP.pojo.PwMembershipCardTransfersSubsidiary;import MEMBCERP.pojo.SysIncomePaymentDetails;import MEMBCERP.pojo.SysMaxNumber;import MEMBCERP.pojo.SysMembershipCardType;public class JianKaYuFaFangService implements JianKaYuFaFangIService{private IDAO dao;/*操作持久类*/public IDAO getDao() {return dao;}public void setDao(IDAO dao) {this.dao = dao;}/*查询会员卡建卡记录信息*/@Overridepublic List SelectJianKaXinXi() {try {/*尝试运行代码*/StringBuffer queryString=new StringBuffer();/*实例化StringBuffer*/queryString.append("SELECT JianKa.membershipCardId, JianKa.recordNumber, " +"DengJiRen.staffName, JianKa.bookTime, ShenHeRen.staffName, JianKa.verifyTime, " +"JianKa.isVerify ");//拼接需要查询的字段queryString.append("FROM PwMembershipCard AS JianKa, SysStaff AS DengJiRen, " +"SysStaff AS ShenHeRen ");/*实例化表*/queryString.append("WHERE JianKa.bookerId = DengJiRen.staffId " +"AND JianKa.verifierId = ShenHeRen.staffId ");/*满足条件*/return dao.findByHql(queryString.toString());} catch (Exception e) {/*尝试运行代码出现错误，执行异常处理*/return null;}}/*查询会员卡建卡明细信息 *JianKaMingXiID 建卡明细ID * */@Overridepublic List SelectJianKaMingXi(int JianKaMingXiID){try {/*尝试运行代码*/StringBuffer queryString = new StringBuffer();/*实例化StringBuffer*/queryString.append("SELECT JianKaMingXi.membershipCardDetailsId, " +"JianKaMingXi.membershipCardCardNumber,JiBie.membershipCardLevelNames, " +"BaoGuanDiDian.name,JianKaMingXi.specifyTheValidityTime, " +"JianKaMingXi.validityTime,JianKaMingXi.writeCardStatus, " +"JianKaMingXi.writeTime,HuiYuanKaZhuangTai.basicAttributeCollectionSubsidiaryName, " +"HuiYuanKaBianGengZhuangTai.basicAttributeCollectionSubsidiaryName, " +"GengXinJiBie.membershipCardLevelNames,JianKaMingXi.nominalAmount, " +"BaoGuanRen.staffName,JianKaMingXi.remarks,HuiYuanKaKaZhong.membersKakaKindsOfNames, " +"HuiYuanKaLeiXing.membershipCardTypeName,JianKaMingXi.membershipCardTypeId, " +"JianKaMingXi.membershipCardStorageLocationId,JianKaMingXi.keeperId ");//拼接需要查询的字段queryString.append("FROM PwMembershipCardDetails AS JianKaMingXi, " +"SysMembershipCardType AS HuiYuanKaLeiXing, SysMembershipCardLevel AS JiBie, " +"SysMembershipCardStorageLocation AS BaoGuanDiDian, " +"SysBasicAttributeCollectionDetails AS HuiYuanKaZhuangTai, " +"SysBasicAttributeCollectionDetails AS HuiYuanKaBianGengZhuangTai, " +"SysMembershipCardLevel AS GengXinJiBie,SysStaff AS BaoGuanRen, " +"SysMembersKakaKind AS HuiYuanKaKaZhong ");/*实例化表*/queryString.append("WHERE JianKaMingXi.membershipCardId = ? " +"AND JianKaMingXi.membershipCardTypeId = HuiYuanKaLeiXing.membershipCardTypeId " +"AND HuiYuanKaLeiXing.membershipCardLevelId = JiBie.membershipCardLevelId " +"AND JianKaMingXi.membershipCardStorageLocationId = BaoGuanDiDian.membershipCardStorageLocationId " +"AND JianKaMingXi.stateOfTheMembershipCardId = HuiYuanKaZhuangTai.basicAttributeCollectionDetailsId " +"AND JianKaMingXi.changeTheMembershipCardId = HuiYuanKaBianGengZhuangTai.basicAttributeCollectionDetailsId " +"AND JianKaMingXi.updateRankId = GengXinJiBie.membershipCardLevelId " +"AND JianKaMingXi.keeperId = BaoGuanRen.staffId " +"AND HuiYuanKaLeiXing.membersKakaKindId = HuiYuanKaKaZhong.membersKakaKindId ");/*满足条件*/return dao.findByHql(queryString.toString(),new Object[]{JianKaMingXiID});} catch (Exception e) {/*尝试运行代码出现错误，执行异常处理*/return null;}}/*查询建卡数量 * JianKaID 建卡记录ID * */@Overridepublic List SelectJianKaShuLiang(int JianKaID){try {/*尝试运行代码*/StringBuffer queryString=new StringBuffer();/*实例化StringBuffer*/queryString.append("SELECT JianKaMingXi.membershipCardDetailsId ");/*拼接需要查询的字段*/queryString.append("FROM PwMembershipCardDetails AS JianKaMingXi ");/*实例化表*/queryString.append("WHERE JianKaMingXi.membershipCardId = ?");/*满足条件*/return dao.findByHql(queryString.toString(),new Object[]{JianKaID});} catch (Exception e) {/*尝试运行代码出现错误，执行异常处理*/return null;}}/*模糊查询建卡记录信息 * MoHuNeiRong 模糊内容 * */@Overridepublic List MoHuChaXunJianKaXinXi(String MoHuNeiRong) {try {/*尝试运行代码*/StringBuffer queryString=new StringBuffer();/*实例化StringBuffer*/queryString.append("SELECT JianKa.membershipCardId, JianKa.recordNumber, " +"DengJiRen.staffName, JianKa.bookTime, ShenHeRen.staffName, JianKa.verifyTime, " +"JianKa.isVerify ");/*拼接需要查询的字段*/queryString.append("FROM PwMembershipCard AS JianKa, SysStaff AS DengJiRen, " +"SysStaff AS ShenHeRen ");/*实例化表*/queryString.append("WHERE JianKa.bookerId = DengJiRen.staffId " +"AND JianKa.verifierId = ShenHeRen.staffId "+"AND JianKa.recordNumber like '%' + ?+'%' ");/*满足条件*/return dao.findByHql(queryString.toString(),new Object[]{MoHuNeiRong});} catch (Exception e) {/*尝试运行代码出现错误，执行异常处理*/return null;}}}

第4步：方法层（Action）

首先，在之前创建的包“MEMBCERP.Action”下创建一个名为“JianKaYuFaFangAction”的类。结果如下图：

1.2.4（图1） 

然后，继承baseAction，接着，定义查询会员卡建卡的方法，代码如下：

package MEMBCERP.Action;import java.text.SimpleDateFormat;import java.util.Date;import java.util.HashMap;import java.util.List;import net.sf.json.JSONArray;import net.sf.json.JSONObject;import MEMBCERP.Function.encodingFunction;import MEMBCERP.IService.JianKaYuFaFangIService;import MEMBCERP.pojo.PwMembershipCard;import MEMBCERP.pojo.PwMembershipCardDetails;import MEMBCERP.pojo.PwMembershipCardIssued;import MEMBCERP.pojo.PwMembershipCardIssuedDetails;import MEMBCERP.pojo.PwMembershipCardRecipients;import MEMBCERP.pojo.PwMembershipCardRecipientsDetails;import MEMBCERP.pojo.PwMembershipCardRetreatAdopt;import MEMBCERP.pojo.PwMembershipCardRetreatAdoptDetails;import MEMBCERP.pojo.PwMembershipCardTransfers;import MEMBCERP.pojo.PwMembershipCardTransfersSubsidiary;import MEMBCERP.pojo.SysIncomePaymentDetails;import MEMBCERP.pojo.SysMaxNumber;import MEMBCERP.pojo.SysMembershipCardType;public class JianKaYuFaFangAction extends baseAction{public JianKaYuFaFangIService jianKaYuFaFangService;private JSONObject JSObj;    private JSONArray JSArr;    private String MSG;private int INT;private String ZJBL;    public String getZJBL() {return ZJBL;}public void setZJBL(String zJBL) {ZJBL = zJBL;}public int getINT() {return INT;}public void setINT(int iNT) {INT = iNT;}public JSONObject getJSObj() {return JSObj;}public void setJSObj(JSONObject jSObj) {JSObj = jSObj;}public JSONArray getJSArr() {return JSArr;}public void setJSArr(JSONArray jSArr) {JSArr = jSArr;}public String getMSG() {return MSG;}public void setMSG(String mSG) {MSG = mSG;}public JianKaYuFaFangIService getJianKaYuFaFangService() {return jianKaYuFaFangService;}public void setJianKaYuFaFangService(JianKaYuFaFangIService jianKaYuFaFangService) {this.jianKaYuFaFangService = jianKaYuFaFangService;}/*查询会员卡建卡记录信息*/public String getJianKaJiLu() {JSONArray jsArr=new JSONArray();/*实例化一个Array数组*/JSONObject jsObj=new JSONObject();/*实例化一个Object数组*/List lsJianKaJiLu=this.jianKaYuFaFangService.SelectJianKaXinXi();/*调用服务层方法，查询会员卡建卡记录信息*/for (int i = 0; i < lsJianKaJiLu.size(); i++) {/*循环遍历服务层返回的结果集*/Object[] obj=(Object[])lsJianKaJiLu.get(i);jsObj.clear();/*清空jsObj数组*//*调用服务层方法，查询建卡数量*/List lsShuLiang=this.jianKaYuFaFangService.SelectJianKaShuLiang(Integer.parseInt(obj[0].toString().trim()));/*写入参数到jsObj数组*/jsObj.put("HuiYuanKaID", obj[0]);jsObj.put("JiLuBianHao", obj[1].toString());jsObj.put("DengJiRen", obj[2]);jsObj.put("DengJiShiJian", obj[3]);jsObj.put("ShenHeZhuangTai", obj[6]);if(obj[6].toString().trim().equals("未审核")){jsObj.put("ShenHeShiJian","");jsObj.put("ShenHeRen","");}else {jsObj.put("ShenHeShiJian", obj[5]);jsObj.put("ShenHeRen", obj[4]);}jsObj.put("JianKaShuLiang", lsShuLiang.size());jsArr.add(jsObj);}/*实例化一个哈希表*/HashMap<String, Object> jsMap=new HashMap<String, Object>();/*将jsArr数组写入到jsMap中*/jsMap.put("rows", jsArr);JSObj=JSONObject.fromObject(jsMap);/*转换数组类型，并返回数组*/return SUCCESS;}/*模糊查询建卡记录信息 * MoHuNeiRong 模糊内容 * */public String MoHuChaXunJianKa() {/*获取页面传递过来的参数*/String MoHuNeiRong=encodingFunction.getMethodEncoding(this.getRequest().getParameter("MoHuNeiRong").trim());/*实例化一个Array数组*//*实例化一个Object数组*/JSONArray jsArr=new JSONArray();JSONObject jsObj=new JSONObject();List lsJianKaJiLu=this.jianKaYuFaFangService.MoHuChaXunJianKaXinXi(MoHuNeiRong);/*调用服务层方法，模糊查询建卡记录信息*/for (int i = 0; i < lsJianKaJiLu.size(); i++) {/*循环遍历服务层返回的结果集*/Object[] obj=(Object[])lsJianKaJiLu.get(i);jsObj.clear();/*清空jsObj数组*//*写入参数到jsObj数组*/jsObj.put("HuiYuanKaID", obj[0]);jsObj.put("JiLuBianHao", obj[1].toString());jsObj.put("DengJiRen", obj[2]);jsObj.put("DengJiShiJian", obj[3]);jsObj.put("ShenHeZhuangTai", obj[6]);if(obj[6].toString().trim().equals("未审核")){jsObj.put("ShenHeShiJian","");jsObj.put("ShenHeRen","");}else {jsObj.put("ShenHeShiJian", obj[5]);jsObj.put("ShenHeRen", obj[4]);}jsObj.put("JianKaShuLiang", i+1);jsArr.add(jsObj);}/*实例化一个哈希表*/HashMap<String, Object> jsMap=new HashMap<String, Object>();jsMap.put("rows", jsArr);/*将jsArr数组写入到jsMap中*/JSObj=JSONObject.fromObject(jsMap);/*转换数组类型，并返回数组*/return SUCCESS;}/*查询会员卡建卡明细信息 *JianKaMingXiID 建卡明细ID * */public String JianKaJiLuMingXi() {/*实例化一个Array数组*//*实例化一个Object数组*/JSONArray jsArr=new JSONArray();JSONObject jsObj=new JSONObject();/*获取页面传递过来的参数*/int JianKaID=Integer.parseInt(this.getRequest().getParameter("JianKaID").trim());/*调用服务层方法，查询会员卡建卡明细信息*/List lsJianKaJiLuMingXi=this.jianKaYuFaFangService.SelectJianKaMingXi(JianKaID);for (int i = 0; i < lsJianKaJiLuMingXi.size(); i++) {/*循环遍历服务层返回的结果集*/Object[] obj=(Object[]) lsJianKaJiLuMingXi.get(i);jsObj.clear();jsObj.put("JianKaMingXiID", obj[0].toString());jsObj.put("KaoHao", obj[1]);jsObj.put("HuiYuanKaJiBie", obj[2]);jsObj.put("BaoGuanDiDian", obj[3]);jsObj.put("YouXiaoQiZhiDingShiJian", obj[4]);if (obj[5].toString().trim().equals("1900-01-01")) {jsObj.put("YouXiaoQiShiJian","" );} else {jsObj.put("YouXiaoQiShiJian",obj[5] );}jsObj.put("XieKaZhuangTai", obj[6]);jsObj.put("XieRuShiJian", obj[7]);jsObj.put("HuiYuanKaZhuangTaiMC", obj[8]);jsObj.put("HuiYuanKaBianGengZhuangTaiMC", obj[9]);jsObj.put("GengXinJiBie", obj[10]);jsObj.put("MianZhiJinE", obj[11]);jsObj.put("yuanGongXingMing", obj[12]);jsObj.put("BeiZhu", obj[13].toString().trim());jsObj.put("KaZhongZhongLei", obj[14].toString()+" • "+obj[15].toString());jsObj.put("KaZhongZhongLeiID",obj[16]);jsObj.put("BaoGuanDiDianID",obj[17]);jsObj.put("BaoGuanRenID",obj[18]);jsArr.add(jsObj);}/*实例化一个哈希表*/HashMap<String, Object> jsMap=new HashMap<String, Object>();jsMap.put("rows", jsArr);/*将jsArr数组写入到jsMap中*/JSObj=JSONObject.fromObject(jsMap);/*转换数组类型，并返回数组*/return SUCCESS;}}

第6步：配置applicationContext与struts2

A、       配置applicationContext

<!-- 建卡与发放 --><bean id="JianKaYuFaFangService" class="MEMBCERP.Service.JianKaYuFaFangService">    <property name="dao">        <ref bean="dao"/>    </property></bean><bean id="JianKaYuFaFangAction" class="MEMBCERP.Action.JianKaYuFaFangAction" parent="baseAction">    <property name="jianKaYuFaFangService">        <ref bean="JianKaYuFaFangService"/>    </property></bean>

B、       配置struts2

<action name="getJianKaJiLu" class="JianKaYuFaFangAction" method="getJianKaJiLu">           <result type="json">           <param name="root">JSObj</param>           </result>        </action>           <action name="JianKaJiLuMingXi" class="JianKaYuFaFangAction" method="JianKaJiLuMingXi">           <result type="json">           <param name="root">JSObj</param>           </result>        </action>        <action name="MoHuChaXunJianKa" class="JianKaYuFaFangAction" method="MoHuChaXunJianKa">           <result type="json">           <param name="root">JSObj</param>           </result>        </action>

第7步：视图层调用

会员卡建卡记录：

2.1.1.2.7（图1）

HTML代码：

<table id="tbJianKa" class="easyui-datagrid" title="会员卡建卡记录" style="height:230px" data-options="singleSelect:true,loadMsg:'加载中,请稍后...',url:'getJianKaJiLu', idField:'HuiYuanKaID', onClickRow:getJianKaMingXi,onSelect:getSelect"><thead><tr><th data-options="field:'JiLuBianHao',width:150,align:'center'">记录编号</th><th data-options="field:'JianKaShuLiang',width:115,align:'center'">建卡数量</th><th data-options="field:'DengJiRen',width:130,align:'center'">登记人</th><th data-options="field:'DengJiShiJian',width:130,align:'center'">登记时间</th><th data-options="field:'ShenHeZhuangTai',width:130,align:'center'">审核状态</th><th data-options="field:'ShenHeRen',width:130,align:'center'">审核人</th><th data-options="field:'ShenHeShiJian',width:180,height:20,align:'center'">审核时间</th><th data-options="field:'HuiYuanKaID',width:140,align:'center',formatter:returnBtnColumn">操作</th></tr></thead></table>

Javascript代码：

//超链接操作列-建卡记录操作function returnBtnColumn(HuiYuanKaID, row, rowIndex) {return  "<a href='javascript:shenHe(" + HuiYuanKaID + "," + rowIndex+ ")'>审核</a>  " + "<a href='javascript:shanChu(" + HuiYuanKaID + "," + rowIndex+ ")'>删除</a> ";}//获取选中行的行号和数据    var dgJianKaShenHe="";     var dgJiLuBianHao="";    function getSelect(rowIndex,rowData){   dgJianKaDate=rowData.ShenHeZhuangTai.trim();   dgJiLuBianHao=rowData.JiLuBianHao.trim();}//审核建卡记录var ShenHeJianKaID=0;function shenHe(HuiYuanKaID, rowIndex) {if (dgJianKaDate == "已审核") {alert("记录编号【"+dgJiLuBianHao+ "】已通过审核，无法再进行审核！");} else {$('#FromShenHeRen').show();//开启审核-弹出审核人窗口ShenHeJianKaID=HuiYuanKaID;$('#DGVShenHeRen').datagrid('reload');}}    //删除建卡记录function shanChu(HuiYuanKaID, rowIndex) {if (dgJianKaDate == "已审核") {alert("记录编号【"+dgJiLuBianHao+ "】已通过审核，无法再进行审核！");} else {  if (confirm("是否删除记录编号为【"+dgJiLuBianHao+"】的数据？")) {$.getJSON("deleteJianKaJiLu?HuiYuanKaID=" + HuiYuanKaID, function(result) {if (result == "true") {alert("删除成功！");}else{alert("删除失败！");}});$('#tbJianKa').datagrid('reload');$('#tbJianKaMingXi').datagrid('reload');  } }}

搜索框搜索

1.2.7（图2）

HTML代码：

<input class="easyui-searchbox" data-options="prompt:'请输入单号查询',searcher:doSearch" />

Javascript代码：

//搜索function doSearch(value){$("#tbJianKa").datagrid({url:"MoHuChaXunJianKa?MoHuNeiRong="+ value});}

审核建卡记录：

1.2.7（图3）

HTML代码：

<!-- 以下是弹窗模块 --> <div  class="SeYuanGongXinXi" id="FromShenHeRen"   >  <div class="XiaoBiaoti">员工信息<span class="GuanBiAnNiuclass" onClick="btnGuanBi()">关闭</span></div>     <table id="DGVShenHeRen" class="easyui-datagrid"   data-options="singleSelect:true,rownumbers:true,loadMsg:'加载中,请稍后...',   url:'getYGXinXi', idField:'yuanGongID',onDblClickRow: DblShenHeRen">        <thead>           <tr>          <th data-options="field:'yuanGongID',width:120,hidden:true, align:'center'">员工ID</th>              <th data-options="field:'yuanGongXingMing',width:55,align:'center'">员工姓名</th>              <th data-options="field:'E-mail',width:115,align:'center'">E-mail</th>                  <th data-options="field:'ShouJiHaoMa',width:90,align:'center'">手机号码</th>                <th data-options="field:'SuoShuMenDian',width:106,align:'center'">所属部门</th>               </tr>        </thead>     </table>   </div>  <!-- 以上弹窗模块 -->

Javascript代码：

var ShenHeRenID=0;var ShenHeShiJian="";//审核人双击事件    function DblShenHeRen() {        var row = $('#DGVShenHeRen').datagrid('getSelected');        if (row) {            ShenHeRenID = row.yuanGongID;           $('#FromShenHeRen').hide();    ShenHeShiJian = myformatter(new Date());$.getJSON("ShenHeJianKaJiLu?JianKaID="+ShenHeJianKaID+"&ShenHeRenID="+ShenHeRenID+"&ShenHeShiJian="+ShenHeShiJian, function(result) {if (result == "true") {alert("审核成功！");location.href="JianKaYuFaFang/HuiYuanKaJianKa.jsp";} else {alert("审核失败！");}});                  }    }

会员卡建卡记录明细：

1.2.7（图4）

HTML代码：

<table id="tbJianKaMingXi" class="easyui-datagrid" title="会员卡建卡明细" style="height:270px"data-options="singleSelect:true,idField:'JianKaMingXiID',loadMsg:'加载中,请稍后...',onSelect:getSelectMingXi,onClickRow:UpdateJianKaMingXi"><thead><tr><th data-options="field:'KaoHao',width:150,align:'center'">会员卡号</th><th data-options="field:'XieKaZhuangTai',width:90,align:'center'">写卡状态</th><th data-options="field:'XieRuShiJian',width:125,align:'center'">写入时间</th><th data-options="field:'KaZhongZhongLeiID',width:130,align:'center',formatter:function(value,row){  return row.KaZhongZhongLei;  },editor:{type:'combogrid',options:{panelWidth: 500,idField:'HuiYuanKaLeiXingID',textField:'HuiYuanKaLeiXing',url:'GetHuiYuanKaZhongLei',columns:[[{field:'HuiYuanKaLeiXingID',hidden:true,title:'会员卡ID',width:60},{field:'HuiYuanKaKaZhong',title:'会员卡类型',width:80},{field:'HuiYuanKaLeiXing',width:90}]],            fitColumns: true,required:true}}">卡种类型</th><th data-options="field:'BaoGuanDiDianID',width:130,align:'center',formatter:function(value,row){  return row.BaoGuanDiDian;  },editor:{type:'combotree',options:{panelWidth: 200,            url: 'getBaoGuanDiDianFather',            required:true}}">保管地点</th><th data-options="field:'BaoGuanRenID',width:100,align:'center',formatter:function(value,row){  return row.yuanGongXingMing;  },editor:{  type:'combogrid',options:{panelWidth: 500,                idField: 'yuanGongID',                textField: 'yuanGongXingMing',                 url: 'getYGXinXi',                 columns: [[                    {field:'yuanGongID',title:'wuLiaoId',align:'center',hidden:true},                    {field:'yuanGongXingMing',title:'员工姓名',align:'center',width:80},                    {field:'yuanGongXingBie',title:'性别',align:'center',width:40},                    {field:'ZhengJianLeiXing',title:'证件类型',align:'center',width:60},                    {field:'ZhengJianHaoMa',title:'证件号码',align:'center',width:100},                    {field:'JueSe',title:'角色',align:'center',width:65},                    {field:'TongXunDiZhi',title:'通讯地址',align:'center',width:90},                    {field:'E-mail',title:'E-mail',align:'center',width:80},                    {field:'SiRenDianHua',title:'私人电话',align:'center',width:70},                    {field:'ShouJiHaoMa',title:'手机号码',align:'center',width:90},                    {field:'SuoShuMenDian',title:'所属门店',align:'center',width:70}                    ]],                    fitColumns: true,required:true}}">保管人</th><th data-options="field:'YouXiaoQiShiJian',width:100,align:'center',editor:{type:'datebox',options:{panelWidth: 200,formatter:myformatter,parser:myparser,            required:true}}">有效期</th><th data-options="field:'BeiZhu',width:160,salign:'center',editor:{type:'text'}">备注</th><th data-options="field:'JianKaMingXiID',width:120,align:'center',formatter:returnBtnXingXiColumn">操作</th></tr></thead></table>

Javascript代码：

//超链接操作列-建卡明细操作function returnBtnXingXiColumn(JianKaMingXiID, row, rowIndex) {return "<a href='javascript:xiuGaiMingXi(" + JianKaMingXiID+ "," + rowIndex + ")'>修改</a>  "+"<a href='javascript:shanChuMingXi(" + JianKaMingXiID + "," + rowIndex+ ")'>删除</a>";}function shanChuMingXi(JianKaMingXiID, rowIndex) {if (dgJianKaDate == "已审核") {alert("记录编号【"+dgJiLuBianHao+ "】已通过审核，无法再进行删除！");} else {$.getJSON("deleteJianKaMingXi?JianKaMingXiID=" + JianKaMingXiID, function(result) {if (result == "OK") {alert("删除成功！");}else{alert("删除失败！");}});$('#tbJianKa').datagrid('reload');$('#tbJianKaMingXi').datagrid('reload'); }}//获取选中行的行号和数据    var dgMingXirowData="";    var dgMingXiIndex=0;     function getSelectMingXi(rowIndex,rowData){    dgMingXiIndex=rowIndex;   dgMingXirowData=rowData;}//点击修改,若未审核,开启编辑行var editIndex = undefined;function xiuGaiMingXi(JianKaMingXiID, rowIndex) {if (dgJianKaDate == "已审核") {alert("记录编号【"+dgJiLuBianHao+ "】已通过审核，无法再进行修改！");} else {//开始编辑            $('#tbJianKaMingXi').datagrid('beginEdit', rowIndex);            $('#tbJianKaMingXi').datagrid('endEdit', editIndex);            editIndex = rowIndex;}}//单击行,提示是否更改已经更改过的数据function UpdateJianKaMingXi(){if (editIndex == undefined){return true;}if ($('#tbJianKaMingXi').datagrid('validateRow', editIndex)){$('#tbJianKaMingXi').datagrid('endEdit', editIndex);//结束编辑var rowData=$('#tbJianKaMingXi').datagrid('getChanges','updated');if(rowData.length>0){if (confirm('请问是否修改已经编辑过的数据？')) {var dgParam=rowData[0].JianKaMingXiID+" <<"+rowData[0].KaZhongZhongLeiID+" <<"+rowData[0].BaoGuanDiDianID+" <<"+rowData[0].BaoGuanRenID+" <<"+rowData[0].YouXiaoQiShiJian+" <<"+rowData[0].BeiZhu+" <<";$.getJSON("UpdateJianKaMingXi?dgParam="+dgParam,function(result){if (result == "true") {alert("修改成功！");} else {alert("修改失败！");}});location.href="JianKaYuFaFang/HuiYuanKaJianKa.jsp";}}editIndex = undefined;return true;}}

注意：仅供学习，禁止用于商业用途！否则，后果自负。
@最终解析权归本人所有