jqGrid是一個基于jQuery的表格插件,可以實現(xiàn)對表格數(shù)據(jù)的增刪改查以及排序、分頁等功能。使用jqGrid可以使表格的顯示效果更加美觀,同時也方便了表格數(shù)據(jù)的管理和操作。
// jqGrid初始化 $("#grid").jqGrid({ url: "data.php", // 數(shù)據(jù)請求地址 datatype: "json", // 數(shù)據(jù)類型 colModel: [ // 列模型 { label: 'ID', name: 'id', width: 50 }, { label: '姓名', name: 'name', width: 100 }, { label: '年齡', name: 'age', width: 50 }, { label: '性別', name: 'gender', width: 50 }, { label: '地址', name: 'address', width: 200 } ], rowNum: 10, // 每頁顯示記錄數(shù) rowList: [5, 10, 20], // 可選每頁顯示記錄數(shù) pager: '#gridPager', // 分頁欄容器 sortname: 'id', // 默認排序字段 sortorder: 'asc', // 默認排序方式 viewrecords: true, // 是否顯示總記錄數(shù) autowidth: true, // 自動調(diào)整寬度 height: 'auto' // 表格高度 });
以上代碼展示了使用jqGrid初始化一個表格的基本配置。其中url為請求數(shù)據(jù)的地址,datatype為數(shù)據(jù)類型,colModel為列模型,rowNum為每頁顯示記錄數(shù),rowList為可選每頁顯示記錄數(shù),pager為分頁欄容器,sortname為默認排序字段,sortorder為默認排序方式,viewrecords為是否顯示總記錄數(shù),autowidth為自動調(diào)整寬度,height為表格高度。
除此之外,jqGrid還可以進行更多的配置和操作,例如添加自定義按鈕、使用服務(wù)器端分頁、設(shè)置單元格編輯等等。使用jqGrid可以使表格操作變得更加簡單、高效。
上一篇mysql中兩個表連接
下一篇mysql中兩個條件排序