jQuery動態(tài)生成不規(guī)則表格(前后端)
一、需求:有這么一張表
前四個屬性當(dāng)作聯(lián)合主鍵
需要把該表所有的行在前端以表格形式顯示出來,要求activityId相同時合并成一行,activityCode相同時,合并一行,activityVersion相同時也合并一行。類似這種:
二、初解決:先上來把數(shù)據(jù)庫的數(shù)據(jù)查詢出來,以List<Activity> activities保存,再存到j(luò)son對象中傳回頁面。像這樣json.put("activities",activities);
到j(luò)s頁面了,然后就開始蒙蔽了。本來jqeury就小白,遇到這種情況就更沒辦法了。
三、問大牛:大牛給我提供了兩種思路:我的理解是遇到這種情況可以先把數(shù)據(jù)在后臺封裝成你需要的數(shù)據(jù)結(jié)構(gòu),在傳到前臺,就會很好處理。
第一種:構(gòu)造Map:Map<String,Map<String,List<Activity>>>
第二中:構(gòu)造List:這種需要封裝出新的java對象.形如:List<ActivityCode>.
對象ActivityCode有List<ActivityVersion>
這個屬性,對象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動態(tài)生成不規(guī)則表格(前后端),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- jQuery動態(tài)生成表格及右鍵菜單功能示例
- JQuery 動態(tài)生成Table表格實例代碼
- jQuery動態(tài)生成Bootstrap表格
- JQuery Ajax動態(tài)生成Table表格
- Jquery 動態(tài)生成表格示例代碼
- jQuery實現(xiàn)多按鈕單擊變色
- 用JQuery實現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼
- jQuery代碼實現(xiàn)表格中點擊相應(yīng)行變色功能
- jQuery輕松實現(xiàn)表格的隔行變色和點擊行變色的實例代碼
- jQuery插件實現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果代碼
- jquery實現(xiàn)表格中點擊相應(yīng)行變色功能效果【實例代碼】
- jQuery實現(xiàn)表格隔行及滑動,點擊時變色的方法【測試可用】
- jQuery實現(xiàn)動態(tài)生成表格并為行綁定單擊變色動作的方法
相關(guān)文章
jQuery 2.0.3 源碼分析之core(一)整體架構(gòu)
這篇文章主要介紹了jQuery 2.0.3 源碼分析之core(一)整體架構(gòu),需要的朋友可以參考下2014-05-05jQuery實現(xiàn)帶滾動線條導(dǎo)航效果的方法
這篇文章主要介紹了jQuery實現(xiàn)帶滾動線條導(dǎo)航效果的方法,分析了帶滾動條導(dǎo)航效果的實現(xiàn)原理與相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01php結(jié)合imgareaselect實現(xiàn)圖片裁剪
這篇文章主要介紹了php結(jié)合imgareaselect實現(xiàn)圖片裁剪的相關(guān)資料,需要的朋友可以參考下2015-07-07jQuery的load()方法及其回調(diào)函數(shù)用法實例
這篇文章主要介紹了jQuery的load()方法及其回調(diào)函數(shù)用法,實例分析了load方法的簡單使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03JQuery實現(xiàn)地圖坐標(biāo)拾取和地址模糊查詢功能
本文詳細(xì)介紹了使用JQuery、HTML和JavaScript實現(xiàn)移動端地圖位置選取的方法,內(nèi)容包括構(gòu)建地圖頁面、通過點擊獲取經(jīng)緯度、實現(xiàn)地址模糊查詢與標(biāo)注等功能,文章還提供了完整的代碼示例,并且介紹了百度地圖API的應(yīng)用,幫助開發(fā)者快速掌握地圖位置選點的開發(fā)技術(shù)2024-09-09自己動手制作jquery插件之自動添加刪除行的實現(xiàn)
我們常常會遇到這樣的情況,一個系統(tǒng)中有大量的需要對一個行進(jìn)行復(fù)制添加,希望能夠進(jìn)行批量的操作,這個時候,我們就可以考慮把它做成一個jquery插件了.2011-10-10jquery基于layui實現(xiàn)二級聯(lián)動下拉選擇(省份城市選擇)
本篇文章主要介紹了jquery基于layui實現(xiàn)二級聯(lián)動下拉選擇(省份城市選擇),具有一定的實用價值,需要的朋友可以參考下2017-06-06