zoukankan      html  css  js  c++  java
  • 前面layui + js一些技巧

    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='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='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();
    }
     
    

      

  • 相关阅读:
    IDEA工具java开发之 开发中必会的技能
    IDEA工具java开发之项目初始化配置 细节和目录结构
    有关java编辑改变编码器时出现HelloWorld.java:3: 错误: 编码GBK的不可映射字符 * 瀹冨皢鎵撳嵃瀛楃�涓? Hello World
    java开发环境的搭建 第一步安装JDK 第二步配置环境变量 检查java中的jdk是否安装成功
    解决vue中使用echarts的formatter提示警告的问题
    数组去重及element UI 远程模糊查询
    有关echar图设置宽度100%不起作用的问题
    echarts 中的bar3D柱子图在geo3D地图中显示不出来
    【SQL】约束
    【SQL】视图
  • 原文地址:https://www.cnblogs.com/ziyanxiaozhu/p/8681070.html
Copyright © 2011-2022 走看看