jQuery Mobile是一款非常流行的開源HTML5跨平臺框架,他提供了一些方便的工具和界面組件,可以幫助開發人員快速達成絕大多數應用開發需求。其中之一就是報表功能的實現。
$(document).on("pagecreate", "#page-report", function(){ var reportData = [ {"month": "2019-01", "profit": 1000}, {"month": "2019-02", "profit": 1200}, {"month": "2019-03", "profit": 800}, {"month": "2019-04", "profit": 1500}, {"month": "2019-05", "profit": 1100}, {"month": "2019-06", "profit": 900}, ]; $("#report-table").html(""); for(var i = 0; i< reportData.length; i++){ $("#report-table").append(""); } $("#report-table").table("refresh").trigger("create"); }); "+reportData[i].month+" "+reportData[i].profit+"
以上是一個常見的報表生成方法。在頁面創建后,定義報表數據(可以從后端動態獲取,這里僅以一個靜態JSON對象為例),通過jQuery選擇器獲取報表所在的容器元素,并遍歷數組數據生成表格結構,插入到容器元素中。然后使用table()方法初始化表格,并通過trigger()方法觸發創建事件,即可在界面上顯示出報表。
通過簡單的代碼示例,可以看出jQuery Mobile對于報表功能的實現支持十分友好易用,可以幫你快速搭建一個完美的報表展示界面。