定时器及其jsp页面赋值

1.定时器  areaid为页面中的值，当跳出这个页面则关闭定时器

    var intervalId = window.setInterval(function (args) {
            var areaid = $("#tabs").val();
            if (areaid != "" && areaid != null) {
                getCarPosition();
            }
        }, 5000);
     
     //清除定时器
     clearTimeout(intervalId );

2.选择框触碰事件

        //选择框
         <select name="area" id="tabs" >
                <%--<option value="0">所有库区</option>--%>
                <option value="2">库区一</option>
                <option value="9">库区二</option>
                <option value="11">库区三</option>
         </select>


        $("#tabs").on("change", function (e) {
         $.ajax({
            url: context_path + "/visual/getVisual?areaType=" + $("#tabs").val(),
            type: "post",
            dataType: "JSON",
            success: function (data) {
                //轮翻赋值 当input的值与data[i].positionName的值相等，就会自动赋值
                for (var i = 0; i < data.length; i++) {
                    $("#" + data[i].positionName).html(data[i].posOccupy + '<img src=" 
             <%=path%>/static/techbloom/system/scene/img/drawer.png"/>');
                }
                //调用定时器
                getCarPosition();
                if (data != null) {
                    //刷新收货单列表
                    $("#grid-table").jqGrid("setGridParam", {
                        postData: {queryJsonString: ""} //发送数据
                    }).trigger("reloadGrid");
                    // layer.msg(data.msg, {icon: 1, time: 1200})
                } else {
                    window.clearInterval(interval);
                    layer.msg("获取失败", {icon: 2, time: 1200})
                }
            }
        });
    });

3.页面初始化

//编辑页面初始化时，下拉框赋值
    if ($("#baseInfor #id").val() != "" && $("#baseInfor #id").val() != undefined && $("#baseInfor #id").val() != null) {
        setNextBtn();
        if ($("#baseInfor #state").val() > 0) {
            $("#btchdel").attr("disabled", "disabled");
        }
        //入库类型下拉框值
        var inventoryTypeVal = $("#baseInfor #inventoryType").val();
        if (inventoryTypeVal == "0") {//库位盘点
            $("#baseInfor #positionEndDiv").attr("style", "display: none");
            $("#baseInfor #positionStartDiv").attr("style", "display: none");
        } else {//动碰盘点类型
            $("#baseInfor #positionCodeDiv").attr("style", "display: none");
        }
    } else {//添加页面初始化时，下拉框赋值
        $("#baseInfor #positionEndDiv").attr("style", "display: none"); 
        $("#baseInfor #positionStartDiv").attr("style", "display: none");
      $("#baseInfor #positionCodeDiv").attr("style", "display: none");//隐藏库位选项，如下
    }

//display: inline 显示     display: none 隐藏 
<div class="control-group span6" style="display: inline">
     <label class="control-label" for="inventoryType">盘点类型：</label>
        <div class="controls">
           <div class="input-append span12 required" style="float: none !important;">
                <select id="inventoryType" name="inventoryType" style="width:69%;">
                     <option value="">--请选择--</option>
                        <option value="0"
           <c:if test="${'0' eq inventoryTask.inventoryType}">selected</c:if> >库位盘点
                        </option>
                        <option value="1"
           <c:if test="${'1' eq inventoryTask.inventoryType}">selected</c:if> >动碰盘点
                        </option>
                 </select>
            </div>
         </div>
 </div>

<div class="control-group span6" style="display: inline">
    <div id="positionCodeDiv">
      <label class="control-label" for="positionCode">库位编码：</label>
         <div class="controls">
            <div class="span12 required">
              <input type="text" id="positionCode" name="positionCode">
            </div>
            </div>
      </div>
</div>

4.多选框事件

 <div class="control-group span6" style="display: inline">
     <div id="positionCodeDiv">
          <label class="control-label" for="positionCode">库位编码：</label>
               <div class="controls">
                   <div class="span12 required">
                      <input type="text" id="positionCode" name="positionCode">
                   </div>
               </div>
      </div>
 </div>

$("#positionCode").select2({
        placeholder: "--请选择库位--",
        minimumInputLength: 0, //至少输入n个字符，才去加载数据
        allowClear: true, //是否允许用户清除文本信息
        delay: 250,
        formatNoMatches: "没有结果",
        formatSearching: "搜索中...",
        formatAjaxError: "加载出错啦！",
        multiple: true,   //true为多选  false为单选
        ajax: {
            url: context_path + "/inventoryTask/getSelectPositionCode",
            type: "POST",
            dataType: "json",
            delay: 250,
            data: function (term, pageNo) { //在查询时向服务器端传输的数据
                term = $.trim(term);
                return {
                    baseStationName: term, //联动查询的字符
                    positionCode: $("#positionCode").val()
                }
            },
            results: function (data, pageNo) {
                var res = data.result;
                if (res.length > 0) { //如果没有查询到数据，将会返回空串
                   var more = (pageNo * 15) < data.total; //用来判断是否还有更多数据可以加载
                    return {
                        results: res,
                        more: more
                    };
                } else {
                    return {
                        results: {}
                    };
                }
            },
            cache: true
        }
    });

   //修改时加载库位信息
    if ('${inventoryTask.id}') {
        // 用户赋值
        $.ajax({
            url: context_path + "/inventoryTask/getPositionInfo",
            type: "post",
            dataType: "JSON",
            data: {
                positionCodes: '${inventoryTask.positionCode}'
            },
            async: false,
            success: function (data) {
                if (data) {
                    var obj = [];
                    for (let i = 0; i < data.length; i++) {
                        obj.push({
                            id: data[i].userId,
                            text: data[i].name
                        });
                    }
                    $("#positionCode").select2("data", obj);
                }
            }
        });
    }



     //后台controller层
     /**
     * 获取库位下拉数据
     *
     * @param positionCode
     * @return Map
     * @author pz
     * @date 2019-03-15
     */
    @RequestMapping(value = "/getSelectPositionCode")
    @ResponseBody
    public Map<String, Object> getSelectPositionCode(String positionCode) {
        Map<String, Object> map = new HashMap<>();

        List<Stock> lstStock=stockDAO.uniqeList(null);
        JSONArray arr = new JSONArray();
        JSONObject obj = null;
        for (Stock s : lstStock) {
            obj = new JSONObject();
            // 库位编码
            obj.put("id", s.getPositionCode());
            // 库位名称
            obj.put("text", s.getPositionCode());
            arr.add(obj);
        }

        // 根据条件获取已添加的库位信息
        if (StringUtils.isNotBlank(positionCode)) {
            Map<String, Object> sceneMap = new HashMap<>();
            sceneMap.put("position_code", positionCode);
            List<Stock> stockList = stockService.selectByMap(sceneMap);
            if (stockList != null && stockList.size() > 0) {
                for (Stock s : stockList) {
                    obj = new JSONObject();
                    obj.put("id", s.getPositionCode());
                    obj.put("text", s.getPositionCode());
                    arr.add(obj);
                }
            }
        }
        map.put("result", arr);
        return map;
    }

    /**
     * 获取库位信息（修改时，库位下拉框赋值使用）
     *
     * @return
     * @author pz
     * @date 2019-03-15
     */
    @RequestMapping(value = "/getPositionInfo")
    @ResponseBody
    public JSONArray getPlatformInfo(String positionCodes) {
        JSONArray arr = new JSONArray();
        JSONObject obj = null;
        Map<String, Object> map = new HashMap<>();
        //lambl表达式
        List<String> lstPositionCodes = Arrays.stream(positionCodes.split(",")).collect(Collectors.toList());

        List<Stock> lstStock=stockDAO.uniqeList(lstPositionCodes);
        if (lstStock != null && lstStock.size() > 0) {
            for (Stock s : lstStock) {
                obj = new JSONObject();
                obj.put("userId", s.getPositionCode());
                obj.put("name", s.getPositionCode());
                arr.add(obj);
            }
        }
        return arr;
    }

5.单选框的实现(搜索框)  

 //jsp页面
<div class="control-group span6" style="display: inline">
      <label class="control-label" for="positionCode">库位：</label>
           <div class="controls">
               <div class="span12 required" style=" float: none !important;">
   <input class="span10 select2_input" type="text" id="positionCode" name="positionCode"
                           value="${inventory.positionCode}">
                </div>
           </div>
 </div>
//库位下拉框列表
    $("#positionCode").select2({
        placeholder: "--请选择库位--",//文本框的提示信息
        minimumInputLength: 0, //至少输入n个字符，才去加载数据
        allowClear: true, //是否允许用户清除文本信息
        multiple: false,//false为单选框，true为复选框
        formatNoMatches: "没有结果",
        closeOnSelect: false,
        ajax: {
            url: context_path + "/inventory/getSelectPosition",
            dataType: "json",
            delay: 250,
            data: function (term, pageNo) { //在查询时向服务器端传输的数据
                term = $.trim(term);
                selectParam = term;
                return {
                    inventoryTaskId: $("#baseInfor #inventoryTaskId").val(),
                    queryString: term, //联动查询的字符
                    pageSize: 15, //一次性加载的数据条数
                    pageNo: pageNo, //页码
                    time: new Date()
                    //测试
                }
            },
            results: function (data, pageNo) {
                var res = data.result;
                if (res.length > 0) { //如果没有查询到数据，将会返回空串
                    var more = (pageNo * 15) < data.total; //用来判断是否还有更多数据可以加载
                    return {
                        results: res,
                        more: more
                    };
                } else {
                    return {
                        results: {
                            "id": "0",
                            "text": "没有更多结果"
                        }
                    };
                }

            },
            cache: true
        }
    });
    //库位下拉框change事件
    $("#baseInfor #positionCode").on("change", function (e) {
        $("#baseInfor #positionCode").val(e.added.text);
    })


     //后台controller层
     /**
     * @Description: 获取库位下拉列表数据源
     * @Param:
     * @return:
     * @Author: pz
     * @Date: 2019/1/27
     */
    @RequestMapping(value = "/getSelectPositionCode")
    @ResponseBody
    public Map<String, Object> getSelectPositionCode(Long inventoryTaskId, String 
                               queryString, int pageNo, int pageSize) {
        Map<String, Object> map = new HashMap<>();
        List<Map<String, Object>> PositionList = inventoryService.getSelectPositionList(inventoryTaskId, queryString, pageSize, pageNo);
        map.put("result", PositionList);
        map.put("total", inventoryService.getSelectPositionTotal(inventoryTaskId, queryString));
        return map;

    }

    //service层
    List<Map<String, Object>> getSelectPositionList(Long inventoryTaskId, String 
        queryString, int pageSize, int pageNo);
    

    Integer getSelectPositionTotal(Long inventoryTaskId, String queryString);

     
     //serviceImp实现层
    @Override
    public List<Map<String, Object>> getSelectPositionList(Long inventoryTaskId, String queryString, int pageSize, int pageNo) {
        Page page = new Page(pageNo, pageSize);
        return inventoryDAO.getSelectPositionList(page, inventoryTaskId, queryString);
    }

   
    @Override
    public Integer getSelectPositionTotal(Long inventoryTaskId, String queryString) {
        return inventoryDAO.getSelectPositionTotal(inventoryTaskId, queryString);
    }

     //Dao层
    List<Map<String, Object>> getSelectMaterielList(Page page, @Param("inventoryTaskId") 
       Long inventoryTaskId, @Param("positionCode") String positionCode, 
       @Param("queryString") String queryString);

   
    Integer getSelectMaterielTotal(@Param("inventoryTaskId") Long inventoryTaskId, 
       @Param("positionCode") String positionCode, @Param("queryString") String 
       queryString);


    //xml层
    <select id="getSelectMaterielList" resultType="java.util.Map">
        select DISTINCT material_code as id,material_name as text
        from inventory_task_detail
        where position_code=#{positionCode}
        and inventory_task_id=#{inventoryTaskId}
        <if test='queryString!=null and queryString!=""'>
            and material_name like concat(concat('%', #{queryString}), '%')
        </if>
        and state="0" or state="2"
    </select>

    <select id="getSelectMaterielTotal" resultType="java.lang.Integer">
        select count(DISTINCT material_code)
        from  inventory_task_detail
        where position_code=#{positionCode}
        and inventory_task_id=#{inventoryTaskId}
        <if test='queryString!=null and queryString!=""'>
            and material_code like concat(concat('%', #{queryString}), '%')
        </if>
        and state="0" or state="2"
    </select>

6.单选框的实现 (普通)

jsp页面(跳转页面时，获取信息) 
<div class="control-group span6" style="display: inline">
    <label class="control-label" for="inventoryUserId">盘点人员：</label>
       <div class="controls">
           <div class="input-append span12 required" style=" float: none !important;">
              <select id="inventoryUserId" name="inventoryUserId" style="width:69%;">
                 <option value="">--请选择--</option>
                     <c:forEach items="${userList}" var="user">
                         <option value="${user.userId}"
                      <c:if test="${user.userId eq  inventoryTask.inventoryUserId}">  
                           selected</c:if> >${user.username}</option>
                     </c:forEach>
              </select>
           </div>
       </div>
 </div>


//后台controller层
  
@RequestMapping(value = "/toEdit")
@ResponseBody
public ModelAndView toEdit(Long id) {
    ModelAndView mv = this.getModelAndView();
    //获取用户集合
    List<User> userList = userService.selectList(
            new EntityWrapper<>()
    );
    mv.addObject("userList", userList);
    mv.setViewName("techbloom/stock/inventory/inventoryTask_edit");
    return mv;
}

7.后台传过来JSONArray，页面解析并赋值

//data为后台返回数据  第一个xxx为页面中的值，后面两个xxx则是依据后台传来JSONArray中与第一个同对象的值
for (var i = 0; i<data.length; i++ ) {
       $("#" + data[i].XXX).html(data[i].XXX + '<img src=" XXX.png"/>');
}

8.用于循环判断（可用于批量删除，判断批量是否都符合删除条件） 

 var ids = jQuery("#grid-table").jqGrid("getGridParam", "selarrrow"); //ids为选中的id
      for (var i=0; i < ids.length; i++) {
          var rowData = $("#grid-table").getRowData(ids[i]);//rowData为行数据
  if(rowData.state=='<span style="color:#DD0000;font-weight:bold;">已提交</span>'){
         layer.msg("已提交，不可删除", {time: 1200, icon: 2});
         return false;
      }

补充列表中的事件

{name: 'operate',index: 'operate',width: 80,sortable: false,fixed: true,
    formatter: function (cellvalue, option, rowObject) {
        if (rowObject.materialType == 0) {
        return "<span class='btn btn-minier ' style='background: #C0C0C0;color:white; ' " +
                ">详情</span>";
        } else {
            return "<span class='btn btn-minier btn-success'  style='transition:background-color 0.3;-webkit-transition: background-color 0.3s;' " +
                "onclick='stockQueryDetail(\"" + rowObject.id + "\")'>详情</span>";
        }
    }
}
//rowObject为行数据

9.依据条件模糊搜素 

<li class="field-group field-fluid3">
     <label class="inline" for="materialCode" style="margin-right:20px;width:100%;">
          <span class="form_label" style="width:80px;">物料编号：</span>
               <select id="materialCode" name="materialCode" style="width:70%;">
                  <option value="">--请选择--</option>
                       <c:forEach items="${lstMateriel}" var="materiel">
                          <option value="${materiel.materielCode}"
                            <c:if test="${materiel.materielCode eq materiel.materielName}">selected</c:if> >${materiel.materielCode}</option>
                        </c:forEach>
               </select>
     </label>
</li>

                    
<script type="text/javascript">

    $("#queryForm #materialCode").select2({
        minimumInputLength: 0,
        placeholderOption: "first",
        allowClear: true,
        delay: 250,
        formatNoMatches: "没有结果",
        formatSearching: "搜索中...",
        formatAjaxError: "加载出错啦！"
    });
    $("#queryForm #materialCode").on("change.select2", function () {
            $("#queryForm #materialCode").trigger("keyup")
        }
    );
</script>