快捷導(dǎo)航

jQuery動(dòng)態(tài)生成不規(guī)則表格(前后端)

更新時(shí)間：2017年02月21日 09:28:08 作者：chengkui

這篇文章主要介紹了jQuery動(dòng)態(tài)生成不規(guī)則表格的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下

一、需求：有這么一張表

前四個(gè)屬性當(dāng)作聯(lián)合主鍵

需要把該表所有的行在前端以表格形式顯示出來，要求activityId相同時(shí)合并成一行，activityCode相同時(shí)，合并一行，activityVersion相同時(shí)也合并一行。類似這種：

二、初解決：先上來把數(shù)據(jù)庫的數(shù)據(jù)查詢出來，以List<Activity> activities保存，再存到j(luò)son對象中傳回頁面。像這樣json.put("activities",activities);

　　到j(luò)s頁面了，然后就開始蒙蔽了。本來jqeury就小白，遇到這種情況就更沒辦法了。

三、問大牛：大牛給我提供了兩種思路：我的理解是遇到這種情況可以先把數(shù)據(jù)在后臺(tái)封裝成你需要的數(shù)據(jù)結(jié)構(gòu)，在傳到前臺(tái)，就會(huì)很好處理。

　　第一種：構(gòu)造Map:Map<String,Map<String,List<Activity>>>

　　第二中：構(gòu)造List:這種需要封裝出新的java對象.形如:List<ActivityCode>.

　　　　　　對象ActivityCode有List<ActivityVersion>這個(gè)屬性，對象ActivityVersion有屬性List<Activity>

　　我用的是第一種：首先轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)：

 public static Map<String, Map<String, List<Activity>>> listToMap(
      List<Activity> activities) {
    Map<String, Map<String, List<Activity>>> map = new HashMap<String, Map<String, List<Activity>>>();
    for (Activity detail : activities) {
      if (!map.containsKey(detail.getActivityCode())) {
        Map<String, List<Activity>> mapValue = new HashMap<String, List<Activity>>();
        List<Activity> listValue = new ArrayList<Activity>();
        listValue.add(detail);
        mapValue.put(detail.getActivityVersion(), listValue);
        map.put(detail.getActivityCode(), mapValue);
      } else {
        Map<String, List<Activity>> mapValue = map.get(detail
            .getActivityCode());
        if (!mapValue.containsKey(detail.getActivityVersion())) {
          List<Activity> listValue = new ArrayList<Activity>();
          listValue.add(detail);
          mapValue.put(detail.getActivityVersion(), listValue);
        } else {
          List<Activity> mapValueList = mapValue.get(detail
              .getActivityVersion());
          mapValueList.add(detail);
          mapValue.put(detail.getActivityVersion(), mapValueList);
        }
      }
    }
    return map;
  }

　　然后就jQuery遍歷map就好了

以上所述是小編給大家介紹的jQuery動(dòng)態(tài)生成不規(guī)則表格(前后端)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)帶延時(shí)功能的水平多級菜單效果【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶延時(shí)功能的水平多級菜單效果,可實(shí)現(xiàn)響應(yīng)鼠標(biāo)事件延時(shí)展示菜單的功能,涉及jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下
2016-09-09
jQuery操作動(dòng)畫完整實(shí)例分析
這篇文章主要介紹了jQuery操作動(dòng)畫,結(jié)合完整實(shí)例形式分析了jquery針對頁面元素動(dòng)畫效果相關(guān)實(shí)現(xiàn)技巧,涉及jquery slideUp與slideDown方法的使用,需要的朋友可以參考下
2020-01-01
jquery結(jié)婚電子請柬特效源碼分享
這篇文章主要展示了jquery結(jié)婚電子請柬特效源碼，有需要的小伙伴們快來學(xué)習(xí)制作jquery結(jié)婚電子請柬
2015-08-08
Jquery Ajax學(xué)習(xí)實(shí)例向頁面發(fā)出請求，返回XML格式數(shù)據(jù)
Jquery Ajax學(xué)習(xí)實(shí)例向頁面發(fā)出請求，返回XML格式數(shù)據(jù)的代碼
2010-03-03
jquery滾動(dòng)條插件jScrollPane的使用介紹
jScrollPane想必大家都不陌生吧它就是所謂的jquery滾動(dòng)條插件，下面為大家介紹下其具體的使用，感興趣的朋友不要錯(cuò)過
2013-11-11
基于jQuery全屏焦點(diǎn)圖左右切換插件responsiveslides
這篇文章主要介紹了基于jQuery全屏焦點(diǎn)圖左右切換插件responsiveslides的相關(guān)資料,需要的朋友可以參考下
2015-09-09
jqPlot 基于jquery的畫圖插件
jqPlot是一款基于jquery類庫的圖標(biāo)繪制插件。通過jqPlot可以再網(wǎng)頁中繪制線狀、柱狀、餅狀等多種樣式圖表。而且，jqPlot具有插件可擴(kuò)展性(Pluggability)，你可以編寫自己的圖表樣式。
2011-04-04
jQuery焦點(diǎn)圖輪播插件KinSlideshow用法分析
這篇文章主要介紹了jQuery焦點(diǎn)圖輪播插件KinSlideshow用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery焦點(diǎn)圖輪播插件KinSlideshow的參數(shù)含義與使用方法,需要的朋友可以參考下
2016-06-06
jQuery+PHP實(shí)現(xiàn)可編輯表格字段內(nèi)容并實(shí)時(shí)保存
在本例中，我們會(huì)通過jQuery實(shí)現(xiàn)單擊將一個(gè)文本信息變?yōu)榭删庉嫷谋韱?，你可以對文本?nèi)容進(jìn)行編輯，然后點(diǎn)擊“確定”按鈕，新的內(nèi)容將發(fā)送到后臺(tái)PHP程序處理，并保存到數(shù)據(jù)庫；當(dāng)點(diǎn)擊“取消”按鈕，則頁面恢復(fù)到初始狀態(tài)，需要的朋友可以參考下
2015-10-10
談?wù)刯Query Ajax用法詳解
jQuery 底層 AJAX 實(shí)現(xiàn)。簡單易用的高層實(shí)現(xiàn)見 $.get, $.post 等。$.ajax() 返回其創(chuàng)建的 XMLHttpRequest 對象。大多數(shù)情況下你無需直接操作該函數(shù)，除非你需要操作不常用的選項(xiàng)，以獲得更多的靈活性，本文給大家介紹jquery ajax用法詳解，感興趣的朋友一起學(xué)習(xí)吧
2015-11-11