dianwang
/
dianwangAdm


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
							<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

<body>

    <blockquote class="layui-elem-quote layui-text">
        鉴于小伙伴的普遍反馈，先温馨提醒两个常见“问题”：1. <a href="/doc/base/faq.html#form" target="_blank">为什么select/checkbox/radio没显示？</a> 2. <a href="/doc/modules/form.html#render" target="_blank">动态添加的表单元素如何更新？</a>
    </blockquote>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>表单集合演示</legend>
    </fieldset>

    <form class="layui-form" action="../TestAction/formSubmit">
        <div class="layui-form-item">
            <label class="layui-form-label">单行输入框</label>
            <div class="layui-input-block">
                <input type="text" name="userName" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">范围</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

		 <div class="layui-form-item">
		    <label class="layui-form-label">下拉列表</label>
		    <div class="layui-input-inline" id="testSelect">
		    </div>
		  </div>
		  
	  <div class="layui-form-item">
	    <label class="layui-form-label">复选框</label>
	    <div class="layui-input-block" id="testCheckbox">
	    </div>
	  </div>
	   <div class="layui-form-item">
		    <label class="layui-form-label">单选框</label>
		    <div class="layui-input-block" id="testRadio">
		    </div>
		 </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">普通文本域</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        
        <div class="layui-upload">
		  <button type="button" class="layui-btn" id="uploadFileId">上传图片</button>
		  <div class="layui-upload-list">
		    <img class="layui-upload-img" id="imgDemo">
		    <p id="demoText"></p>
		  </div>
		</div>
		
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
   
    </form>

      <script src="../js/min-loader.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
    // 上传文件
    layui.use('upload', function(){
    	  var $ = layui.jquery
    	  ,upload = layui.upload;
    	  
    	  //普通图片上传
    	  var uploadInst = upload.render({
    	    elem: '#uploadFileId'
    	    ,data:{fileFiledId:'imgDemo', MINView:'JSON',fileType:'00', size:5}
    	    ,field:'imgDemo'
    	    ,url: '..//FileManageAction/uploadFile'
    	    ,before: function(obj){
    	      //预读本地文件示例，不支持ie8
    	      obj.preview(function(index, file, result){
    	        $('#imgDemo').attr('src', result); //图片链接（base64）
    	      });
    	    }
    	    ,done: function(res){
    	    	$.Alert("上传文件路径"+ res.fileUrl);
    	      //如果上传失败
    	      if(res.code > 0){
    	        return layer.msg('上传失败');
    	      }
    	      //上传成功
    	    }
    	    ,error: function(){
    	      //演示失败状态，并实现重传
    	      var demoText = $('#demoText');
    	      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
    	      demoText.find('.demo-reload').on('click', function(){
    	        uploadInst.upload();
    	     });
    	    }
   	  });
    });	  
    	  
        layui.use(['form', 'layedit', 'laydate'], function() {
            var form = layui.form,
                layer = layui.layer,
                layedit = layui.layedit,
                laydate = layui.laydate;

            /* //日期
            laydate.render({
                elem: '#date'
            });
            laydate.render({
                elem: '#date1'
            });

            //创建一个编辑器
            var editIndex = layedit.build('LAY_demo_editor');

            //自定义验证规则
            form.verify({
                title: function(value) {
                    if (value.length < 5) {
                        return '标题至少得5个字符啊';
                    }
                },
                pass: [/(.+){6,12}$/, '密码必须6到12位'],
                content: function(value) {
                    layedit.sync(editIndex);
                }
            });

            //监听指定开关
            form.on('switch(switchTest)', function(data) {
                layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                    offset: '6px'
                });
                layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
            });
 */
            //监听提交
            form.on('submit(demo1)', function(data) {
            	var param = data.field;
            	$.request({
        			action : "../TestAction/formSubmit",
        			data : param,
        			success : function(data) {
        				// 跳转指定的页面
        				layer.msg("哈哈" + JSON.stringify(data));
        			}
            	});
            	
                return false;
            });


        });
        
        // 初始化基本下拉列表
        // initSelect('testSelect', "IM_BRANCH_STATE", "baranchStt");
        // 默认选择
        // initSelect('testSelect', "IM_BRANCH_STATE", "baranchStt", '1');
        // 可以搜索
        initSelect('testSelect', "IM_BRANCH_STATE", "baranchStt", '1', true);
        
        // 初始化复选框
        initCheckBox('testCheckbox', "IM_BRANCH_STATE", "checkBoxStt", '1');
        
        // 初始化单选框
        initRadio('testRadio', "IM_BRANCH_STATE", "radioStt", '1');
    </script>

</body>

</html>