/** * Created by oshine on 14-7-23. */(function($){    var JTable = function(setting){        var defaultSetting = {            header:["服务内容","数量","单价(元)","总价(元)","量词","原价(元)","折扣","最终价(元)"],            items:[                {name:"默认内容1",num:1,defaultPrice:300},                {name:"默认内容2",num:1,defaultPrice:300},                {name:"默认内容3",num:1,defaultPrice:300},                {name:"默认内容4",num:1,defaultPrice:300}            ],            unit:"半年",            discount:100,            serve_id:0,            id:0        };        setting = $.extend(defaultSetting,setting);        this.header = setting.header;        this.container = setting.container;        this.items = setting.items;        this.discount = setting.discount*100;        this.unit = setting.unit;        this.serve_id = setting.serve_id;        this.name = setting.name;        this.default_price = setting.default_price;        this.id = setting.id;        this.isDesign = setting.isDesign;        this.init();    }    JTable.prototype = {        init:function(){            var self = this;            self.refresh();        },        refresh:function(){            var self = this;            console.dir(self.items);            $(self.container).html(self.buildTable()+self.buildData());            $(self.container).find("input[name=child-num]").unbind();            $(self.container).find("input[name=child-num]").change(function(){                var k = $(this).parent().parent().attr("data-id");                self.items[k].num = $(this).val();                self.refresh();            });            $(self.container).find("input[name=package-discount]").change(function(){                self.discount = $(this).val();                self.refresh();            });        },        buildTable:function(){            return "<table>"+this.buildHeader()+this.buildBody()+"</table>";        },        jsonData:function(){            return JSON.stringify({id:this.id,serve_id:this.serve_id,isDesign:this.isDesign,name:this.name,default_price:this.default_price,discount:this.discount,unit:this.unit,cost_price:this.getCostPrice(),final_price:this.getFinalPrice(),items:this.items});        },        buildData:function(){            return "<input type=‘hidden‘ contract=‘true‘ value=http://www.mamicode.com/‘"+this.jsonData()+"‘ name=‘data‘/>";        },        buildHeader:function(){            var html = "<thead><tr>";            $.each(this.header,function(k,v){                html+="<th>"+v+"</th>";            })            return html+"</tr></thead>";        },        getCostPrice:function(){            var costPrice = 0;            $.each(this.items,function(k,v){costPrice+=(v.num* v.defaultPrice);});            return costPrice;        },        getFinalPrice:function(){            return this.getCostPrice()*(this.discount/100);        },        buildBody:function(){            var self = this;            var html = "<tbody>";            var length = self.items.length;            $.each(this.items,function(k,v){                var tr = "<tr data-id="+k+">";                if(k==0){                    tr+=‘<td class="item-name">‘+ v.name+‘</td>‘+                    ‘<td><input class="text-field" type="text" value="http://www.mamicode.com/‘+ v.num+‘" name="child-num"></td>‘+                    ‘<td>‘+ v.defaultPrice+‘</td>‘+                    ‘<td>‘+ (v.num*v.defaultPrice)+‘</td>‘+                    ‘<td rowspan="‘+ length+‘">‘+self.unit+‘</td>‘+                    ‘<td rowspan="‘+length+‘">‘+self.getCostPrice()+‘</td>‘+                    ‘<td rowspan="‘+ length+‘"><input class="text-field" type="text" value="http://www.mamicode.com/‘+self.discount+‘" name="package-discount"/>%</td>‘+                    ‘<td rowspan="‘+ length+‘">‘+self.getFinalPrice()+‘</td>‘;                }else                {                    tr+=‘<td class="item-name">‘+ v.name+‘</td>‘+                        ‘<td><input class="text-field" type="text" value="http://www.mamicode.com/‘+ v.num+‘" name="child-num"></td>‘+                        ‘<td>‘+ v.defaultPrice+‘</td>‘+                        ‘<td>‘+ (v.num*v.defaultPrice)+‘</td>‘;                }                tr+="</tr>";                html+=tr;            });            return html+"</tbody>";        }    }    $.fn.extend({        JTable:function(){            var data = http://www.mamicode.com/eval(‘(‘+$(this).attr("data")+‘)‘);            var setting = $.extend({container: $(this)},data);            return new JTable(setting);        }    });})($);

<div data="{‘id‘:‘7073‘,‘quoted_id‘:‘616‘,‘uid‘:‘176‘,‘serve_id‘:‘2‘,‘name‘:‘无线端站外推广套餐‘,‘default_price‘:‘16800.00‘,‘discount‘:‘0.9000‘,‘final_price‘:‘15120.00‘,‘percentage‘:null,‘description‘:‘‘,‘unit‘:‘季度‘,‘children‘:null,‘is_design‘:null,‘items‘:[{‘id‘:‘57760‘,‘packageId‘:‘7073‘,‘name‘:‘无线站外推广‘,‘num‘:‘3‘,‘defaultPrice‘:‘2400.00‘,‘unit‘:‘季度‘,‘finalPrice‘:‘7200.00‘,‘isDesign‘:null},{‘id‘:‘57761‘,‘packageId‘:‘7073‘,‘name‘:‘无线站外推广维度优化‘,‘num‘:‘1‘,‘defaultPrice‘:‘1200.00‘,‘unit‘:‘季度‘,‘finalPrice‘:‘1200.00‘,‘isDesign‘:null},{‘id‘:‘57762‘,‘packageId‘:‘7073‘,‘name‘:‘无线站外推广周报（数据分析+优化建议）‘,‘num‘:‘1‘,‘defaultPrice‘:‘2400.00‘,‘unit‘:‘季度‘,‘finalPrice‘:‘2400.00‘,‘isDesign‘:null}]}" class="constract-JTable"></div>

$(document).ready(function(){         $(".constract-JTable").JTable();});