要使用jqGrid合并行,你需要按照以下步驟進行操作:
首先,確保你已經引入了jQuery和jqGrid的相關文件。
在HTML頁面中創建一個表格元素,用于顯示jqGrid。
<table id="grid"></table>
jqGrid()
函數初始化表格,并設置相關參數。$("#grid").jqGrid({
url: "data.php", // 數據源URL
datatype: "json", // 數據類型
colNames: ["姓名", "年齡", "性別"], // 列名數組
colModel: [
{ name: "name", width: 100 },
{ name: "age", width: 50 },
{ name: "gender", width: 50 }
], // 列模型數組
rowNum: 10, // 每頁顯示的行數
rowList: [10, 20, 30], // 可選擇的每頁行數
pager: "#gridPager", // 分頁欄元素
viewrecords: true, // 是否顯示記錄總數
caption: "學生信息表", // 表格標題
grouping: true, // 啟用分組
groupingView: {
groupField: ["gender"], // 按性別分組
groupColumnShow: [false], // 隱藏性別列
groupText: ["<b>{0}</b>"], // 設置分組標題樣式
groupCollapse: false, // 默認展開分組
groupOrder: ["asc"], // 分組排序方式
groupSummary: [false], // 不顯示分組小計
groupDataSorted: true // 分組數據是否已經排序
}
});
在上述代碼中,groupField
指定了按照性別進行分組,groupColumnShow
設置為false
隱藏了性別列,groupText
設置了分組標題的樣式,groupCollapse
設置為false
默認展開分組,groupOrder
指定了分組排序方式,groupSummary
設置為false
不顯示分組小計,groupDataSorted
設置為true
表示分組數據已經排序。
trigger("reloadGrid")
方法重新加載表格數據,以顯示合并行效果。$("#grid").trigger("reloadGrid");
以上就是使用jqGrid合并行的基本步驟。你可以根據實際需求調整參數和樣式,以達到你想要的效果。