BJUI是一個基于jQuery的UI庫,提供了大量的UI組件和封裝,方便開發者快速構建頁面。在BJUI中使用json來生成表格是很方便的。
使用json生成表格,需要指定表格的各個元素的屬性,比如列數、行數、表頭、單元格內容等。下面是一個簡單的示例:
{ "rows": [ { "cols": [ { "title": "姓名", "field": "name" }, { "title": "年齡", "field": "age" } ] }, { "data": { "name": "張三", "age": "20" } }, { "data": { "name": "李四", "age": "22" } } ] }
這個json表示了一個表格,共有兩列,一共有三行,第一行是表頭,第二行和第三行是數據行,第一列為“姓名”,第二列為“年齡”。第二行和第三行的數據分別為“張三”和“李四”。
使用BJUI的Table組件,可以將這個json轉化成一個表格。代碼如下:
$("#table").bjui("table", { grid: { rows: [ { cols: [ { title: "姓名", field: "name" }, { title: "年齡", field: "age" } ] } ], data: [ { name: "張三", age: "20" }, { name: "李四", age: "22" } ] } });
使用上述代碼生成表格,最終得到的表格與上述json對應的表格是一樣的。