前面layui + js一些技巧

Posted 2020-10-29 ziyanxiaozhu

layui switch开关在js中传值

  //监听指定开关
	  var sele = -1;  //先给这个变量一个初始值
	  form.on(‘switch‘, function(data){
	   /*layer.msg(‘checked：‘+ (this.checked ? ‘1‘:‘0‘), {
	      offset: ‘6px‘
	    });*/
	    layer.tips(‘选择的是‘+(this.checked?‘多选‘:‘单选‘), data.othis)//小提示
	   sele = this.checked?‘1‘:‘0‘; //将选择的是单选还是多选的值赋给一个变量,
	  });

这个变量在下面就可以用了

　　

当时layui提交页面的js写法

$(function(){
	 var form = layui.form
	  ,layer = layui.layer
	  ,laydate = layui.laydate;
	  form.render();//刷新所有的元素;
	  
	  //日期
	  laydate.render({
	    elem: ‘#date‘
	  });
	 
	  //自定义验证规则
	  form.verify({
	    title: function(value){
	      if(value.length < 4){
	        return ‘标题至少得4个字符啊‘;
	      }
	    }
	    ,content: function(value){
	      layedit.sync(editIndex);
	    }
	  });
	  
	  //监听指定开关
	  var sele = -1;  //先给这个变量一个初始值
	  form.on(‘switch‘, function(data){
	   /*layer.msg(‘checked：‘+ (this.checked ? ‘1‘:‘0‘), {
	      offset: ‘6px‘
	    });*/
	    layer.tips(‘选择的是‘+(this.checked?‘多选‘:‘单选‘), data.othis)//小提示
	   sele = this.checked?‘1‘:‘0‘; //将选择的是单选还是多选的值赋给一个变量,
	  });
	  
	  /*新添加一个input的方法 start */
	  var count = 1;  //为区分id而存在
	  $(‘#addinput‘).on(‘click‘, function(){
		var dd = new Date();
	  	var content= "<div class=‘layui-input-inline‘ id=‘options"+count+"‘ style=‘width:300px;margin-top:5px;‘>"+
	     " <input type=‘text‘ name=‘options‘ lay-verify=‘required‘ autocomplete=‘off‘ "+
	      "placeholder=‘请输入您需要投票的选项‘ class=‘layui-input joinInp‘ ></div>"+
	    "<div class=‘layui-input-inline‘ id=‘deldiv"+count+"‘ style=‘width:30px;‘ onclick=‘deleThis(\"options"+count+"\", this.id)‘>"+
	    "<a class=‘layui-btn layui-btn-sm‘ id=‘delbut"+count+"‘><i class=‘layui-icon‘></i></a></div>";
	  	count++;
	  	$(‘#inp‘).append(content);
	  	layui.form.render();
	//onclick=‘deleThis(‘options"+count+"‘,‘deldiv"+count+"‘
	  });
	  /*新添加一个input的方法 end */
	  
	  
	  //监听提交,执行的方法
	  form.on(‘submit(demo1)‘, function(data){
		  
	    /*layer.alert(JSON.stringify(data.field), {
	      title: ‘最终的提交信息‘
	    })//参数全部接收到了
*/	   
		  //转换字符串为日期类型
			var str =data.field.enddate;
			str = str.replace(/-/g,"/");
			var date = new Date(str);
			//console.log(data.field.organiser);
			/*console.log(user);*/
			
		//发起投票内容发送到后台的ajax
		//	debugger;
			var a = $(".joinInp");//获取选项输入框
			var joinInpu = "";
			for(var i = 0;i< a.length;i++) {
				joinInpu += a.eq(i).val();//获取选项输入框的内容,拼接起来
				if(i !=a.length-1 ){
					joinInpu +=",";
				}
			}
		 $.ajax({
				type:"post",
				url:"/IPMS/Ballotitle/upDate.do",
				data:{
					organiser:data.field.organiser,
					title:data.field.title,
					enddate:date,
					selectiontype:sele,
					// options:data.field.options
					options:joinInpu
				},
				dataType:"json",
				success:function(data) {
					if(data.success) {
						layer.alert(‘数据提交成功!‘); 
						this.layer.close(); //执行关闭
				} else {
						layer.alert(‘看来是出了点小问题,稍后解决一下吧~‘); 
					}
				},
				error:function() {
					layer.msg(‘数据异常,请联系管理员!‘, {
				        time: 10000, //10s后自动关闭
				        btn: [‘知道啦‘]
					    ,btnAlign: ‘c‘
				      });
				}   
			});
		 parent.layer.close(); //执行关闭
	    return false;
	  });
	  
	  //提交后关闭窗口
	 /* var index = parent.layer.getFrameIndex(window.name); //获取当前窗体索引
	  $(‘#demo1‘).on(‘click‘, function(){
	      parent.layer.close(index); //执行关闭
	  });*/

});


//将fn放到最外面的才可以好好地执行
function deleThis(deleid1,deleid2){
	  $("#"+deleid1).remove();
	  $("#"+deleid2).remove();
}