定時器及其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>