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数据的操作就完成了。