<div>
<!-- 下面的div通过遍历拼接起来 -->
<div><!-- select的最外层div -->
<div>下拉框的label内容</div>
<div>
<div><span>默认项文字</span><span>三角号</span></div>
<ul><li><span>备选项文字</span><span>三角号</span></li></ul>
</div>
<div>
<div><span>默认项文字</span><span>三角号</span></div>
<ul><!-- 下面的li通过遍历拼接起来 -->
<li><span>备选项文字</span><span>三角号</span></li>
<div>备选项详情</div></ul>
</div>
</div>
</div>
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.add_cust_rule_mask {
width: 100%;
height: 100%;
background: #000;
position: fixed;
left: 0;
top: 0;
opacity: 0.5;
z-index: 7;
}
.add_cust_rule_alert {
display: flex;
justify-content: center;
/* align-items:center; */
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 0;
overflow: auto;
z-index: 11;
width: 1000px;
height: 800px;
padding: 30px;
}
ul li {
list-style: none;
}
.add_cust_rule_alert .before_click {
margin-left: 20px;
display: inline-block;
width: 15px;
height: 15px;
background: red;
/*background: url(../../static/img/guolv-12_6-down.png) no-repeat;*/
background-size: contain;
background-position: center center;
cursor: pointer;
}
.add_cust_rule_alert .after_click {
margin-left: 20px;
display: inline-block;
width: 15px;
height: 15px;
background: green;
/* background: url(../../static/img/guolv-12_6-up.png) no-repeat;*/
background-size: contain;
background-position: center center;
cursor: pointer;
}
</style>
</head>
<body>
<div ng-controller="ctrl">
<div ng-click="add_cust_rule()"
style="width: 200px;height:100px;line-height:100px;margin:0 auto;font-size: 80px;text-align: center">点击
</div>
<p style="font-size: 30px;">说明：点击“点击”后，红色方块，表示已经折叠，点击它，可以展开；绿色方块，表示已经展开，点击它，可以折叠。</p>
<div class="add_cust_rule_mask" ng-show='is_show_alert' id="add_cust_rule_mask" ng-click="close_mask()">
</div>
<div class="add_cust_rule_alert" ng-show='is_show_alert'>
<div>
<div id="add_cust_rule_content">
</div>
<div style="display: flex;justify-content: center;margin:40px auto;">
<input type="button" value="添加自定义规则 已完成，关闭弹窗" ng-click="close_mask()"/>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
/* 以下"添加自定义规则"*/
//本功能的实现逻辑为递归：（1）触发事件，获取后台返回的数据，执行$scope.insert_form函数，在该函数内部，a将数据插入到页面上，b给每一个备选项右侧的三角号绑定点击函数；（2）在点击函数内部，获取后台返回的数据，执行$scope.insert_form函数；实现递归。
//本功能的实现逻辑为递归：（1）执行插入函数，绑定点击函数；（2）执行点击函数，执行插入函数。
$scope.is_show_alert = false;
var self_outer_next = 0;//避免递归时出现ID重复
var self_inner_next = 0;//避免递归时出现ID重复
$scope.cust_data = {
'protoContext': {
'FUNC': { // 界面label1
'default_select': 'Write_Single_Coil',
'type': 'select', // 表明FUNC后为select
'value': [
{
'Write_Single_Coil': { // select 中的 option
'isFinal': 0, // 是否是最后一级的value？能否继续点击？ 0：能点击， 1：不能点击
'default_select': 0//select默认选项；
}
},
{
'Write_Single_Register': {
'isFinal': 1,
}
}, {
'Write_Single_RegisterUP': {
'isFinal': 1,
}
},
],
},
'FUCKFUCK': { // 界面label1
'default_select': 'Write_Single_FUCK',
'type': 'select', // 表明FUNC后为select
'value': [
{
'Write_Single_FUCK': { // select 中的 option
'isFinal': 1, // 是否是最后一级的value？能否继续点击？ 0：能点击， 1：不能点击
'default_select': 0//select默认选项；
}
},
{
'Write_Single_RegisterFUCK': {
'isFinal': 0,
}
}, {
'Write_Single_RegisterFUCKYOU': {
'isFinal': 0,
}
},
],
},
'ADDR': {// 界面 label2
'type': 'input', // ADDR后为 input
'range': '[0, 65535]', // input的输入范围限制
},
'BDDR': {// 界面 label2
'type': 'input', // ADDR后为 input
'range': '[0, 65535]', // input的输入范围限制
}
}
};
$scope.close_mask = function () {
$scope.is_show_alert = false;
};
$scope.option_click = function () {//点击下拉框“备选项”文字内容时，触发的函数。作用：用该项的文字更改下拉框“默认框”里面的文字
$('.single_click').each(function (index, item) {
$(item).off('click');
var cust_option = $(this).attr('cust_option');
$(item).on('click', function (event) {
$('#' + cust_option).html(event.target.innerHTML);
});
});
};
$scope.label_width = function () {//label标签右侧对齐
setTimeout(function () {
var label_width = 0;
$('.label_width').each(function (index, item) {
if (label_width < item.clientWidth) {
label_width = item.clientWidth;
}
});
$('.label_width').each(function (index, item) {
//item.style.width = label_width + 'px';
$(item).width(label_width);
});
});
};
$scope.options_show = function () {//点击下拉框“默认框”右侧的三角号时，触发的函数。作用：让下拉框备选项显示或隐藏
$('.options_show').each(function (index, item) {
$(item).off('click');
var cust_three = $(this).attr('cust_three');
$(item).on('click', function () {
if ($('#ul_div' + cust_three).is(':hidden')) {
$('#ul_div' + cust_three).show();
$('.' + cust_three).hide();
$('#three' + cust_three).removeClass('before_click').addClass('after_click');
$('.three' + cust_three).removeClass('after_click').addClass('before_click');
} else {
$('#ul_div' + cust_three).hide();
$('#three' + cust_three).removeClass('after_click').addClass('before_click');
}
});
});
};
$scope.button_submit = function () {
$('.button_submit').each(function (index, item) {
$(item).off('click');
var self = $(this).attr('self');
$(item).on('click', function () {
console.log(self);
});
});
};
$scope.three_click = function () {//给所有下拉框“备选项”右侧的三角号绑定点击函数。作用：点击后，向后台请求数据，该数据作为该备选项的详情插入到该备选项的下面，然后再次给所有下拉框“备选项”右侧的三角号绑定点击函数。
$('.three_click').each(function (index, item) {
$(item).off('click');
var cust_attr = $(this).attr('self');
$(item).on('click', function () {
if ($(item).hasClass('after_click')) {
$(item).removeClass('after_click').addClass('before_click');
$('#id' + cust_attr).empty();
return;
}
$(item).removeClass('before_click').addClass('after_click');
//此处向后台发送请求
var default_array = [];//保存本次请求返回值中所有下拉框的默认选项
$.each($scope.cust_data.protoContext, function (key_outer, value) {
if (value.type === 'select') {
$.each(value.value, function (index, value) {
$.each(value, function (key, value) {
if (value.default_select === 0) {
default_array.push(key);
}
});
});
}
});
$scope.insert_form($scope.cust_data.protoContext, default_array, cust_attr);
});
});
};
$scope.insert_form = function (true_data, default_array, cust_attr) {//公用函数。作用：把从后台返回的数据插入到该备选项的下面并绑定相关函数。
cust_attr = cust_attr || '';
default_array = default_array || [];
var str = '';
var self_outer_id = 'self_outer_id';
var self_outer_index = 0;
$.each(true_data, function (key_outer, value) {
if (value.type === 'select') {
str += '<div style="display:flex;margin:0 auto;">';
str += '<div style="margin-left:10px;height:40px;line-height:40px;margin-top:10px;text-align:right;display:inline-block;" class="label_width">' + key_outer + '</div>';
str += '<div>';
str += '<div style="user-select: none;border-radius:5px;border:1px solid #ccc;height:40px;line-height:40px;margin-left:10px;margin-top:10px;padding-left:10px">';
str += '<span id="' + self_outer_id + self_outer_next + '">' + default_array[self_outer_index] + '</span>';
str += '<span class="before_click options_show" cust_three="' + self_outer_id + self_outer_next + '" id="three' + self_outer_id + self_outer_next + '" style="margin-right:10px;"></span>';
str += '</div>';
str += '<ul style="border-radius:5px;border:1px solid #ccc;margin-left:10px;padding:10px;" class="ul_options" id="ul_div' + self_outer_id + self_outer_next + '">';
var self_inner_id = 'self_inner_id';
$.each(value.value, function (index, value) {
$.each(value, function (key_inner, value) {
str += '<li style="height:45px;line-height:45px;">';
str += '<span style="user-select: none;cursor:pointer" class="single_click" cust_option="' + self_outer_id + self_outer_next + '">' + key_inner + '</span>';
if (value.isFinal === 0) {
str += '<span self="' + self_inner_id + self_inner_next + '" class="three_click before_click three' + self_outer_id + self_outer_next + '"></span>';
str += '</li>';
str += '<div style="margin-left:20px;" id="id' + self_inner_id + self_inner_next + '" class="' + self_outer_id + self_outer_next + '"> </div>';
} else {
str += '</li>';
}
});
self_inner_next += 1;
});
str += '</ul>';
str += '</div>';
str += '</div>';
self_outer_next += 1;
self_outer_index += 1;
}
if (value.type === 'input') {
str += '<div style="display:flex;margin:10px;">';
str += '<span style="height:40px;line-height:40px;text-align:right;display:inline-block;" class="label_width">' + key_outer + '</span>';
str += '<input style="border-radius:5px;border:1px solid #ccc;height:40px;line-height:40px;margin-left:10px;padding-left:10px;" type="text" placeholder="' + value.range + '">';
str += '<input style="text-align:center;cursor:pointer;width:50px;border-radius:5px;border:1px solid #ccc;height:40px;line-height:40px;margin-left:10px;" type="button" class="button_submit" self="' + value.range + '" value="提交"/>';
str += '</div>';
}
});
var cust_id = cust_attr == '' ? '#add_cust_rule_content' : '#id' + cust_attr;
$(cust_id).empty().append(str).show().find('.ul_options').hide();
$scope.three_click();
$scope.option_click();
$scope.button_submit();
$scope.options_show();
$scope.label_width();
};
$scope.add_cust_rule = function () {
//此处向后台发送请求并获取数据；
$scope.is_show_alert = true;
var default_array = [];//保存本次请求返回值中所有下拉框的默认选项
$.each($scope.cust_data.protoContext, function (key_outer, value) {
if (value.type === 'select') {
$.each(value.value, function (index, value) {
$.each(value, function (key, value) {
if (value.default_select === 0) {
default_array.push(key);
}
});
});
}
});
$scope.insert_form($scope.cust_data.protoContext, default_array);
};
/* 以上"添加自定义规则"*/
});
</script>
</body>
</html>