json的操作应用实例

     在自己做的商品收银页面中<本系统采用了EasyUI作为前端开发框架，后台则是C#写的webservice>，反思这个页面的做法，觉得有必要做个笔记。

     先来个系统截图：



  简短的说明一下开单消费的业务流程：

  1.页面加载成功后，出现左下角的datagrid,显示商品信息。

  2.选择商品，可以多次多选，点击选中按钮，后台webservice返回的json数据加载显示在上面的datagrid里,（为了便于区分，这个取名datagrid1，左下角的那个取名datagrid2）;

  3.在datagrid1里可以对json数据修改，删除。

  4.可以继续点击选中按钮添加商品。

        这个json数据量不大，就放在了内存中处理。将json设立全局变量，每次点击选中按钮，即往json里添加后台新返回的数据，在datagrid1里进行修改，删除。

 废话少说，直接上代码：

添加操作

 var  rtnjson = null;

function Selected(ids)
{
$.ajax(
{
url : 'http://localhost:6080/webservice/WebProduct.asmx/Product_grid?jsoncallback=?',
data :
{
Method : 'Selected',
ids : ids,
CustomerNo : me3.edit_form3.find('#CustomerNo')[0].value
},
success : function (returnData)
{
if (returnData)
{
if (rtnjson == null)
{
rtnjson = returnData;
}
else
{
$.each(returnData.rows, function (i, item)
{
rtnjson.rows.push(returnData.rows[i]);
}
);
rtnjson.total = rtnjson.total + returnData.total;
}
if (rtnjson != null)
{
me1.datagrid1.datagrid('loadData', rtnjson); //将数据绑定到datagrid
me1.datagrid1.datagrid('reloadFooter', [
{
FIT_NAME : '合计',
AMOUNT : sum(),
GetherMoney : sum1(),
Onsale : sum2()
}
]);
}
}
}
}
);
}

这个函数是选中按钮点击事件的处理逻辑，用到了jQuery的工具函数$.each(),将返回的json数据一一加入到rtnjson里。

给一个json数据的例子.

{
"total" : 1,
"rows" : [
{
"AMOUNT" : "134",
"BUSI_MAN" : "业务员001",
"BalanceType" : "会员卡",
"COUNTS" : "1",
"DEPT_SHOT" : "",
"FIT_NAME" : "A43",
"FIT_NUM" : "1043",
"GetherMoney" : "120.6",
"INFO_MAN" : "操作员001",
"Onsale" : "13.4",
"PRICE" : "134.00",
"Reduce" : "6.7",
"TRANS_ID" : ""
}
]
}

json格式里的total是easyui datagrid要求的数据格式。

修改操作

点击datagrid1里面修改按钮(选中至少一行)，

修改按钮的点击事件的操作逻辑：

///修改
function Update1()
{
var selectedRows = me1.datagrid1.datagrid('getSelections');
if (selectedRows.length > 0)
{
me1.edit_form1.form('load', selectedRows[0]);
me1.edit_window1.find('div[region="south"]').css('display', 'block');
me1.edit_window1.window('open');
}
else
{
showError('请选择一条记录进行操作!');
return;
}
}

点击保存：

///保存修改
function modifySelected()
{
var gdrows = me1.datagrid1.datagrid('getSelections');
for (var i = 0; i < gdrows.length; i++)
{
var ind = $('#datagrid1').datagrid('getRowIndex', gdrows[i]);
rtnjson.rows[ind].FIT_NAME = me1.edit_form1.find('#FIT_NAME1')[0].value;
rtnjson.rows[ind].COUNTS = me1.edit_form1.find('#COUNTS1')[0].value;
rtnjson.rows[ind].PRICE = me1.edit_form1.find('#PRICE1')[0].value;
rtnjson.rows[ind].AMOUNT = me1.edit_form1.find('#AMOUNT1')[0].value;
rtnjson.rows[ind].Reduce = me1.edit_form1.find('#Reduce1')[0].value;
rtnjson.rows[ind].Onsale = me1.edit_form1.find('#Onsale1')[0].value;
rtnjson.rows[ind].GetherMoney = me1.edit_form1.find('#GetherMoney1')[0].value;
//rtnjson.rows[ind].BalanceType = $('#BalanceType').combotree('getText');
rtnjson.rows[ind].BUSI_MAN = me1.edit_form1.find('#BUSI_MAN1')[0].value;
rtnjson.rows[ind].INFO_MAN = me1.edit_form1.find('#INFO_MAN1')[0].value;
}
me1.edit_window1.window('close');
me1.datagrid1.datagrid('loadData', rtnjson);
me1.datagrid1.datagrid('reloadFooter', [
{
FIT_NAME : '合计',
AMOUNT : sum(),
GetherMoney : sum1(),
Onsale : sum2()
}
]);
}

将修改选中行的json数据。

删除操作

删除按钮点击事件的处理逻辑

///删除操作
function deleteSelected()
{
var gdrows = me1.datagrid1.datagrid('getSelections');
if (gdrows.length == 0)
{
showError('请选择记录进行操作!');
}
else
{
for (var i = 0; i < gdrows.length; i++)
{
var ind = $('#datagrid1').datagrid('getRowIndex', gdrows[i]);
//$('#datagrid1').datagrid('deleteRow', ind);
//delete rtnjson.rows[0];
rtnjson.rows.splice(ind, 1); ///删除的核心操作,splice(a,b)删除的位置，行数
}
rtnjson.total = rtnjson.total - gdrows.length;
me1.datagrid1.datagrid('loadData', rtnjson);
me1.datagrid1.datagrid('reloadFooter', [
{
FIT_NAME : '合计',
AMOUNT : sum(),
GetherMoney : sum1(),
Onsale : sum2()
}
]);
}
}

到此，关于这个页面的json数据的操作就完成了。