jqgrid stype 详细使用说明
时间: 2023-08-05 19:09:04 浏览: 93
jqGrid 是一个基于 jQuery 的表格插件,它可以实现强大的表格功能,包括分页、排序、搜索等。下面是 jqGrid stype 的详细使用说明:
1. 引入必要的文件
在使用 jqGrid stype 之前,需要引入以下文件:
```
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/free-jqgrid/4.15.5/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/free-jqgrid/4.15.5/js/jquery.jqgrid.min.js"></script>
```
2. HTML 结构
在页面中添加一个表格,如下所示:
```
<table id="grid"></table>
<div id="pager"></div>
```
3. JavaScript 代码
初始化 jqGrid,如下所示:
```
$("#grid").jqGrid({
url: "your_url",
datatype: "json",
mtype: "POST",
colNames: ["ID", "名称", "描述"],
colModel: [
{name: "id", index: "id", width: 100},
{name: "name", index: "name", width: 200},
{name: "description", index: "description", width: 300}
],
rowNum: 10,
rowList: [10, 20, 30],
pager: "#pager",
sortname: "id",
viewrecords: true,
sortorder: "desc",
caption: "表格标题"
});
```
以上代码中,`url` 表示数据源,`colNames` 表示表头,`colModel` 表示列模型,`rowNum` 表示每页显示的行数,`rowList` 表示每页显示行数的下拉框选项,`pager` 表示分页控件的容器,`sortname` 表示默认排序的列,`viewrecords` 表示是否显示总记录数,`sortorder` 表示默认排序的顺序,`caption` 表示表格标题。
4. 其他设置
你可以根据需求设置其他属性,例如:
```
// 隐藏表头
$("#grid").jqGrid("hideCol", "cb");
// 设置表格高度
$("#grid").jqGrid("setGridHeight", 400);
// 设置表格宽度
$("#grid").jqGrid("setGridWidth", 800);
// 设置表格标题
$("#grid").jqGrid("setCaption", "新标题");
```
以上代码中,`hideCol` 表示隐藏列,`setGridHeight` 表示设置表格高度,`setGridWidth` 表示设置表格宽度,`setCaption` 表示设置表格标题。
以上就是 jqGrid stype 的详细使用说明,希望对你有所帮助!
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)