JS绘制表格

function submitHandler() {
        var cabType = $("#cabType").val();
        if ($.validate.form()) {
            debugger;

            //检查箱子总数是否一致,列数和箱子数
            var boxs = $('#boxNum').val();		//箱子整数
            var cols = $('#columnNum').val(); 	//列数
            if (parseInt(cols) > parseInt(boxs)) {
                $.modal.alertWarning('列数不能大于箱子数');
                $('#columnNum').focus();
                return false;
            }

            var p_boxs = 0;			//配置的箱子数
            $("#oneCabinetBox").find('.colinputSpan input').each(function () {
                p_boxs += parseInt($(this).val());
            });
            if (boxs != p_boxs) {
                $.modal.alertWarning('请确保箱子总数一致');
                //alert('请确保箱子总数一致');
                return false;
            }


            var allTypeStr = $("#allTypeStr").val();
            if (allTypeStr == 'ischange') {
                allTypeStr = '';
                //拼装所有箱型
                $("#oneCabinetBox").find('.divCols').each(function () {

                    var col = $(this).attr('id');
                    col = col.substring(4, col.length);

                    if (cabType == '2') {
                        $(this).find('.divBox').each(function () {
                            allTypeStr += col + ',';
                            allTypeStr += $(this).find('.divBoxid').text() + ',';
                            allTypeStr += $(this).find('.divBoxType').text() + ',';
                            allTypeStr += (($(this).find("input[type='checkbox']").is(':checked')) ? '1' : '0') + ';';
                        });
                    } else {
                        $(this).find('.divBox').each(function () {
                            allTypeStr += col + ',';
                            allTypeStr += $(this).find('.divBoxid').text() + ',';
                            allTypeStr += $(this).find('.divBoxType').text() + ';';
                        });
                    }

                });

                $("#allTypeStr").val(allTypeStr);
            } else {
                $("#allTypeStr").val('');
                $.modal.alertWarning('请配置箱子');
                //alert('请配置箱子');
                return false;
            }

            //设置柜子使用类型cab_type
            var usetypeId = $("#usetypeId  option:selected").val();
            if (usetypeId == '2' || usetypeId == '3') {
                $("#cabType").val('2');
            } else {
                $("#cabType").val('1');
            }

            $.operate.saveTab(prefix + "/add", $('#form-cabinetType-add').serialize());
        }
    }


    //选择柜子使用类型，区分塔式柜横向柜和普通柜
    function selectUseType() {
        var cabType = $("#cabType").val();
        //设置柜子使用类型cab_type
        var usetypeId = $("#usetypeId  option:selected").val();
        if (usetypeId == '2' || usetypeId == '3') {
            if (cabType != '2') {
                $("#cabType").val('2');
                //重置箱型选择框
                setBoxTypeSelect('2');
            }
        } else {
            if (cabType != '1') {
                $("#cabType").val('1');
                //重置箱型选择框
                setBoxTypeSelect('1');
            }
        }
    }


    //初始化箱型
    $(document).ready(function () {
        setBoxTypeSelect($("#cabType").val());
    });

    //选择柜子使用类型，区分塔式柜横向柜和普通柜
    function setBoxTypeSelect(cabType) {
        $.ajax({
            type: "POST",
            url: ctx + "site/boxType/list?cabType=" + cabType,
            async: true,
            success: function (data) {
                $("#all_boxtype option").remove();
                $.each(data.rows, function (n, boxType) {
                    var option = '<option value=' + '"' + boxType.sizeHeight + '">' + boxType.fullname + '</option>';
                    if (boxType.fullname != '控制箱') {
                        $("#all_boxtype").append(option);
                    }
                });
            }

        });
    }


    //配置箱子，生成箱子的布局。
    function createBox() {
        var cabType = $("#cabType").val();
        if ($.validate.form()) {

            $("#allTypeStr").val('ischange'); //新增柜型时，生成布局时即认为已改变

            var cols = $('#columnNum').val(); 	//列数
            var boxs = $('#boxNum').val();		//箱子整数
            var col_box = parseInt(boxs / cols);	//每列的箱子数
            if (col_box < 1) {
                $.modal.alertWarning('列数不能大于箱子数');
                //$('#columnNum').focus().text('');
                return false;
            }

            var cabinet = $('#oneCabinetBox'); 	//整个柜子
            var cabinetBody = $('#oneCabinetBody'); 	//整个柜子的箱子主体
            var col_div = cabinet.find('#col_1');			//第一列DIV
            var boxid_div = cabinet.find('#boxid_1');		//一个箱子DIV
            var colinput_div = cabinet.find('#colinput_1');		//每一列的头部输入框DIV
            var col_input = cabinet.find('#colNumInput_1');//每一列的头部输入框

            var all_boxtype = $('#all_boxtype').clone();		//箱型select
            //all_boxtype.removeClass("form-control");
            var boxtype = $("#all_boxtype  option:selected").text();
            var boxHeight = $("#all_boxtype  option:selected").val();

            cabinet.html('');		//置空柜子
            cabinet.css("width", (160 * cols + 2) + "px");	//柜子宽度

            cabinetBody.css("width", (160 * cols + 2) + "px");	//柜子宽度
            cabinetBody.html('');

            var boxid = 1;
            //遍历列 创建每一列的箱子
            for (var i = 1; i <= cols; i++) {
                var a_col = col_div.clone();
                a_col.attr('id', 'col_' + i);
                a_col.html('');

                //每一列的头部输入框
                var a_colinput_div = colinput_div.clone();
                a_colinput_div.attr('id', 'colinput_' + i);
                var a_col_input = col_input.clone();
                a_col_input.attr('id', 'colNumInput_' + i);
                a_col_input.val(col_box);
                a_col_input.attr('onchange', "inputColNum(" + i + ")");
                var colinputSpan = a_colinput_div.find('.colinputSpan');
                colinputSpan.html('');
                colinputSpan.append('第' + i + '列箱数').append(a_col_input);
                a_col.append(a_colinput_div);

                for (var j = 1; j <= col_box; j++) {	//创建每一列的箱子
                    var a_box = boxid_div.clone();
                    a_box.attr('id', 'boxid_' + boxid);
                    a_box.css("height", (boxHeight * 4 + 0) + "px");	//箱子高度

                    if (cabType == '2') {	//托盘柜的箱号：列号+该列的箱号 01003
                        var cab_boxid = i * 1000 + j;
                        if (cab_boxid < 10000) {
                            cab_boxid = '0' + cab_boxid;
                        }
                        a_box.find('.divBoxid').text(cab_boxid);
                        a_box.find('.divBoxType').text(boxtype);
                        a_box.find('.divBoxType').attr('onclick', "selectBoxType('" + boxid + "')");
                        //存托箱：提供绑定托盘复选框
                        if (boxtype == '存托箱') {
                            var checkTp = '<span><input name="checkTp" class="checkTp" type="checkbox" title="带托盘？"></span>';
                            a_box.find('.divBoxType').after(checkTp);
                        } else {
                            a_box.find('.checkTp').remove();//删除已经加的复选框
                        }
                    } else {
                        a_box.find('.divBoxid').text(boxid);
                        a_box.find('.divBoxType').text(boxtype);
                        a_box.attr('onclick', "selectBoxType(" + boxid + ")");
                        a_box.find('.checkTp').remove();	//删除已经加的复选框
                    }

                    a_col.append(a_box);
                    boxid++;
                }

                cabinetBody.append(a_col);
            }

            cabinet.append(cabinetBody);

            /*
            //a_box.attr('onclick', "selectBoxType("+boxid+")");
            cabinet.find('.divBox').each(function(){
                $(this).bind("click",function(){
                    var one_boxtype = all_boxtype; 	//箱型列表
                    one_boxtype.removeClass("form-control");

                    var tempid = $(this).find('.divBoxid').text();
                    one_boxtype.attr('id', "boxSelect_"+tempid);
                    one_boxtype.attr('onchange', "selectOneBoxType("+tempid+")");

                    //one_boxtype.click();
                    //$('#boxid_'+boxid).append(one_boxtype);
                    $(this).append(one_boxtype);


                });
              });
        */
        }
    }


    //输入某一列的 箱子个数 col:第几列
    function inputColNum(col) {
        var cabType = $("#cabType").val();
        debugger;
        var col_num = $('#colNumInput_' + col).val();		//该列调整后的箱子数
        if (forcheck(col_num) == false) {
            return false;
        }

        //调整箱子布局
        var cols = $('#columnNum').val(); 	//列数
        var boxs = $('#boxNum').val();		//箱子整数

        var cabinet = $('#oneCabinetBox'); 	//整个柜子
        var col_div = cabinet.find('#col_1');			//第一列DIV
        var boxid_div = cabinet.find('#boxid_1');		//一个箱子DIV
        var colinput_div = cabinet.find('#colinput_1');		//每一列的头部输入框DIV
        var col_input = cabinet.find('#colNumInput_1');//每一列的头部输入框

        var all_boxtype = $('#all_boxtype').clone();		//箱型select
        //all_boxtype.removeClass("form-control");
        var boxtype = $("#all_boxtype  option:selected").text();
        var boxHeight = $("#all_boxtype  option:selected").val();


        var boxid = 1;
        var newDivId = 1;
        //调整输入列，及后面列的箱子
        //如果增加了箱子，就在本列后追加相应的箱子，后面的列，箱号往后排
        //如果减少了箱子，就在本列后删除相应的箱子，后面的列，箱号往前排
        var mod_col = cabinet.find('#col_' + col);		//修改的列
        var mod_col_divBox = mod_col.find('.divBox');
        var mod_col_boxs = mod_col_divBox.length;	//修改前 该列的箱子数
        var add_box_num = col_num - mod_col_boxs;
        var bd_num = add_box_num;
        if (add_box_num > 0) {		//增加箱子
            boxid = mod_col_divBox.last().find('.divBoxid').text();
            boxid = parseInt(boxid) + 1;
            var tempBoxId = mod_col_divBox.last().attr('id');
            newDivId = parseInt(tempBoxId.substring(6, tempBoxId.length)) + 1;

            for (var j = 1; j <= add_box_num; j++) {	//创建列的箱子
                var a_box = boxid_div.clone();
                a_box.css("height", (boxHeight * 4 + 0) + "px");	//箱子高度

                if (cabType == '2') {	//托盘柜的箱号：列号+该列的箱号 01003
                    var cab_boxid = boxid;
                    if (cab_boxid < 10000) {
                        cab_boxid = '0' + cab_boxid;
                    }
                    a_box.attr('id', 'boxid_' + boxid);
                    a_box.find('.divBoxid').text(cab_boxid);
                    a_box.find('.divBoxType').text(boxtype);
                    a_box.find('.divBoxType').attr('onclick', "selectBoxType('" + boxid + "')");
                    //存托箱：提供绑定托盘复选框
                    if (boxtype == '存托箱') {
                        var checkTp = '<span><input name="checkTp" class="checkTp" type="checkbox" title="带托盘？"></span>';
                        a_box.find('.divBoxType').after(checkTp);
                    }
                } else {
                    a_box.attr('id', 'boxid_' + newDivId);
                    a_box.find('.divBoxid').text(boxid);
                    a_box.find('.divBoxType').text(boxtype);
                    a_box.attr('onclick', "selectBoxType(" + newDivId + ")");
                }

                mod_col.append(a_box);
                boxid++;
                newDivId++;
            }
        } else {		//减少箱子
            bd_num = mod_col_boxs - col_num;
            for (var i = 1; i <= bd_num; i++) {
                mod_col.find('.divBox').last().remove();
            }

        }

        if (cabType != '2') {		//托盘柜 不用变更其他列。
            //修改列  后面列的处理
            for (var i = (col + 1); i <= cols; i++) {
                var col_temp = cabinet.find('#col_' + i);
                col_temp.find('.divBox').each(function () {
                    //如果是控制箱，箱号为空，不变。
                    if ($(this).find('.divBoxid').text() != '') {
                        var newboxid = parseInt($(this).find('.divBoxid').text()) + add_box_num;
                        $(this).find('.divBoxid').text(newboxid);
                    }

                    var tempBoxId = $(this).attr('id');
                    var newDivId = parseInt(tempBoxId.substring(6, tempBoxId.length)) + add_box_num;
                    $(this).attr('id', 'boxid_' + newDivId);
                    $(this).attr('onclick', "selectBoxType(" + newDivId + ")");
                });
            }
        }

    }


    //选择箱型
    function selectBoxType(boxid) {
        //$.modal.open("选择箱型", ctx + "site/boxType/radio");
        var a_box = $('#boxid_' + boxid);
        $("#idSelect").val(a_box.find('.divBoxid').text());
        //var tempBoxId = a_box.attr('id');
        //var newDivId = parseInt(tempBoxId.substring(6,tempBoxId.length));
        $("#seqidSelect").val(boxid);
        $("#nameSelect").val(a_box.find('.divBoxType').text());

        var url = ctx + "site/boxType/radio?cabType=" + $("#cabType").val();
        var options = {
            title: '选择箱型',
            height: "500",
            url: url,
            callBack: doSubmitBoxType
        };
        $.modal.openOptions(options);

    }


    function doSubmitBoxType(index, layero) {

        var body = layer.getChildFrame('body', index);//绑定父子之间的关系，用于数据传递，缺少则无法传递

        var boxid = $("#idSelect").val();
        var newDivId = $("#seqidSelect").val();
        var typeNameOld = $("#nameSelect").val();

        var table = body.find('#bootstrap-table');
        var tr = table.find('tr.selected');

        var boxHeight = parseInt(tr.find('td:eq(5)').html());
        var boxtype = tr.find('td:eq(2)').html();

        //debugger;
        //箱型改变
        if (boxtype != typeNameOld) {
            var a_box = $('#boxid_' + newDivId);
            a_box.find('.divBoxType').text(boxtype);
            a_box.css("height", (boxHeight * 4 + 0) + "px");	//箱子高度
            $("#allTypeStr").val('ischange');

            //如果是托盘柜  调整存托箱的托盘复选框
            var cabType = $("#cabType").val();
            if (cabType == '2') {	//托盘柜
                if (typeNameOld == '存托箱') {
                    a_box.find('.checkTp').remove();
                }
                //存托箱：提供绑定托盘复选框
                if (boxtype == '存托箱') {
                    var checkTp = '<span><input name="checkTp" class="checkTp" type="checkbox" title="带托盘？"></span>';
                    a_box.find('.divBoxType').after(checkTp);
                }
            } else {
                //普通柜：对控制箱的处理  控制箱不占箱号  箱号为空

                //删除控制箱
                if (typeNameOld == '控制箱') {
                    //该箱子及后面的箱子箱号全部 +1
                    //首选定位该箱子的箱号，找该箱子前面一个的箱号，没找到箱号就为1
                    var newBoxid = 1;

                    var cabinet = $('#oneCabinetBox'); 	//整个柜子
                    //变更所有箱号
                    cabinet.find('.divCols').each(function () {	//所有列

                        $(this).find('.divBox').each(function () {	//所有箱子
                            var tempBoxId = $(this).attr('id');
                            var tempDivId = parseInt(tempBoxId.substring(6, tempBoxId.length));
                            if (tempDivId <= parseInt(newDivId)) {
                                var oldBoxid = $(this).find('.divBoxid').text();
                                if (oldBoxid != '') {
                                    newBoxid = parseInt(oldBoxid);
                                }
                            } else {
                                //后面的箱号全部 +1
                                var oldBoxid = $(this).find('.divBoxid').text();
                                if (oldBoxid != '') {
                                    $(this).find('.divBoxid').text(parseInt(oldBoxid) + 1);
                                }
                            }

                        });
                    });
                    a_box.find('.divBoxid').text(newBoxid);	//重置该箱子箱号
                }

                //选择一个控制箱
                if (boxtype == '控制箱') {
                    //该箱子箱号为空，后面的箱子箱号全部往前移 －1
                    a_box.find('.divBoxid').text('');	//箱号为空
                    var cabinet = $('#oneCabinetBox'); 	//整个柜子
                    //变更所有箱号
                    cabinet.find('.divCols').each(function () {	//所有列

                        $(this).find('.divBox').each(function () {	//所有箱子
                            var oldBoxid = $(this).find('.divBoxid').text();
                            if (oldBoxid != '' && parseInt(oldBoxid) > parseInt(boxid)) {
                                $(this).find('.divBoxid').text(parseInt(oldBoxid) - 1);
                            }
                        });

                    });

                }
            }

        }

        layer.close(index);
    }


    function forcheck(ss) {
        var type = "^[0-9]*[1-9][0-9]*$";
        var re = new RegExp(type);
        if (ss.match(re) == null) {
            $.modal.alertWarning('请输入大于零的整数!');
            //alert( "请输入大于零的整数!");
            return false;
        }
        return true;
    }