安装jqgrid
要想使用jqgrid,与使用其他js工具库一样,在页面中使用<script>标签直接引用即可。
使用jqgrid
要想在页面中使用jqgrid,主要分为如下几个部分:
- 在HTML页面中引入jqgrid组件
- 在脚本文件中,配置jqgrid组件的相关参数
- 在脚本文件中,为jqgrid从服务端获取数据
在页面中加入jqgrid
在html文件正文中,加入<table id="datagrid"></table>,就完成了jqgrid组件的引入。
为了使引入的jqgrid组件生效,还需要引入jqgrid库文件,以及其依赖的jquery文件。可以选择性的引入i18n文件,用以支持本地语言。
在下面代码中,<table>
标签中的datagrid
主要用于从脚本文件中取得相应的组件,具体的名称可以自己选取,而不必使用一样的。
<head>
<title>jqgrid使用演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table id="datagrid"></table>
<!-- javascript libs import -->
<script src="js/jquery-1.11.0.min.js" charset="utf-8"></script>
<script src="js/jquery.jqGrid.min.js" charset="utf-8"></script>
<script src="js/i18n/grid.locale-cn.js" charset="utf-8"></script>
<!-- custom source -->
<script>
</script>
</body>
配置jqgrid
在html页面中,完成jqgrid组件的引入后,就需要对jqgrid组件进行配置。只有完成了相应的配置,才能够在最终页面中看到jqgrid组件。
1. 获取页面中的jqgrid组件。
jQuery(document).ready(function(){
jQuery("#datagrid").jqGrid({
});
});
2. 配置jqgrid组件的列
在下面代码中,
colNames
参数用于指明组件的列标题,原则上,有几列,数组中就需要有几个元素。colModel
参数用于指明组件列的属性,包括对应于传入数据字典的key
,包括排序使用的索引,包括是否支持重新调整列宽等。
jQuery(document).ready(function(){
jQuery("#datagrid").jqGrid({
colNames:['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
colModel:[
{name:'monday'},
{name:'tuesday'},
{name:'wednesday'},
{name:'thursday'},
{name:'friday'},
{name:'saturday'},
{name:'sunday'}
]
});
});
3. 配置组件行
下面代码中,rowNum
表示组件中显示的行的数量,rowList
表示可供选择的,组件中显示多少行数。
jQuery(document).ready(function(){
jQuery("#datagrid").jqGrid({
......
rowNum: 10,
rowList: [10, 20, 50, 100, 500, 1000],
......
});
});
获取数据
在下面的代码中,
url
表示从哪里获取数据,一般是一个url地址。datatype
表示获取到的数据类型是怎样的,这里使用的是JSON
。mtype
表示使用何种HTTP方法来获取数据,一般使用GET
或POST
。
jQuery(document).ready(function(){
jQuery("#datagrid").jqGrid({
......
url:"db.json",
datatype:"json",
mtype:"GET"
......
});
});
完整代码
<head>
<title>jqgrid使用演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table id="datagrid"></table>
<!-- javascript libs import -->
<script src="js/jquery-1.11.0.min.js" charset="utf-8"></script>
<script src="js/jquery.jqGrid.min.js" charset="utf-8"></script>
<script src="js/i18n/grid.locale-cn.js" charset="utf-8"></script>
<!-- custom source -->
<script>
jQuery(document).ready(function(){
jQuery("#datagrid").jqGrid({
colNames:['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
colModel:[
{name:'monday'},
{name:'tuesday'},
{name:'wednesday'},
{name:'thursday'},
{name:'friday'},
{name:'saturday'},
{name:'sunday'}
],
rowNum: 10,
rowList: [10, 20, 50, 100, 500, 1000],
url:"db.json",
datatype:"json",
mtype:"GET"
});
});
</script>
</body>