easyUI dialog弹出框动态计算数量和价格总结

最近在做一个项目时用到了easyUI 弹出款动态添加服务项目和计算价格，因为刚接触easyUI所以好多都是现查的文档，还有一些是问的老员工，很感谢老员工提供的解决思路，终于一路磕磕绊绊实现了功能，现在把功能实现记录下来以便回顾

完成图效果是这样的

这里面可以分为几个部分 ，点击添加打开弹窗展示服务项目，点击添加把数据添加到已选服务项目中，再次点击的时候如果服务项目存在就会增加数量，计算原价和总价，点击加减号也可以对数量进行加减

首先点击添加加载datagrid数据比较简单

/**
    * Name 打开添加窗口
    */
    function openBhConsumeDetail(){
        var items = $('#bhConsumeDetail-datagrid').datagrid('getSelections');
        var item = $('#bhConsumeDetail-datagrid').datagrid('getSelected');
        var flag=0;
        $(items).each(function(){
            flag++;    
        });
        if(flag==0){
            $.messager.alert('信息提示',"请先选择数据行!",'info');
            return;
        }
        else if(flag>1){
            $.messager.alert('信息提示',"只能选择单条数据!",'info');
            return;
        }
        $('#bhConsumeDetail-dialog').dialog({
            closed: false,
            modal:true,
            title: "添加服务项目", 
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                id:"addButton",
                handler: AddConsumeDetail 
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#bhConsumeDetail-dialog').dialog('close');
                   
                }
            }],
            onClose: function () {
                $('#bhConsumeDetail-dialog').dialog('close');
            }
            
        });

/**
        * Name 载入数据
        */
        $('#serviceCharge-datagrid').datagrid({
            url:'<%=path%>/scServiceCharge/listScServiceCharge',
            method:'GET',
            striped:true,
            checkOnSelect:false,
            rownumbers:true,
            singleSelect:false,
            pageSize:20,
            pageList:[10,20],
            pagination:true,
            multiSort:true,
            fitColumns:true,
            fit:true,
            columns:[[
                { field:'id',title:'id',width:100,sortable:true,checkbox:true},
                { field:'serviceName',title:'服务项目',width:100},
                { field:'servicePrice',title:'收费价格',width:100},
                { field:'servicePriceUnit',title:'价格单位',width:100},
                { field:'consumeNumber',title:'数量',width:100 ,formatter:
                    function(value,row,index){
                        return '<input id="'+row.id+'" type="number" name="points" value="1" min="0" style="width:50px; " />';
                    }
                }
            ]],
             onClickRow: function(rowIndex, rowData){
                    $(this).datagrid('selectRow', rowIndex);
                    $(this).datagrid('checkRow', rowIndex);
                   
                },
        
        });
        
        /* 数据库已选服务项目载入  */
        var item = $('#bhConsumeDetail-datagrid').datagrid('getSelected');
        $('#edit-consumeDetail-datagrid').datagrid({
            url:'<%=path%>/bhConsumeDetail/selectBhConsume',
            queryParams: { serviceApplyId: item.id },
            method:'GET',
            checkOnSelect:false,
            striped:true,     //设置为 true，则把行条纹化
            rownumbers:true, //设置为 true，则显示带有行号的列。
            singleSelect:false, //设置为 true，则只允许选中一行
            pageSize:20,
            pageList:[10,20],
            pagination:true,
            multiSort:true,//定义是否启用多列排序
            fitColumns:true, //设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。
            fit:true,
            columns:[[
                { field:'chargeId',title:'id',width:100,sortable:true,checkbox:true},
                { field:'serviceName',title:'服务项目',width:100},
                { field:'consumePrice',title:'收费价格',width:100},
                { field:'consumeNumber',title:'数量',formatter:
                    function(value,row,index){
                    
                    return     '<div ><input type="button" class="reduce" style="width:20px; margin-right:1px; " name="minus" value="-" onclick="jian(\'select'+row.chargeId+'\')">'+
                            '<input type="text" class="textNum" style="width:15px; height:14px;" name="amount" value="'+value+'" id="select'+row.chargeId+'">'+
                            '<input type="button" class="add" style="width:20px; margin-left:1px;" name="plus" value="+" onclick="jia(\'select'+row.chargeId+'\')"></div>';
            }
                    
                },
                { field:'originalPrice',title:'原价',width:100},
                { field:'isBuild',title:'是否生成订单',width:100,formatter:
                     function(value,row,index){
                        if(value==true){
                            return "<font color='green'>是</font>";
                        }else if(value==false){
                            return "<font color='red'>否</font>";
                        }
                }}
            ]],
            onLoadSuccess: function(data){//加载完毕后获取所有的checkbox遍历
                if (data.rows.length > 0) {
                    //循环判断操作为新增的不能选择
                    for (var i = 0; i < data.rows.length; i++) {
                        //根据isBuild让某些行不可选
                        if (data.rows[i].isBuild ==true) {
                            $("input[name='chargeId']")[i].disabled = true;
                            $("input[name='minus']")[i].disabled=true;
                            $("input[name='amount']")[i].disabled=true;
                            $("input[name='plus']")[i].disabled=true;
                        }
                    }
                }
                $(".datagrid-header-check").html("<input type='checkbox' id='selectAll'/>");
                $('#selectAll').change(function(){
                    var status=$(this).is(':checked');
                    $('input:checkbox[name="chargeId"]').each(function(rowIndex,el){
                        if(!$(this).is(":disabled")){
                            $("#edit-consumeDetail-datagrid").datagrid("selectRow",rowIndex);
                        }else{
                            $("#edit-consumeDetail-datagrid").datagrid("unselectRow",rowIndex);
                        }
                    })
                })
                total();
               
            },
            onClickRow: function(rowIndex, rowData){
                $(this).datagrid('selectRow', rowIndex);
                //加载完毕后获取所有的checkbox遍历
                $("input[name='chargeId']").each(function(index, el){
                    //如果当前的复选框不可选，则不让其选中
                    if (el.disabled == true) {
                        $('#edit-consumeDetail-datagrid').datagrid('unselectRow', index);
                    }
                })
                
            },
            
          
        });
    }

 

/**
    * Name  添加服务项 目
    */
    function AddConsumeDetail(){

        var scrows = $('#edit-consumeDetail-datagrid').datagrid('getSelections');
         var item = $('#bhConsumeDetail-datagrid').datagrid('getSelected');
         var details=new Array();
         //console.log(scrows);
        for(i = 0;i < scrows.length;i++){
            var serviceApplyId= item.id;
            var arrs={};
            arrs.id=scrows[i].chargeId;
            arrs.serviceName=scrows[i].serviceName;
            arrs.servicePrice=scrows[i].consumePrice;
            arrs.consumeNumber=$("#select"+scrows[i].chargeId).val();
            console.log("number==="+arrs.consumeNumber);
            arrs.saServiceApplyId=serviceApplyId;
            details[i]=arrs;

        }
         //console.log(details); 
         //return;
         $.messager.confirm('信息提示','是否确认提交？', function(result){
            if(result){
                $.ajax({
                    url:'<%=path%>/bhConsumeDetail/addBhConsumeDetail',
                    type:'POST',
                    dataType: "json",
                    contentType: "application/json",
                    data:JSON.stringify(details),
                    success:function(data){
                        if(data.success){
                            $.messager.show({
                                title: '信息提示',
                                msg: "服务添加成功",
                                timeout: 2000,
                                showtype: 'slide',
                            })
                            
                            $('#bhConsumeDetail-dialog').dialog('close');
                            reload();
                        }
                        else
                        {
                            $.messager.show({
                                title: '信息提示',
                                msg: data.errorDescription,
                                timeout: 2000,
                                showtype: 'slide',
                            });    
                        }
                    }    
                });
            }
        });

树的数据是直接载入进来的，和服务项目放在一起就行，然后做增加和删除操作 

/**
    *页面增加 
    */
    function addService(){
        var nameRows = $('#serviceCharge-datagrid').datagrid('getSelections'); //选择添加的服务项目 
        var lists = $('#edit-consumeDetail-datagrid').datagrid('getRows');//数据库已添加的服务项目 
        var flag = true;
        for(var i=0;i<nameRows.length;i++){
            var num=$("#"+nameRows[i].id+"").val();
            for( var j=0;j<lists.length;j++){
                if(nameRows[i].serviceName==lists[j].serviceName && lists[j].isBuild==false){
                    flag=false;
                    var consumeNum=parseInt(lists[j].consumeNumber);
                    consumeNum +=parseInt(num);  
                    $('#edit-consumeDetail-datagrid').datagrid('updateRow',{
                        index:j,
                        row: {
                            consumeNumber: consumeNum,
                            originalPrice:parseFloat(consumeNum*nameRows[i].servicePrice).toFixed(2)
                        }
                    });
                    
                    break;
                }else{
                    flag=true;
                }
            }
            if(flag==true){
                 $('#edit-consumeDetail-datagrid').datagrid('appendRow',{
                 id:nameRows[i].id,
                chargeId:nameRows[i].id,
                serviceName: nameRows[i].serviceName,
                consumePrice: nameRows[i].servicePrice,
                consumeNumber:num,
                originalPrice:num*nameRows[i].servicePrice,
                isBuild:false
            });    
            $('#edit-consumeDetail-datagrid').datagrid('checkRow',lists.length-1);
            }

        }
        total();
        
    }

做删除操作的时候我也想到了用flag来判断是否存在相同的服务项目但是效果总不是自己想要的，后来在一篇博客上看到让我恍然大悟。在把flag设为 false跳出的时候，没有进行else{   flag=true;} 判断导致最后添加多条数据的时候只能增加第一个，后面的增加不了。接下来是删除了，这里我做的复杂了点，其实只要取到所有选择的 id 根据ID删就行了，由于水平不高所以写复杂了但是功能也实现了

/**
    *页面删除 
    */
    function deleteService(){
         var selections  =$('#edit-consumeDetail-datagrid').datagrid('getSelections');
        var selectRows = [];
        var services=new Array();
        for ( var i= 0; i< selections.length; i++) {
            selectRows.push(selections[i]);
            for(var j =0;j<selectRows.length;j++){
                var index = $('#edit-consumeDetail-datagrid').datagrid('getRowIndex',selectRows[j]);
            }
            $('#edit-consumeDetail-datagrid').datagrid('deleteRow',index);
            
            var service ={};
            service.serviceName=selections[i].serviceName;
            service.id=selections[i].id;
            services[i]=service;
        }
        $(function(result){
            if(result){
                $.ajax({
                    url:'<%=path%>/bhConsumeDetail/deleteBhConsumeDetail',
                        type:'POST',
                        dataType: "json",
                        contentType: "application/json",
                        data:JSON.stringify(services),
                    });    

                }
        });
                total();
    }

接来下就我比较头疼的点击数量框加减了，由于前端不太熟悉，所以这个地方做的头都大了，一开始被我去掉这个功能，后来项目经理说这个功能还是需要的，又让我加上去，我也没什么思路，项目经理详细的指点了我怎么怎么解决，但是自己还是有些懵，然后就边做边整理思路，一开始我做的是改变input框的value的形式改变数量的，这样虽然实现了数量变化但是在点击添加的时候就会出现数量错误，因为添加改变的是 datagrid的列属性，两者不一致。于是又一番修改之后有了接下来的代码

function jian(inputId){
        
        var num =parseInt($("#"+inputId).val());
        //$(inputId).val(parseInt(num)-1);
        var lists = $('#edit-consumeDetail-datagrid').datagrid('getRows');//数据库已添加的服务项目
        for( var i=0;i<lists.length;i++){
            if(("select"+lists[i].chargeId)==inputId){
                if(num>1){
                    num--;
                    $('#edit-consumeDetail-datagrid').datagrid('updateRow',{
                        index:i,
                        row: {
                            consumeNumber: num,
                            originalPrice:parseFloat(num*lists[i].consumePrice).toFixed(2)
                        }
                    });
                }else{
                    $('#edit-consumeDetail-datagrid').datagrid('updateRow',{
                        index:i,
                        row: {
                            consumeNumber: 1,
                            originalPrice:parseFloat(1*lists[i].consumePrice).toFixed(2)
                        }
                    });
                }
            }
        }
        total();
        
    }

通过返回的ID 遍历已选择的服务项目，如果存在ID相同的那就直接通过updateRow的方式改变数量，添加也是同样的方式所以就不会出现 数量错误了，当时由于前端很渣 没想到怎么获取datagrid单独的一列的方式思路就没通，还是感谢项目经理提供的思路。在获取onclick事件传的参的时候也出现了一些问题，之前是这样写的 onclick="jian(select'+row.chargeId+')" 虽然参可以传过来但是前端会报错 ，后来才发现需要转义才行于是就改成这样 onclick="jian(\'select'+row.chargeId+'\')" 可以获取值了

这样这个功能基本上就完成了，但是在添加的时候如果数据库里存在相同的服务项目的时候 就会出现相同的 row.chargeId 添加的时候获取的数量就是数据库里的那个数量，而不是我想要的那个数量，有没有大佬能在当前的状态下 提供一下解决思路呀