devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

若依ruoyi框架html部分实现onclick多选，及追加元素(有点乱，给自己看)_若依onclick多个参数

作者：小丑西瓜9 | 2024-03-06 10:20:48

赞

踩

若依onclick多个参数

只针对若依框架的html部分代码：

想要的效果，选中多选项，实现指定元素节点的新增(各种方式实现都不理想，只能自己一点点拼了)：

 

 

效果：

移除：

 

 

 

代码：  复制指定节点(页面初始化生成的被隐藏的节点，id为 div_replace_id)；遍历验证新增节点各项元素数值；提交时获取新增节点下的所有数据，封装为json字符串 。复制的节点被bootstrap进行了二次编码，所以js里对被复制节点代码做了各种自定义删减

  1. <!DOCTYPE HTML>
  2. <html  lang="zh" xmlns:th="http://www.thymeleaf.org">
  3. <meta charset="utf-8">
  4. <head th:include="include :: header"></head>
  5. <body class="white-bg">
  6.     <div class="wrapper wrapper-content animated fadeInRight ibox-content">
  7.         <form class="form-horizontal m" id="form-boomWorkTask-add" th:object="${merchantOrder}">
  8. 			<input id="merchantOrderId" name="merchantOrderId" class="form-control" type="hidden" th:value="*{merchantOrderId}">
  9. 			<input id="merchantOrderTitle" name="merchantOrderTitle" class="form-control" type="hidden" th:value="*{merchantOrderTitle}">
  10. 			<input id="channelsJson" name="channelsJson" class="form-control" type="hidden">
  11.  
  12.  
  13. 			<div class="form-group">
  14. 				<label class="col-sm-3 control-label">任务类型：</label>
  15. 				<div class="col-sm-8">
  16. 					<input id="taskType" name="taskType" type="hidden" value="1">
  17. 					<span id="taskTypeSpan" name="taskTypeSpan" th:each="dict:${@dict.getType('boom_task_type')}" th:class="${dict.dictValue == '1' ? ' badge badge-success taskTypeSpan ' : 'badge badge-default taskTypeSpan '}" th:text="|&nbsp;&nbsp;&nbsp;${dict.dictLabel}&nbsp;&nbsp;&nbsp;|" th:value ="${dict.dictValue}" th:onclick="selectTaskTypeSpan(this,[[${dict.dictValue}]])" style="margin: 0.5rem;padding: 0.8rem;font-size:12px;cursor:pointer;"/>
  18.  
  19. 				</div>
  20. 			</div>
  21.  
  22. 			<div class="form-group">
  23. 				<label class="col-sm-3 control-label">类目：</label>
  24. 				<div class="col-sm-4">
  25. 					<select name="dictCategoryKV" id="dictCategoryKV" th:with="dictList=${@dict.getType('talent_category')}" class="selectpicker" title="请选择类目" data-live-search="true" >
  26. 						<option th:each="dict : ${dictList}" th:text="${dict.dictLabel}"
  27. 								th:value="|${dict.dictValue},${dict.dictLabel}|"></option>
  28. 					</select>
  29. 				</div>
  30. 				<label class="dictCategoryKVTip" style="color:#ef392b;"></label>
  31. 			</div>
  32.  
  33. 			<!--
  34. 			下拉检索渠道
  35. 			<div class="form-group">
  36. 				<label class="col-sm-3 control-label">渠道：</label>
  37. 				<div class="col-sm-8">
  38. 					<select name="dictChannelKV" id="dictChannelKV" th:with="dictList=${@dict.getType('talent_channel')}" class="selectpicker" multiple title="请选择渠道" data-live-search="true" >
  39. 						<option th:each="dict : ${dictList}" th:text="${dict.dictLabel}"
  40. 								th:value="|${dict.dictValue},${dict.dictLabel}|"></option>
  41. 					</select>
  42. 				</div>
  43. 				<label class="dictChannelKVTip" style="color:#ef392b;"></label>
  44. 			</div>
  45. 			-->
  46.  
  47. 			<div class="form-group">
  48. 				<label class="col-sm-3 control-label">渠道：</label>
  49. 				<div class="col-sm-8">
  50. 					<span th:each="dict:${@dict.getType('talent_channel')}" th:id ="'channelsSpan_'+${dict.dictValue}" th:class="${dict.dictValue == '1' ? ' badge badge-success channelsSpan ' : 'badge badge-default channelsSpan '}" th:text="|&nbsp;&nbsp;&nbsp;${dict.dictLabel}&nbsp;&nbsp;&nbsp;|" th:value ="${dict.dictValue}" th:onclick="selectChannelSpan(this,[[${dict.dictValue}]],[[${dict.dictLabel}]])" style="margin: 0.5rem;padding: 0.8rem;font-size:12px;cursor:pointer;"/>
  51.  
  52. 				</div>
  53. 			</div>
  54.  
  55. 			<!--
  56. 			原多选方式(弃用)
  57. 			<div class="form-group">
  58. 				<label class="col-sm-3 control-label">渠道：</label>
  60. 				<div class="col-sm-9">
  61. 					<label th:each="dict:${@dict.getType('talent_channel')}" class="check-box" onclick="addText(this)">
  62. 						<input id="channelsKVArray" name="channelsKVArray" type="checkbox"  th:value="|${dict.dictValue}@${dict.dictLabel}|" th:text="${dict.dictLabel}">
  63. 					</label>
  64. 				</div>
  65. 			</div>
  66. 			-->
  67.  
  68. 			<div class="form-group">
  69. 				<label class="col-sm-3 control-label">各渠道内容：</label>
  70. 				<div class="col-sm-8">
  71. 				</div>
  72. 			</div>
  73.  
  74. 			<hr width="70%"/>
  75. 			<!-- 渠道池 -->
  76. 			<div id="push_channels">
  77. 				<!-- 隐藏节点(追加渠道时复制此节点) start  -->
  78. 				<div id="div_replace_id" class="div_replace_base" hidden>
  79. 					<div class="form-group">
  80. 						<label class="col-sm-3 control-label"></label>
  81. 						<div class="col-sm-8">
  82. 								<input id="channelName" class="" hidden th:value="渠道名">
  83. 								<label style="margin-top: 9px;font-size: 16px;font-weight: bold;">渠道名：</label>
  84. 								<label style="color: red;font-size: 16px;float: right;cursor:pointer;" title="删除" onclick="removeChannel('div_replace_id')">&nbsp;&nbsp;x&nbsp;&nbsp;</label>
  85. 							</input>
  86. 						</div>
  87. 						<div class="form-group">
  88. 							<label class="col-sm-3 control-label"></label>
  89. 							<div class="col-sm-4" >
  90. 								<input id="articleType" type="hidden" value="0">
  91. 								<span id="articleTypeSpan" th:each="dict:${@dict.getType('article_type')}" th:class="${dict.dictValue == '0' ? ' badge badge-success articleTypeSpanClass ' : 'badge badge-default articleTypeSpanClass '}" th:text="|&nbsp;&nbsp;&nbsp;${dict.dictLabel}&nbsp;&nbsp;&nbsp;|" th:value ="${dict.dictValue}" th:onclick="selectArticleTypeSpan_rep,[[${dict.dictValue}]])" style="margin: 0.5rem;padding: 0.8rem;font-size:12px;cursor:pointer;"/>
  92. 							</div>
  93. 							<div class="col-sm-4">
  94. 								<input id="workNum" class="form-control" type="number" placeholder="内容数量">
  95. 							</div>
  96. 							<label class="workNumTip" style="color:#ef392b;"></label>
  97. 						</div>
  98.  
  99. 						<div class="form-group">
  100. 							<label class="col-sm-3 control-label"></label>
  101. 							<div class="col-sm-4">
  102. 								<select id="staffKV" class="selectpicker" title="选择执行人" data-live-search="true" >
  103. 									<option th:each="map : ${staffList}" th:text="${map.mapValue}"
  104. 											th:value="|${map.mapKey},${map.mapValue}|" ></option>
  105. 								</select>
  106. 							</div>
  107. 							<div class="col-sm-4" style="margin-left:3px;" >
  108. 								<input type="text"  placeholder="计划任务结束日期" class="layui-input form-control " id="planEndDate" th:value="*{#dates.format(planEndDate,'yyyy-MM-dd')}">
  109. 							</div>
  110. 							<label class="staffKVTip" style="color:#ef392b;"></label>
  111. 						</div>
  112. 						<div class="form-group">
  113. 							<label class="col-sm-3 control-label"></label>
  114. 							<div class="col-sm-8">
  115. 								<textarea id="taskInfo" class="form-control" placeholder="任务描述" th:field="*{orderNote}"></textarea>
  116. 							</div>
  117. 						</div>
  118.  
  119. 						<hr width="70%"/>
  120. 					</div>
  121. 				</div>
  122. 				<!-- 隐藏节点(追加渠道时复制此节点) end  -->
  123. 			</div>
  124. 		</form>
  125. 	</div>
  126.     <div th:include="include::footer"></div>
  127.     <script type="text/javascript">
  128. 		var prefix = ctx + "system/boomWorkTask";
  129.         //注意：
  130.         layui.use(['laydate'], function(){
  131.             var laydate = layui.laydate;
  132.             //执行一个laydate实例
  133.             laydate.render({
  134.                 elem: '#planEndDate', //指定元素
  135.                 done:function(value,date){//value, date, endDate点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
  136.                     if(value.length == 10){
  137.                         // reloadData(value);//默认加载当日数据
  138.                     }
  139.                 }
  140.             });
  141.         });
  142.  
  143. 		$("#form-boomWorkTask-add").validate({
  144. 			rules:{
  145.                 // workTaskTitle:{
  146.                 //     required:true,
  147.                 // },
  148.                 // workNum:{
  149.                 //     required:true,
  150.                 // },
  151.                 // taskInfo:{
  152.                 //     required:true,
  153.                 // },
  154. 			}
  155. 		});
  156.  
  157.         function submitHandler() {
  158.             cleanTips();
  159.             if ($.validate.form()) {
  160.                 if(add_validate() == false){
  161.                     return false;
  162.                 }
  163.                 $.operate.save(prefix + "/add", $('#form-boomWorkTask-add').serialize());
  164.             }
  165.         }
  166.  
  167.         //验证并提示
  168.         function add_validate() {
  169.             if($("#dictCategoryKV").val() == ""){
  170.                 $(".dictCategoryKVTip").html("*必选");
  171.                 $.modal.msgError("未选择类目");
  172.                 $("#dictCategoryKV").focus();
  173.                 return false;
  174.             }
  175.  
  176.             //下面是遍历带有名为div_replace的class节点下的各元素数值
  177. 			var eachBoolean = true;
  178.             var jsonArr = [];
  179.             var i = 0;
  180.             $('div').filter('.div_replace').each(function() {
  181.                 var eachJson = {};
  182.                 var channelId = $(this).attr('id');
  183.                 eachJson["channelId"] = channelId;
  184.                 eachJson["channelName"] = $(this).find($("#channelName_"+channelId)).val();
  185.                 eachJson["articleType"] = $(this).find($("#articleType_"+channelId)).val();
  186.  
  187.                 var workNum_Element = $(this).find($("#workNum_"+channelId));
  188.                 var workNum = workNum_Element.val();
  189.                 if(workNum == "" || parseInt(workNum) < 1){
  190.                     $.modal.msgError("请录入正确数值");
  191.                     workNum_Element.focus();
  192.                     eachBoolean = false;
  193.                     return false;
  194. 				}else{
  195.                     if(parseInt(workNum) > 1000){
  196.                         $.modal.msgError("内容最大分配数为1000，请拆分任务");
  197.                         workNum_Element.focus();
  198.                         eachBoolean = false;
  199.                         return false;
  200.                     }
  201. 				}
  202.                 eachJson["workNum"] = workNum;
  203.  
  204.                 var staff_Element = $(this).find($("#staffKV_"+channelId));
  205.                 var staffKV = staff_Element.val();
  206.                 if(staffKV == ""){
  207.                     $.modal.msgError("未选择执行人");
  208.                     staff_Element.focus();
  209.                     eachBoolean = false;
  210.                     return false;
  211.                 }
  212.                 eachJson["staffKV"] = staffKV;
  213.  
  214.                 var planEndDate_Element = $(this).find($("#planEndDate_"+channelId));
  215.                 var planEndDate = planEndDate_Element.val();
  216.                 if(planEndDate == "" ){
  217.                     $.modal.msgError("未选择日期");
  218.                     planEndDate_Element.focus();
  219.                     eachBoolean = false;
  220.                     return false;
  221.                 }
  222.                 eachJson["planEndDate"] = planEndDate;
  223.  
  224.                 eachJson["taskInfo"] = $(this).find($("#taskInfo_"+channelId)).val();
  225.                 jsonArr[i] = eachJson;
  226.                 i = i+1;
  227.             });
  228.  
  229. 			if(eachBoolean === false){
  230. 			    return false;
  231. 			}
  232.             var jsonStr = JSON.stringify(jsonArr);
  233.             if(jsonStr == "[]"){
  234.                 $.modal.msgError("请选择渠道并录入数据");
  235.                 return false;
  236. 			}else{
  237.                 $("#channelsJson").val(jsonStr);
  238. 			}
  239.  
  240.         }
  241.  
  242.         //清空提示
  243.         function cleanTips() {
  244.             $(".dictCategoryKVTip").html("");
  245.             $(".dictChannelKVTip").html("");
  246.             // $(".talentKVTip").html("");
  247.             $(".staffKVTip").html("");
  248.         }
  249.         //
  250.         function selectTaskTypeSpan(taskTypeElement,taskTypeValue) {
  251.             $(".taskTypeSpan").removeClass("badge-default badge-success"); //移除样式
  252.             $(".taskTypeSpan").addClass("badge-default"); //初始化背景样式
  253.  
  254.             var taskType = $("#taskType").val();
  255.             if(taskTypeValue == taskType){
  256.                 //取消
  257.                 $("#taskType").val(0);
  258.             }else{
  259.                 //选中
  260.                 $("#taskType").val(taskTypeValue);
  261.                 $(taskTypeElement).addClass("badge-success");
  262.             }
  263.         }
  264.         function selectArticleTypeSpan(articleTypeElement,channelId,articleTypeValue) {
  265.             $(".articleTypeSpanClass_"+channelId).removeClass("badge-default badge-success"); //移除样式
  266.             $(".articleTypeSpanClass_"+channelId).addClass("badge-default"); //初始化背景样式
  267.  
  268.             var articleType = $("#articleType_"+channelId).val();
  269.             if(articleTypeValue == articleType){
  270.                 //取消
  271.                 $("#articleType_"+channelId).val(0);
  272.             }else{
  273.                 //选中
  274.                 $("#articleType_"+channelId).val(articleTypeValue);
  275.                 $(articleTypeElement).addClass("badge-success");
  276.             }
  277.         }
  278.  
  279.         function selectChannelSpan(element,value,label){
  280. 			if($(element).hasClass("badge-success")){
  281.                 removeChannel(value);//移除渠道
  282. 			}else{
  283. 			    //-------------拷贝渠道信息录入节点，并替换各种属性值-------------
  284.                 var base_div_html = $("#div_replace_id").prop("outerHTML");//拷贝指定元素及其下属元素
  285.                 // console.error(base_div_html); //打印追加的节点原始代码
  286.                 base_div_html = base_div_html.replace('class="div_replace_base"','class="div_replace"' );//替换类名
  287.                 base_div_html = base_div_html.replace('hidden=""',"" );//取消隐藏 替换第一次出现的某个字符串
  288.  
  289.                 base_div_html = base_div_html.replace('渠道名',label );//替换渠道名
  290.                 base_div_html = base_div_html.replace('渠道名',label );//二次替换渠道名
  291.  
  292.                 base_div_html = base_div_html.replace('id="channelName"','id="channelName_'+ value+'"');//替换
  293.                 base_div_html = base_div_html.replace('id="workNum"','id="workNum_'+ value+'"');//替换
  294.                 base_div_html = base_div_html.replace('id="taskInfo"','id="taskInfo_'+ value+'"');//替换
  295.                 base_div_html = base_div_html.replace('id="staffKV"','id="staffKV_'+value+'"');
  296.  
  297.                 base_div_html = base_div_html.replace('articleTypeSpanClass ',"articleTypeSpanClass_"+ value);//替换
  298.                 base_div_html = base_div_html.replace('articleTypeSpanClass ',"articleTypeSpanClass_"+ value);//替换
  299.                 base_div_html = base_div_html.replace('id="articleType"','id="articleType_'+value+'"');
  300.  
  301.                 var re = new RegExp("selectArticleTypeSpan_rep,","g"); //定义正则表达式  第一个参数是要替换掉的内容，第二个参数"g"表示替换全部（global）。
  302.                 base_div_html = base_div_html.replace(re,'selectArticleTypeSpan(this,'+value+',');//第一个参数是正则表达式  全局替换所有指定字符串
  303.  
  304.  
  305.                 base_div_html = base_div_html.replace('id="planEndDate"','id="planEndDate_'+value+'"');//日期id
  306.                 base_div_html = base_div_html.replace('lay-key="1"','lay-key="'+value+'"');//日期id
  307.  
  308.                 var bs = '<div class="dropdown bootstrap-select bs3">';
  309.                 base_div_html = base_div_html.replace(bs,"" );//去掉下拉框上级div   注意这里闭合的</div>需要在下面r字符串末尾一起去掉
  310.  
  311.                 var nul_option = '<option class="bs-title-option" value=""></option>';
  312.                 base_div_html = base_div_html.replace(nul_option,"" );//去掉多余空选项
  313.  
  314.                 var r = '<button type="button" class="btn dropdown-toggle btn-default bs-placeholder" data-toggle="dropdown" role="combobox" aria-owns="bs-select-2" aria-haspopup="listbox" aria-expanded="false" data-id="staffKV" title="选择执行人"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">选择执行人</div></div> </div><span class="bs-caret"><span class="caret"></span></span></button><div class="dropdown-menu open"><div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off" role="combobox" aria-label="Search" aria-controls="bs-select-2" aria-autocomplete="list"></div><div class="inner open" role="listbox" id="bs-select-2" tabindex="-1"><ul class="dropdown-menu inner " role="presentation"></ul></div></div></div>';
  315.                 base_div_html = base_div_html.replace(r,"");//去掉多余下拉框(下面会重新渲染一个下拉框)
  316.  
  317.                 var re = new RegExp("div_replace_id","g"); //定义正则表达式  第一个参数是要替换掉的内容，第二个参数"g"表示替换全部（global）。
  318.                 base_div_html = base_div_html.replace(re, value); //第一个参数是正则表达式  全局替换所有指定字符串
  319.  
  320. 				// console.error(base_div_html); //打印追加的节点
  321.  
  322. 				// 各控件新增class 用于获取控件内容值
  323.  
  324.                 //向渠道大节点push_channels 追加新的渠道录入节点
  325. 				$("#push_channels").append(base_div_html);
  326.  
  327. 				//-------------重新渲染下拉框-------------
  328.                 //使用refresh方法更新UI以匹配新状态。
  329.                 $('#'+'staffKV_'+value).selectpicker('refresh');
  330. 				//render方法强制重新渲染引导程序 - 选择ui。
  331.                 $('#'+'staffKV_'+value).selectpicker('render');
  332.  
  333.                 //-------------重新渲染时间控件-------------
  334.                 layui.use(['laydate'], function(){
  335.                     var laydate = layui.laydate;
  336.                     //执行一个laydate实例
  337.                     laydate.render({
  338.                         elem: '#planEndDate_'+value,
  339.                         done:function(value,date){//value, date, endDate点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
  340.                             if(value.length == 10){
  341.                                 // reloadData(value);//默认加载当日数据
  342.                             }
  343.                         }
  344.                     });
  345.                 });
  346.  
  347.                 //选中渠道
  348.                 $(element).addClass("badge-success");
  349. 			}
  350. 		}
  351.  
  352.         //失去焦点监听事件
  353.         $("#workTaskTitle").on('blur', function(){
  354.             checkWorkTaskTitle();
  355.         });
  356.  
  357.         //达人名存在提示
  358.         function showWorkTaskTip(){
  359.             $("#workTaskTitle-error").css("display","block");
  360.             $("#workTaskTitle-error").html("<i class=\"fa fa-times-circle\"></i> 标题重复");
  361.         }
  362.  
  363.         function removeChannel(channel) {
  364.             $.modal.confirm("删除渠道内容？", function() {
  365.                 //移除渠道内容元素
  366.                 $("#"+channel).remove();
  367.                 //移除选中样式
  368.                 $("#channelsSpan_"+channel).removeClass("badge-success"); //移除样式
  369.                 $("#channelsSpan_"+channel).addClass("badge-default"); //初始化背景样式
  370. 			});
  371.         }
  372.  
  373.         //检查达人名是否存在
  374.         function checkWorkTaskTitle() {
  375.             var url = prefix + "/checkWorkTaskTitle";
  376.             var workTaskTitle = $("#workTaskTitle").val();
  377.             if (workTaskTitle != '') {
  378.                 $.ajax({
  379.                     url: url,
  380.                     data: {"workTaskTitle": workTaskTitle},
  381.                     async: false,
  382.                     type: "post",
  383.                     success: function (result) {
  384.                         if(result.code == 500){
  385.                             showWorkTaskTip();
  386.                         }
  387.                     }
  388.                 });
  389.             }
  390.         }
  391.  
  392.         $(function() {
  393.             $.fn.extend({
  394.                 onoffswitch: function() {
  395.                     if (this.length > 0 && !this.is('div')) {
  396.                         alert('请正确初始化onoffswitch控件');
  397.                         return;
  398.                     }
  399.  
  400.                     this.each(function(i, ele) {
  401.                         var $ele = $(ele);
  402.  
  403.                         if ($ele.data('onoffswitch')) { // 已经初始化过了
  404.                             return true;
  405.                         }
  406.                         $ele.find(':checkbox').click(function() {
  407.                             setValue(this);
  408.                         }).each(function() {
  409.                             setValue(this);
  410.                         });
  411.  
  412.                         setValue(this);
  413.                     });
  414.  
  415.  
  416.                     function setValue(input) {
  417.                         var $input = $(input),
  418.                             ry_value = $input.attr('ry-alue'); // value 为1,0 第一个为不选中，第二个为选中
  419.  
  420.                         if (!ry_value) {
  421.                             return;
  422.                         }
  423.                         if ($input.is(':checked')) {
  424.                             $input.val(ry_value.split(',')[1]);
  425.                         } else {
  426.                             $input.val(ry_value.split(',')[0]);
  427.                         }
  428.                     }
  429.                 }
  430.             });
  431.  
  432.             $('div.onoffswitch').onoffswitch();
  433.         });
  434. 	</script>
  435. </body>
  436. </html>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/197892?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号