json的操作应用实例

来源：互联网发布：天猫淘宝客服后台操作编辑：程序博客网时间：2024/04/28 04:43

在自己做的商品收银页面中<本系统采用了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数据的操作就完成了。

2 1