Js 组装 HTML

最新推荐文章于 2022-07-27 18:22:43 发布
最新推荐文章于 2022-07-27 18:22:43 发布
阅读量396 收藏
点赞数
分类专栏： ----------Java---------- 文章标签： JAVA JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010148687/article/details/100940919
版权 
//配置箱子，生成箱子的布局。
    var boxTypeData = [[${@dict.getType('boxTypeAttr')}]];
    var weight = 0;
    var height = 0;

    function createBox() {
        debugger;
        control_box = 0;
        var boxType = $("#all_boxtype").val();

        height = boxType;

        var boxid = 1;
        var boxTypeName = $("#all_boxtype").find("option:selected").text();
        var html = "";
        html += "<select id='allBoxTypes' class='form-control' name = 'boxname'>";
        for (var i = 0; i < boxTypeData.length; i++) {
            if (boxTypeName == boxTypeData[i].dictLabel) {
                html += "<option value=" + boxTypeData[i].dictValue + " selected>" + boxTypeData[i].dictLabel + "</option>";
            } else {
                html += "<option value=" + boxTypeData[i].dictValue + ">" + boxTypeData[i].dictLabel + "</option>";
            }
        }
        $("#allBoxTypes option[value='" + boxType + "']").attr("selected", "selected");
        html += "</select>";
        var cabType = $("#cabType").val();
        if ($.validate.form()) {
            $("#allTypeStr").val('ischange'); //新增柜型时，生成布局时即认为已改变

            var cols = $('#col').val(); 	//列数
            var boxs = $('#laneNum').val();		//箱子整数
            var col_box = parseInt(boxs / cols);	//每列的箱子数
            if (col_box < 1) {
                $.modal.alertWarning('列数不能大于箱子数');
                //$('#col').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 = height;
            cabinet.html('');		//置空柜子
            cabinet.css("width", (160 * cols + 2) + "px");	//柜子宽度

            cabinetBody.css("width", (160 * cols + 2) + "px");	//柜子宽度
            cabinetBody.html('');
            //遍历列 创建每一列的箱子
            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");	//箱子高度


                    a_box.find('.divBoxid').text(boxid);
                    a_box.find('.divBoxType').find(".allBoxType").empty();
                    a_box.find('.divBoxType').find(".allBoxType").append(html);

                    //动态赋值
                    a_box.find(".divBoxType").find(".boxTypeAttr").empty();
                    var boxTypeInput = '<input type="hidden" name="bsVendingModelBoxList[' + boxid + '].boxType" value="' + boxtype + '"/>';
                    var boxTypeX = '<input type="hidden" name="bsVendingModelBoxList[' + boxid + '].bRow" value="' + j + '"/>';
                    var boxTypeY = '<input type="hidden" name="bsVendingModelBoxList[' + boxid + '].bCol" value="' + i + '"/>';
                    a_box.find(".divBoxType").find(".boxTypeAttr").append(boxTypeInput);
                    a_box.find(".boxPosition").find('.boxX').append(boxTypeX);
                    a_box.find(".boxPosition").find('.boxY').append(boxTypeY);

                    a_box.find('.divBoxTypeName').text(boxtype);
                    a_box.attr('onchange', "selectBoxType(" + boxid + ")");
                    a_box.attr('onclick', "getBoxType(" + boxid + ")");
                    a_box.find('.checkTp').remove();	//删除已经加的复选框

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

                cabinetBody.append(a_col);
            }
            cabinet.append(cabinetBody);
        }
    }


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

        //调整箱子布局
        var cols = $('#col').val(); 	//列数
        var boxs = $('#laneNum').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");	//箱子高度

                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 + ")");
                });
            }
        }

    }


    //选择箱型
    var control_box = 0 //判断如果为1，则已经添加了控制箱，无需再添加(控制箱最多只能设置1个)
    function selectBoxType(boxIdValue) {
        debugger;
        var a_box = $('#boxid_' + boxIdValue);
        var typeNameOld = strName;
        var boxid = a_box.find('.divBoxid').text();
        var newDivId = boxIdValue;
        var boxTypeName = $("#boxid_" + boxIdValue).find("option:selected").text();
        var boxType = "";
        for (var i = 0; i < boxTypeData.length; i++) {
            if (boxTypeName == boxTypeData[i].dictLabel) {
                boxType = boxTypeData[i].dictValue;
            }
        }
        if (boxTypeName == '控制箱') {
            if (control_box == 1) {
                var html = "";
                html += "<div  class='divContent'>";
                html += "<span class='divBoxid'>" + boxIdValue + "</span>";
                html += "<span class='divBoxType'>";
                html += "<select id='allBoxTypes' class='form-control' name = 'boxname'>";
                for (var i = 0; i < boxTypeData.length; i++) {
                    if (typeNameOld == boxTypeData[i].dictLabel) {
                        html += "<option value=" + boxTypeData[i].dictValue + " selected>" + boxTypeData[i].dictLabel + "</option>";
                    } else {
                        html += "<option value=" + boxTypeData[i].dictValue + ">" + boxTypeData[i].dictLabel + "</option>";
                    }
                }
                html += "</select>";
                html += "</span>";
                html += "<span id='divBoxTypeName' style='display: none;'  class='divBoxTypeName'>" + typeNameOld + "</span>";
                html += "</div>";
                $("#boxid_" + boxIdValue).html(html);
                $.modal.alertWarning("已经添加过控制箱，不能再添加控制箱！");
                return false;
            }
            control_box = 1;
        }
        if (typeNameOld == '控制箱' && boxTypeName != '控制箱') {
            control_box = 0;
        }
        var boxHeight = 0;

        boxHeight = boxType;

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

            var cabType = $("#cabType").val();
            //普通柜：对控制箱的处理  控制箱不占箱号  箱号为空
            //删除控制箱
            if (typeNameOld == '控制箱') {
                //该箱子及后面的箱子箱号全部 +1
                //首选定位该箱子的箱号，找该箱子前面一个的箱号，没找到箱号就为1
                var newBoxid = 1;
                var cabinet = $('#oneCabinetBox'); 	//整个柜子
                var checkNaN = 0;
                //变更所有箱号
                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));
                            }
                        }

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

            //选择一个控制箱
            if (boxTypeName == '控制箱') {
                //该箱子箱号为空，后面的箱子箱号全部往前移 －1
                a_box.find('.divBoxid').text(boxIdValue);	//箱号为空
                $("#controlBoxNum").val(boxIdValue);
                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));
                        }
                    });

                });

            }
        }
    }

    var strName = "";

    function getBoxType(boxId) {
        strName = $("#boxid_" + boxId).find("option:selected").text();
    }


    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;
    }
科学之星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS组装 HTML片段 列表 ul li
yangqingfan的博客
07-16 1199
一 组装 列表   el = document.getElementById('requestlist');   //var url = '/ServiceAction/com.eweaver.webservice.servlet.MListAction?action='+listtype+'&status='+liststate+'&pageno='+page+'&id='+user;
Handlerbar.js——Ajax组装html的超强模板工具学习实践
qiubaihong的博客
05-13 1929
一、背景介绍 在JSP页面开发中，关于页面中html代码的组建方式有两种： 1、在JSP页面使用jsp语言或等标签进行组建，优点：保持html原有格式，缺点：占用大量服务器资源，而且速度缓慢； 2、通过Ajax请求返回json对象，for循环等进行html代码组建，优点：反应速度非常快，用户体验非常好，缺点：无法html原有格式 在这里，推荐后者，因
js拼装html代码
huhailong_1的博客
03-26 1303
html组装数据,mini
weixin_32534011的博客
06-10 83
import pymysqlimport timeimport osimport retemplate_root = "./templates"# 用来存放url路由映射# url_route = {# "/index.py":index_func,# "/center.py":center_func# }g_url_route = dict()def route(url):def fun...
js拼接html
tcllxxl的博客
09-07 270
// js中拼接html包括函数及其方法 diagnoseCard += " <div " + "οnclick=getChecksAndTreatmentPlan(this,'" + info[i].name +"')" + ">\n" + 123 "</div>"; // this是当前div对象，info[i].name
基于jstree使用JSON数据组装成树
10-19
li_attr和a_attr则分别用于为生成的LI元素和A元素添加额外的HTML属性。 开发者可以根据具体需求，决定是否使用children属性。如果选择不使用children，那么每个节点都需要包含两个必须的字段：id和parent。在这种...
animate_img_particles_js:弄乱图像并用Javascript重新组装
05-15
在“animate_img_particles_js-master”项目中，我们可以看到实现这一效果的具体代码结构，包括HTML文件、CSS样式以及核心的JavaScript脚本。通过阅读和学习这些代码，开发者可以更好地理解和掌握如何构建自己的图像...
HTML5 Canvas实现粒子爆破组装成文字的动画特效源码.zip
11-03
在这个“HTML5 Canvas实现粒子爆破组装成文字的动画特效源码”中，我们可以深入学习如何利用Canvas API来制作炫酷的视觉效果。 首先，Canvas元素是HTML5引入的新标签，通过JavaScript来控制其内容的绘制。在...
js代码-js平铺与组装
07-14
在"js代码-js平铺与组装"这个主题中，我们将探讨JavaScript中的两个关键概念：平铺（Tiling）和组装（Assembly），尽管这些术语在JavaScript上下文中可能不是标准用法，但我们可以将其与相关的编程概念联系起来理解...
js文件里建html,组建一个js文件的HTML
weixin_33242795的博客
07-16 194
基本上，这让我从一个PHP文件中提取一些数据，并把它放到使用jQuery一个div。因此，教程中的所有内容都可以正常工作，但因为我正在考虑通过代码将9-10个不同的链接放在一起，所以我认为我将所有功能代码放在一个js文件中，然后在html中调用该函数。只是为了澄清，我对JavaScript的理解很少，尽管我有使用php的经验。在一个新的名为js文件links.js，我已经把2个不同的功能，我想fu...
js拼接html注意问题示例探讨
10-25
js的拼接html，会有一些细节是需要注意的，也就是单引号的问题，下面有个示例，大家感受下
js组装知识(待续……)
m0_57479235的博客
07-23 96
object.assign() 这个方法回使源对象上的[[Get]]取得属性的值,然后使用目标对象上的[[Set]]设置属性的值 实际上对每个源对象执行的是浅复制,如果多个源对象都有相同的属性,则使用最后一个赋值的值 let obj1 = { get a() { return 'aaa' } } let obj2 = { set a(val) { console.log(val) } } console.log(obj1.a) //'aaa' // 对象引用 let o
html模块化静态组装_如何使用组装建立静态博客
cune1359的博客
06-27 433
今天，我们将看一下Assemble ，这是一个Grunt插件，可让我们轻松创建和管理静态网站。 组装可能与Jekyll有点相似，但是它为桌子带来了更多的灵活性和功能，使其更强大。 Permalink，Bootstrap Boilerplates和LESS编译器是使Assemble成为成熟CMS应用程序可比的工具的功能。 在这里，我们将向您展示如何使用Assemble创建静态博客 。 推...
页面进行拼接时的判断
weixin_34161029的博客
09-18 152
&lt;script&gt; function changeStore(code){// alert("+++"); $.ajax({ cache:true, type: 'post', url: "${rootUrl }app/wx/product/cookie/changeStore?storeCode="+code, async:true, before...
若依的字典使用
热门推荐
weixin_45960496的博客
02-22 1万+
** 若依集成版框架的字典使用 如有看不懂的朋友可留言，博主会一一解答 ** 单个值的回显 label class="col-sm-2 control-label">回显数据字典值：</label> <div class="form-control-static" th:text="${@dict.getLabel('sys_normal_disable', status)}"> </div> th:text="${@dict.getLabel('sys_
【thymeleaf+spring进阶应用】(1)利用SpringEL表达式获取后台bean对应数据库数据${@myBean.doSomething()}
kouryoushine的博客
06-18 3043
一、背景 thymeleaf的官方文档中提到了${@myBean.doSomething()}可以访问容器中bean的数据。但从字面难以理解具体意思，若依框架里面有很好的demo。接下来将通过分析demo使用来理解这个表达式的强大功能。 Access any beans in your application context using SpringEL’s syntax: ${@myBean....
求问:页面搜索功能,点击搜索后参数并没有传给后台
weixin_46007646的博客
07-17 318
页面 <div class="container-div ui-layout-center"> <div class="row"> <div class="col-sm-12 search-collapse"> <form id="blog-form"> <input type="hidden" id="parentId" name="parentId"> .
基于若依springboot架构实现数据多维统计
csdn565973850的博客
07-27 1600
基于springboot架构实现数据多维统计，列表动态增减列，mybatis动态传入字段等内容
thymeleaf 直接调用后台Service之${@myBean.doSomething()}
涵山韵海的博客
04-02 1626
背景 thymeleaf的官方文档中提到了${@myBean.doSomething()}可以访问容器中bean的数据。 前端thymeleaf <label>性别： </label> <select name="status" th:with="type=${@dict.getType('sys_sex')}"> <option v...
vue3 组装html
最新发布
06-14
组装HTML的主要方式有： 1. **模板语法**（template）: 在.vue文件中，你可以使用HTML模板结合Vue的指令来定义组件。例如，`<template>`标签用于包含静态的HTML结构，`v-bind`、`v-if`、`v-for`等指令用来绑定数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值