官網
相關資源文件
styles
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<!--jqGrid 皮膚 -->
<link rel="stylesheet" href="assets/css/ui.jqgrid.min.css" />
<!-- ace styles 含jqGrid部分樣式 -->
<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
<!-- 自定義樣式， 用於覆蓋ace.min.css中的部分樣式，解決凍結列橫向滾動條不顯示以及錯位問題 -->
<style>
.ui-jqgrid .ui-jqgrid-bdiv {
border-top: 1px solid #E1E1E1;
overflow-x: auto;
}
.frozen-div, .frozen-bdiv {
background-color: #E4E6E9;/*與網頁背景色一致*/
}
</style>
scripts
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- jqGrid scripts -->
<script src="assets/js/jquery.jqGrid.min.js"></script>
<!-- jqGrid 本地化腳本 相關文件可從jqGrid官網下載 -->
<script src="assets/js/grid.locale-cn.js"></script>
<!-- ace scripts -->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
功能
凍結列
凍結列：鎖定部分列在左側，當橫向滾動條移動的時候，被鎖定的列不滾動
- 設置凍結哪些列
frozen: true shrinkToFit:false- 然后在加載完成之后調用凍結列方法 setFrozenColumns
<body>
<div style="margin-left:20px">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'data.json',
datatype: "json",
colNames: ['Category Name', 'Product Name', 'Country', 'Price', 'Quantity'],
colModel: [
{ label: 'Category Name', name: 'CategoryName', width: 100, frozen: true },
{ label: 'Product Name', name: 'ProductName', width: 150, frozen: true },
{ label: 'Country', name: 'Country', width: 200 },
{ label: 'Price', name: 'Price', width: 250, sorttype: 'number' },
{ label: 'Quantity', name: 'Quantity', width: 250, sorttype: 'integer' }
],
loadonce: true,
shrinkToFit: false, // 凍結列必須設置此屬性為false，否則列會自適應寬度
width: 780,
height: 200,
rowNum: 15,
pager: "#jqGridPager"
});
$("#jqGrid").jqGrid("setFrozenColumns");
});
</script>
</body>
未完待續...