easyUI新增一行+删除一行+显示/隐藏元素+设置必填_easyui点击增加一行输入框-CSDN博客

本文链接：https://blog.csdn.net/a18602320276/article/details/97324050

写作背景

入职新公司，组长安排优化一个现有功能，包含常规的curd以及导入导出。后端逻辑一天不到就全部实现了，但是前端页面布局，以及js联动等却花了我两天时间，深感前端技术能力薄弱，故记录此次优化所遇问题。

前端框架

easyUI

需求（一）

点击添加按钮，新增一行Dom元素；点击删除，则删除该行，如下入所示
需求2

JS代码

// 全局变量 - 用于构建新id
var rowCount = 0;
// 增加一行
function addRow() {
	// 递增id后缀
    rowCount++;
    // 拼接需要新增的dom元素
    var newRow =
        '<tr id="flightLine' + rowCount + '">' + '<td>xxxx:<input id="addOrgCode' + rowCount +
        '" name="flightLineList[' + rowCount + '].orgCode" class="easyui-combobox" data-options="valueField:\'id\',textField:\'text\'" />' +
        '</td>' +
        '<td>xxxx:<input id="addDstCode' + rowCount + '" name="flightLineList[' + rowCount + '].dstCode" class="easyui-combobox" data-options="valueField:\'id\',textField:\'text\'" />' +
        '</td>' +
        '<td>xxxx:<input id="flightNums' + rowCount + '" class="easyui-validatebox validatebox-text validatebox-invalid" name="flightLineList[' + rowCount + '].flightNums" style="width:100px;"/></td>' +
        '<td id="foodCityTd' + rowCount + '">xxxx:<input id="foodCity' + rowCount + '" name="flightLineList[' + rowCount + '].foodCity" class="easyui-combobox" data-options="valueField:\'id\',textField:\'text\'"/>' +
        '</td>' +
        '<td> <a href="javascript:void(0)" class="easyui-linkbutton l-btn l-btn-small" data-options="iconCls:\'icon-ok\'" οnclick="delRow(' + rowCount + ')">' +
        '<span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">删除</span><span class="l-btn-icon icon-remove">&nbsp;</span></span>' +
        '</a></td>' +
        '</tr>';
     // 拼接元素
    $('#flightLineList').append(newRow);
    // 以JS方式构建元素
    // 构建验证框
    $('#flightNums' + rowCount).validatebox({
        required: true
    });
    // 构建下拉框
    $('#addOrgCode' + rowCount).combobox({
        data: [{
            id: '1',
            text: '重庆'
        }, {
            id: '2',
            text: '上海'
        }, {
            id: '3',
            text: '北京'
        }],
        required: true,
        width: 100,
        multiple: false
    });
    // 构建下拉框
    $('#addDstCode' + rowCount).combobox({
        data: [{
            id: '1',
            text: '重庆'
        }, {
            id: '2',
            text: '上海'
        }, {
            id: '3',
            text: '北京'
        }],
        required: true,
        width: 100,
        multiple: false
    });
    // 构建下拉框
    $('#foodCity' + rowCount).combobox({
        data: [{
            id: '1',
            text: '重庆'
        }, {
            id: '2',
            text: '上海'
        }, {
            id: '3',
            text: '北京'
        }],
        required: true,
        width: 100,
        multiple: false
    });
}

//删除行
function delRow(rowIndex) {
    $("#flightLine" + rowIndex).remove();
}

注意点

（1）、构建dom元素时，保证与前端easyui一致，特别注意class属性，可按F12查看。
（2）、拼接的dom，需要以JS方式构建重新构建，如不进行此步，那么新的dom不会带有easyui（如必填失效）

需求（二）

联动效果，选择某一项时，隐藏另一项。

JS代码

// 显示元素
function toShow(id) {
    $("#" + id).show();
}
// 隐藏元素
function toHide(id) {
    $("#" + id).hide();
}
// 设置是否必填
// id为页面id
// type为true或者false 
function setRequired(id, type) {
	// 使用$("#" + id).combobox({required})重构元素，会清空已经选择过的下拉框的值
	// 用下列方法重设属性，不会清除已经选择的值
    $("#" + id).combobox('options').required = type;
    $("#" + id).combobox('textbox').validatebox('options').required = type;
    // 必须要此项，否则第一次显示时不会有必填的效果
    $("#" + id).combobox('validate');
}

共用的HTML代码

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
    <title>Basic Combo - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
</head>

<body th:inline="text">
<style type="text/css">
    td {
        padding-left: 10px;
        padding-top: 5px;
    }
</style>
<div class="easyui-panel" title="" style="width:1000px">
    <div style="padding:10px 60px 20px 60px">
        <form id="competelineForm" method="post">
            <table id="table">
                <tr>
                    <td colspan="4">
                        <table id="flightLineList" width="800" border="0" cellpadding="0" cellspacing="0">
                            <tr id="flightLine0">
                                <td>xxxx:
                                    <input id="addOrgCode0" class="easyui-combobox"
                                           name="flightLineList[0].orgCode"
                                           data-options="valueField:'id',textField:'text'"/>
                                </td>
                                <td>xxxx:
                                    <input id="addDstCode0" class="easyui-combobox"
                                           name="flightLineList[0].dstCode"
                                           data-options="valueField:'id',textField:'text'"/>
                                </td>
                                <td>xxxx:
                                    <input id="flightNums0" class="easyui-validatebox"
                                           name="flightLineList[0].flightNums" data-options="required:true"
                                           style="width:100px;"/>
                                </td>
                                <td id="foodCityTd0" hidden = "true">xxxx:
                                    <input id="foodCity0" class="easyui-combobox"
                                           name="flightLineList[0].foodCity"
                                           data-options="valueField:'id',textField:'text'"/>
                                </td>
                                <td></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a id="refoundAdd" href="javascript:void(0)" class="easyui-linkbutton"
                           data-options="iconCls:'icon-add'"
                           onclick="addRow()">继续添加</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script type="text/javascript">
    /*<![CDATA[*/
    $(function () {
        $('#addOrgCode0').combobox({
            required: true,
            width: 100,
            data: [{
                id: '1',
                text: '重庆'
            }, {
                id: '2',
                text: '上海'
            }, {
                id: '3',
                text: '北京'
            }],
            multiple: false
        });
        $('#addDstCode0').combobox({
            required: true,
            width: 100,
            data: [{
                id: '1',
                text: '重庆'
            }, {
                id: '2',
                text: '上海'
            }, {
                id: '3',
                text: '北京'
            }],
            multiple: false
        });
        $('#foodCity0').combobox({
            required: true,
            width: 100,
            data: [{
                id: '1',
                text: '重庆'
            }, {
                id: '2',
                text: '上海'
            }, {
                id: '3',
                text: '北京'
            }],
            multiple: false
        });
    });
    /*]]>*/
</script>
<script src="/xxxx.js" type="text/javascript"></script>
</body>
</html>