easyUI新增一行+删除一行+显示/隐藏元素+设置必填
写作背景
入职新公司，组长安排优化一个现有功能，包含常规的curd以及导入导出。后端逻辑一天不到就全部实现了，但是前端页面布局，以及js联动等却花了我两天时间，深感前端技术能力薄弱，故记录此次优化所遇问题。
前端框架
easyUI
需求（一）
点击添加按钮，新增一行Dom元素；点击删除，则删除该行，如下入所示
JS代码
// 全局变量 - 用于构建新id
var rowCount = 0;
// 增加一行
function addRow() {
// 递增id后缀
rowCount++;
// 拼接需要新增的dom元素
var newRow =
'+ rowCount + '">' + 'xxxx:+ rowCount +
'" name="flightLineList[' + rowCount + '].orgCode" class="easyui-combobox" data-options="valueField:\'id\',textField:\'text\'" />' +
' ' +
'xxxx:+ rowCount + '" name="flightLineList[' + rowCount + '].dstCode" class="easyui-combobox" data-options="valueField:\'id\',textField:\'text\'" />' +
' ' +
'xxxx:+ rowCount + '" class="easyui-validatebox validatebox-text validatebox-invalid" name="flightLineList[' + rowCount + '].flightNums" style="width:100px;"/> ' +
'+ rowCount + '">xxxx:+ rowCount + '" name="flightLineList[' + rowCount + '].foodCity" class="easyui-combobox" data-options="valueField:\'id\',textField:\'text\'"/>' +
' ' +
' + rowCount + ')">' +
'' +
' ' +
' ';
// 拼接元素
$('#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">
/*
$(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>