jquery动态生成easyui控件并添加事件

<a href="#" class="easyui-linkbutton" οnclick="alertVolumn()">体积计算</a>

<input id="RealVolumnTotal" class="easyui-numberbox" data-options="min:0,precision:2,required:true" style="width: 100px; height: 26px;"/>(m³)

@* 体积弹出框 *@
    <div id="dlgVolume" class="easyui-dialog" style="padding: 10px; overflow-x: hidden">
        <form id="from1" method="post">
            <div>
                行数:<input id="txtRows" class="easyui-numberbox" data-options="min:0,precision:0" style="width: 100px; height: 26px;"/>总体积:<label id="lblVolumeTotal" >0.00</label>m³
            </div>
            <div id="divRows">

            </div>
        </form>
    </div>

//弹出体积计算的对话框
function alertVolumn() {
    $('#dlgVolume').dialog({
        title: '体积计算',
        iconCls: 'icon-add',
        height: 180,
        width: 280,
        modal: true,
        left: $(document).scrollLeft() + ($(window).width() - 600) * 0.5,
        top: $(document).scrollTop() + ($(window).height() - 500) * 0.5,
        onOpen: function () {
            $('#txtRows').numberbox('setValue','');
            $('#lblVolumeTotal').text('0.00');
            $('#divRows').empty();
        },
        onClose: function () {

        },
        toolbar: [{
            text: '保存',
            id: "Savebtn",
            iconCls: 'icon-save',
            handler: function () {
                var isValid = $('#from1').form('validate');
                if (isValid) {
                    $('#RealVolumnTotal').numberbox('setValue', $('#lblVolumeTotal').text().trim());
                    $("#dlgVolume").dialog('close');
                }
            }
        }],
    });
}

//体积计算
function setTotalVolume(rows) {
    var c = "c", k = "k", g = "g", v = "v";
    var total = 0.00, itemTotal = 0.00;
    for (var i = 0; i < rows; i++) {
        c = "c" + i, k = "k" + i, g = "g" + i, v = "v" + i
        var cn = $('#' + c).val();
        var kn = $('#' + k).val();
        var gn = $('#' + g).val();
        if (cn != '' && cn + "" != "undefined" && kn != '' && kn + "" != "undefined" && gn != '' && gn + "" != "undefined") {
            itemTotal = cn * kn * gn;
            $('#' + v).text(itemTotal);
            total += itemTotal;
        }
    }
    if (total != 0) {
        $('#lblVolumeTotal').text(total);
    }
}

$(function () {

    //默认对话框关闭   
    $('#dlgVolume').dialog('close');
    //件数
    $('#txtRows').numberbox({
        width: 100,
        height: 26,
        required: false,
        precision: 0,
        min: 0,
        validType: ["maxlength[9]"],
        onChange: function (newValue, oldValue) {
            var rows = oldValue;
            if (newValue != null && newValue != '') {
                $('#txtRows').numberbox('setValue', newValue);
                rows = newValue;
            } else {
                $('#txtRows').numberbox('setValue', oldValue);
            }
            //重新生成行
            $('#divRows').empty();
            //总体积置空
            $('#lblVolumeTotal').text('0.00');
            for (var i = 0; i < rows; i++) {
                var c = "c" + i, k = "k" + i, g = "g" + i, v = "v" + i, d = "div" + i;
                var html = '<div id="' + d + '">'
                html += '长:<input class="easyui-numberbox" style="width: 30px; height: 26px;" name="' + c + '" data-options="required:true" id="' + c +
                    '" />宽:<input class="easyui-numberbox" style="width: 30px; height: 26px;" name="' + k + '" data-options="required:true" id="' + k +
                    '" />高:<input class="easyui-numberbox" style="width: 30px; height: 26px;" name="' + g + '" data-options="required:true" id="' + g +
                    '" />体积:<label id="' + v + '">0.00</label>m³';
                html += '</div>';
                $("#divRows").append(html);
                $.parser.parse($("#" + d).parent());
            }
            //添加事件
            for (var i = 0; i < rows; i++) {
                var c = "c" + i, k = "k" + i, g = "g" + i, v = "v" + i;
                $('#' + c).numberbox({
                    width: 30,
                    height: 26,
                    required: true,
                    precision: 0,
                    min: 0,
                    validType: ["maxlength[9]"],
                    onChange: function (newValue, oldValue) {
                        var result = oldValue;
                        if (newValue != null && newValue != '') {
                            result = newValue;
                        }
                        if (result + "" == "undefined") {
                            return;
                        } else {
                            setTotalVolume(rows);
                        }
                    }
                });
                $('#' + k).numberbox({
                    width: 30,
                    height: 26,
                    required: true,
                    precision: 0,
                    min: 0,
                    validType: ["maxlength[9]"],
                    onChange: function (newValue, oldValue) {
                        var result = oldValue;
                        if (newValue != null && newValue != '') {
                            result = newValue;
                        }
                        if (result + "" == "undefined") {
                            return;
                        } else {
                            setTotalVolume(rows);
                        }
                    }
                });
                $('#' + g).numberbox({
                    width: 30,
                    height: 26,
                    required: true,
                    precision: 0,
                    min: 0,
                    validType: ["maxlength[9]"],
                    onChange: function (newValue, oldValue) {
                        var result = oldValue;
                        if (newValue != null && newValue != '') {
                            result = newValue;
                        }
                        if (result + "" == "undefined") {
                            return;
                        } else {
                            setTotalVolume(rows);
                        }
                    }
                });
            }
        }
    });

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值