筆記: 一個Layout ui 地區選擇例項
阿新 • • 發佈:2018-12-21
html
<div> <link rel="stylesheet" type="text/css" href="__PUBLIC__/js/layui2/css/layui.css" /> <form class="layui-form layui-form-pane" action=""> <div class="layui-form-item" pane=""> <div class="layui-input-block"> <input type="checkbox"id="pro" lay-skin="primary" title="選取省級" checked="checked"> <input type="checkbox"id="city" lay-skin="primary" title="選取市級" checked="checked"> <input type="checkbox"id="county" lay-skin="primary" title="選取縣級" checked="checked"> <input type="checkbox" id="short_name" lay-skin="switch" lay-text="去掉 縣 /區 字尾|新增 縣 /區 字尾" > <input type="checkbox" class="checkboxAll" lay-skin="primary" lay-filter="allChoose" title="全選" checked="checked"> </div> </div> <ul id="province"> <volist name="province_list" id="vo"> <li class="tp"> <input type="checkbox" name="check[]" value="{$vo.value}" title="{$vo.name}" lay-filter="oneChoose" checked > </li> </volist> </ul> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary btn-sm city_append"> 追加地名</button> <button type="button" class="btn btn-primary btn-sm city_select"> 選擇完畢</button> </div>
js
<script type="text/javascript" src="__PUBLIC__/js/layui2/layui.js"></script> <script type="text/javascript"> //全域性定義一次, 載入formSelects layui.config({ base: "__PUBLIC__/js/layui2/lay/modules/" //此處路徑請自行處理, 可以使用絕對路徑 }).extend({ formSelects: 'formSelects-v4' }); //載入模組 layui.use(['jquery', 'formSelects','form'], function(){ var form = layui.form; var $ = layui.jquery; //全選 form.on('checkbox(allChoose)', function (data) { $("input[name='check[]']").each(function () { this.checked = data.elem.checked; }); form.render('checkbox'); }); //單選 form.on('checkbox(oneChoose)', function (data) { var i = 0; var j = 0; $("input[name='check[]']").each(function () { if( this.checked === true ) { i++; } j++; }); if( i == j ) { $(".checkboxAll").prop("checked",true); form.render('checkbox'); }else { $(".checkboxAll").removeAttr("checked"); form.render('checkbox'); } }); //選中 $(".city_select").on("click",function() { var arr = new Array(); $("#province :checkbox[checked]").each(function(i){ arr[i] = $(this).val(); }); var vals = arr.join(","); var has_pro = $("#pro").is(':checked')?1:0; var has_city = $("#city").is(':checked')?1:0; var has_county = $("#county").is(':checked')?1:0; var has_end = $("#short_name").is(':checked')?1:0; $.ajax({ url:"{:U('user/task/getListOfCity')}", type:"post", data:{provinces:vals,has_pro:has_pro,has_city:has_city,has_county:has_county,end:has_end}, success:function(data){ //console.log(data); var a = JSON.parse(data); b = a.length; if (0 >= b) { Wind.use('artDialog',function(){ art.dialog({ id : "alert", icon : "error", content : "請至少選擇一個地區", ok : function() {} }); }); }else { var thisCitys = JSON.parse(data); var d=""; var new_arr = []; for (var f = 0; f < thisCitys.length; f++) { if($.inArray(thisCitys[f],new_arr)==-1) { new_arr.push(thisCitys[f]); } } //去重 for(var i=0;i<new_arr.length; i++){ d = isNull(d) ? new_arr[i] : d + ("\n" + new_arr[i]) } // } $("#area").val(d); $('#myModal').modal("toggle"); $(".modal-backdrop").remove(); lineTotal('#area'); } }, error:function(e){ alert("錯誤!!"); } }); }); //追加 $(".city_append").on("click",function() { var arr = new Array(); $("#province :checkbox[checked]").each(function(i){ arr[i] = $(this).val(); }); var vals = arr.join(","); var has_pro = $("#pro").is(':checked')?1:0; var has_city = $("#city").is(':checked')?1:0; var has_county = $("#county").is(':checked')?1:0; var has_end = $("#short_name").is(':checked')?1:0; $.ajax({ url:"{:U('user/task/getListOfCity')}", type:"post", data:{provinces:vals,has_pro:has_pro,has_city:has_city,has_county:has_county,end:has_end}, success:function(data){ //console.log(data); var a = JSON.parse(data); b = a.length; if (0 >= b) { Wind.use('artDialog',function(){ art.dialog({ id : "alert", icon : "error", content : "請至少選擇一個地區", ok : function() {} }); }); }else { var thisCitys = JSON.parse(data); var d=""; var str = $("#area").val(); var new_arr = str.split('\n'); for (var f = 0; f < thisCitys.length; f++) { if($.inArray(thisCitys[f],new_arr)==-1) { new_arr.push(thisCitys[f]); } } //去重 for(var i=0;i<new_arr.length; i++){ d = isNull(d) ? new_arr[i] : d + ("\n" + new_arr[i]) } // } $("#area").val(d); $('#myModal').modal("toggle"); $(".modal-backdrop").remove(); lineTotal('#area'); } }, error:function(e){ alert("錯誤!!"); } }); }); }); </script>