js开发总结（表单、页面）

js开发总结（表单、页面）

• 页面跳转

  window.location.href=url
  

• 外框页面跳转

  parent.window.location.href=url
  

• 页面刷新

  window.location.reload();
  

• 关闭窗口

  window.close();
  

• 表单

  • 表单信息

    /使用ajax提交表单，需要对表单标签进行处理，不然，会执行默认行为
    <form class="layui-form">
    </form>
    

  • 单选

     <div class="RadioStyle" id="radiobutton">
        <div class="Block PaddingL" >
            <input type="radio" name="Storage" id="model1" value="year" checked="checked" />
            <label for="model1">年</label>
            <input type="radio" name="Storage" id="model2" value="month" />
            <label for="model2">周</label>
            <input type="radio" name="Storage" id="model3" value="day" />
            <label for="model3">日</label>
        </div>
    </div>
    /js
            $('input[type=radio][name="Storage"]').change(function() {
     if (this.value == 'year') {
            } else if (this.value == 'month') {
               
            } else if (this.value == 'day') {          
                    }
        });              
    

  • 多选

        <div class="layui-form-item">
                <label class="layui-form-label">复选框</label>
                <div class="layui-input-block" id="checkbox">
                </div>
            </div>
    //js
      $(document).ready(function () {
            $.ajax(localStorage.host + '/menu/get-menu', {
                method: "GET",
                success: function (data) {
                    console.log(data);
                    for (var i = 0, len = data.length; i < len; i++) {
                        var item = data[i];
                        console.log("<input type='checkbox' name='permission' value='" + item.id + "' title='"+item.menuName+"'\>");
                        $('#checkbox').append("<input type='checkbox' name='permission' value='" + item.id + "' title='"+item.menuName+"'\>");
                    }
                    renderForm();
                },
                fail: function () {
                    console.log("GG");
                }
            });
        });
    /获取
        var rolepermissions = "";
                    $("input[name='permission']:checked").each(function(i){//把所有被选中的复选框的值存入数组
                                    rolepermissions=rolepermissions+$(this).val()+","
                                });
    

  • 文本框

        <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">任务解读</label>
                <div class="layui-input-block">
                    <textarea name="description" id="description" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
    //js
    var description=document.getElementById("description").value;
    

  • 下拉框

      <div class="layui-form-item">
                <label class="layui-form-label">选择部门</label>
                <div class="layui-input-inline">
                    <select name="depart_sort" id="depart_sort" lay-verify="required">
                        <option value="0">部门名称</option>
                    </select>
                </div>
            </div>
    js
     $(document).ready(function () {
            $.ajax(localStorage.host + '/department/findDepartmentAll', {
                method: "GET",
                success: function (res) {
                    console.log(res);
                    var data = res.data;
                    for (var i = 0, len = data.length; i < len; i++) {
                        var item = data[i];
                        console.log("<option value='" + item.id + "'>" + item.dep_name + "</option>");
                        $('#depart_sort').append("<option value='" + item.id + "'>" + item.dep_name + "</option>");
                    }
                    renderForm();
                },
                fail: function () {
                    console.log("GG");
                }
            });
    ///获取值
    var depart_sort=document.getElementById("depart_sort").value;
    

  • 按钮

    • 情形一：正常绑定条件即可

    • 情形二：layui

       <div class="layui-form-item">
                  <div class="layui-input-block">
                      <button class="layui-btn" lay-submit="" lay-filter="btn_submit">立即提交</button>
                      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                  </div>
              </div>
      ///
      renderForm()
      function renderForm() {
              layui.use('form', function () {
                  var form = layui.form,
                      $ = layui.jquery,
                      layer = layui.layer;
                  form.on('submit(btn_submit)', function (data) {
                      var user={     
                      };
                      $.ajax();
                      return false;
                  });
              });
          }