动态grid java 后台封装json数据返回到前台解析并展示

项目需求：有薪资方案动态加载薪资项目，并展示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<RsSalaryCalculateI> 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 = '<input class="bsgrid_editgrid_edit form-control bsgrid_editgrid_hidden" data-options="onChange:_application.hitch(salary_client_calsalary,\'addChangeClasss\')" name="'+itemNo+'" type="text" value="">';
	                //先对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.前台分时间段，分数据行数量进行分批处理展示结果。速度会有所提升。

后续有时间再测试思路。