JTable的应用

最近项目中使用到一个table表格，表格的样子如下：

 

可以修改数量，以及折扣，对应的最终价会相应的变化。

随手写了份插件，命名为JTable，可以给热爱jquery 的友友们一个参考：

 

代码如下：

/**
 * 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='"+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="'+ 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="'+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="'+ 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 = eval('('+$(this).attr("data")+')');
            var setting = $.extend({container: $(this)},data);
            return new JTable(setting);
        }
    });
})($);

 

使用：

HTML:

<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>

Javascript:

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

 

代码写的一般般，可以优化下哦。