项目需求:有薪资方案动态加载薪资项目,并展示grid
如图1:
java后台封装项目jsonarry:
@Transactional
public String getCalItemsNameJsonByCal(RsSalaryCalculate cal) {
Persistence ps = PersistenceManager.currentPersistence();
JSONObject itemJsonArray = new JSONObject();
try {
/*
* (1)使用JSONObject构造的JSON文本顺序杂乱,使用JSONStringer则按顺序排列。
* (2)封装的数据类型不同,JSONStringer封装后到前台anObject:="{"病假扣除":0,"市公积金":0,"事假扣除":0,"基础工资":0,"驾驶员星级金":0,"工龄补贴":0}",
* 需要再次使用eval("("+anObject+")")转换
*/
//JSONObject itemObject = new JSONObject();
JSONStringer jsonStringer = new JSONStringer();
jsonStringer.object();
List itemList = this.getItemsByCal(cal.getSCId());
for (RsSalaryCalculateI item : itemList) {
Query query = ps.newQueryByBean(RsSalaryItem.class);
query.addCondition(Restrictions.eq("itemNo", item.getItemNo()));
RsSalaryItem sitem = query.uniqueValue(RsSalaryItem.class);
jsonStringer.key(sitem.getItemName());
jsonStringer.value(item.getValue()==null?Constants.ZERO:item.getValue());
//itemObject.put(sitem.getItemName(), item.getValue()==null?Constants.ZERO:item.getValue());
}
jsonStringer.endObject();
itemJsonArray.put(cal.getSCId()+"",jsonStringer);
//itemJsonArray.put(cal.getSCId()+"",itemObject);
} catch (JSONException e) {
logger.info(e);
throw new BaseException("RsSalaryCalculateManager.getCalItemsJson获取数据失败!!");
}
return itemJsonArray.toString();
}
返回到前台的数据集类型如下:
例如:{"1138":{"ITEM005":0,"ITEM006":0,"ITEM007":88,"01":2400,"02":3},"1137":{"ITEM005":0,"ITEM006":100,"ITEM007":0,"01":1000,"02":33}}
通过sCId对应找到每个薪资条对应的项目item结果,封装成td展示到前台
前台jquery获取jsonarry并进行处理:
//从后台得到json结果集
var itemJsonArray = me.dataCenter.getParameter("itemJsonArray");
for(var m = 0; m < count;m++){
var sCWId = gridData.getItemValue(m,"sCWId");
var sCId = gridData.getItemValue(m,"sCId");
var itemJsonArrays = eval("("+itemJsonArray+")"); //匹配得到每个结果
var anObject = itemJsonArrays[sCId];//对json数组each
$.each(anObject,function(name,value) {
//console.log("name=" + name+"[value]:"+value);
var itemNo = name;
var itemValue = value;
//获取tab下 按标签属性查找th对象
var wIndex = $("#calDeptGrid th[w_index='"+itemNo+"']");
//查找 tab下 某个th对象 对应的下标
var index = $("#calDeptGrid th").index(wIndex);
//4
if(!itemValue){
itemValue = 0;
}
//赋值by wu
var gd = me.byId("calDeptGrid");
//var row = gd.find(':first table tr').eq(m+1);
var row = gd.first('table').find('tbody tr').eq(m);
//input框
var inputHtml = '';
//先对td赋值,显示值及title用于tip,再追加一个平台的input标签并赋值;
row.find('td').eq(index).html(itemValue).attr('title', itemValue);
var islocked = gd.extgrid("getRowSet").getItemValue(m,"isLocked");
if(islocked=="0"){
/*v2.0改版,取消行编辑*/
//row.find('td').eq(index).append(inputHtml);
//row.find('td').eq(index).find("input[name="+itemNo+"]").val(itemValue).trigger('change');
}
});
这种方式是一次性从后台获取数据,一次性展示到前台grid。有一定的局限性。经测试及生产,反映出的情况是:
动态项目值达到80以上,即有100多列的情况下,每页展示15条,速度有所下降。需要等待一定时间后台数据才能看到最终的结果。
优化思路:
1.可以通过短链接ajax形式,每条数据行请求一次后台,实时去填充每行的扩展列。速度有所提升,展示的效果并不是特别好,会有段时间空白的列。
2.前台分时间段,分数据行数量进行分批处理展示结果。速度会有所提升。
后续有时间再测试思路。