JS：向對象如{aa:123}動態添加成員(Vue Element 表格批量刪除功能)

JS對象可以按如下方式添加

let params={};

params["bb"]=2;

params["cc"]=3;

 

應用

前端和後臺都使用{aa=1,bb=2}接受參數的情況下，批量刪除可以應用到此方法。

Element 表格批量刪除功能中，需要動態獲取勾選行的主鍵ID值，前端表格定義html代碼如下：

      <el-table
        :data="users"
        border
        class="table"
        ref="multipleTable"
        @selection-change="handleSelectionChange"//選擇事件
        v-loading="isShowloading"
      >

其中“handleSelectionChange”選擇事件中用數組接收選中行數據，定義方法如下：

    delData: [],

    handleSelectionChange(delData) {
      this.delData = delData;//用數組接受選中行數據
    },

“批量刪除”按鈕事件內容如下：

    // ------批量刪除-------//
    delAll() {
      this.$confirm("確認刪除勾選的記錄嗎?", "提示", {
        type: "warning"
      }).then(() => {
        this.isShowloading = true;
        console.log(this.delData);
        let params = {};
        this.delData.forEach(row=>{
          console.log(row.fid);
          params[row.fid]=row.fid;
        })        
        console.log(params);
        });
      });
    },

定義接受參數params，遍歷選中行數組，用鍵值對方式賦值給params。

控制檯打印的params格式爲：{8=8,9=9}

鍵是8，值也是8，傳到mvc後臺，可以用@RequestParam HashMap<String, String> map取出來。java代碼如下：

	//批量刪除記錄
	@RequestMapping(value = "/deleteList", method = RequestMethod.POST)
	@ResponseBody
	public ResultMsg deleteList(HttpServletResponse response, @RequestParam HashMap<String, String> map) {
		String estr = "刪除賬號隊列(deleteList)===：";
		try {		
		response.setHeader("Access-Control-Allow-Origin", "*");
		logger.debug(estr+"map:" + map.toString());
		ResultMsg rMsg = new ResultMsg();
		Integer rc = 0;
        //此處用遍歷方式調用單條刪除功能
		for (Iterator<Entry<String, String>> items = map.entrySet().iterator(); items.hasNext();) {
			Entry<String, String> item = items.next();
			Integer n = userDao.deleteById(item.getValue());//數據庫刪除
			if (n > 0)
				rc++;
		}
		if (rc > 0) {
			rMsg.setSuccess();
		}
		logger.debug(rMsg.toString());
		return rMsg;
		} catch (Exception e) {
			logger.error(estr + e.toString());
			return null;
		}		
	}