上一节已经将jqGrid的框架架了起来。这一节将进行jqGrid的配置文件的编写。
接下来，我们先将属性写好，再来说明下个属性的意思。
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'admin/json/jsondata.action',
datatype: 'json',
mtype: 'GET',
colNames:['流水号','姓名','年龄','性别','部门','入职时间'],
colModel:[
{name:'id',index:'id', width:180,editable:true},
{name:'name',index:'name',width:120,editable:true},
{name:'age',index:'age', width:90,editable:true},
{name:'sex',index:'sex', align:'center',width:60,editable:true},
{name:'__department_id',index:'__department_id',width:200,editable:true},
{name:'date',index:'date', width:200,sorttype:"date",sortable:false}
],
pager: '#pager',
sortable: true,
rowNum:10,
multiselect: true,
prmNames:{rows:"pageSize",page:"page"},
jsonReader: {
root: "rows",
repeatitems : false,
id:"0"
},
rowList:[10,20,30],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
caption: 'My first grid'
});
jQuery("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
});
</script>
显示的结果如下：
thefirstgrid
jqGrid固定的写法是
jQuery("#list").jqGrid({参数}）
| Property | Description |
|---|---|
| url | tells us where to get the data. Typically this is a server-side function with a connection to a database which returns the appropriate information to be filled into the Body layer in the grid
从后台获取要显示数据的地址 |
| datatype | this tells jqGrid the type of information being returned so it can construct the grid. In this case we tell the grid that we expect xml data to be returned from the server, but other formats are possible. For a list of all available datatypes refer to API Methods
从服务器后台要返回的数据的类型，可以为json、xml等格式，本例中使用json |
| mtype | tells us how to make the ajax call: either ‘GET’ or ‘POST’. In this case we will use the GET method to retrieve data from the server
获取数据使用的方法，使用get或者post，mmorpg为get，本例使用get |
| colNames | an array in which we place the names of the columns. This is the text that appears in the head of the grid (Header layer). The names are separated with commas
为一个数组，用来显示的头部，在本例就是流水号、姓名等。 |
| colModel | an array that describes the model of the columns. This is the most important part of the grid. Here I explain only the options used above. an array that describes the model of the columns. This is the most important part of the grid. Here I explain only the options used above. For the complete list of options see colModel API name the name of the column. This name does not have to be the name from database table, but later we will see how we can use this when we have different data formats index the name passed to the server on which to sort the data (note that we could pass column numbers instead). Typically this is the name (or names) from database – this is server-side sorting, so what you pass depends on what your server expects to receive 索引，即该列使用从服务器返回的数据 width the width of the column, in pixels 使用像素来表示宽度，width align the alignment of the column 对齐方式 sortable pecifies if the data in the grid can be sorted on this column; if false, clicking on the header has no effect是否可以排列 该元素为核心元素，各种配置均在这边 |
| pager | defines that we want to use a pager bar to navigate through the records. This must be a valid html element; in our example we gave the div the id of “pager”, but any name is acceptable. Note that the Navigation layer (the “pager” div) can be positioned anywhere you want, determined by your html; in our example we specified that the pager will appear after the Body layer.
指定显示页数的层id |
| rowNum | sets how many records we want to view in the grid. This parameter is passed to the url for use by the server routine retrieving the data
默认显示的每页行数 |
| rowList | an array to construct a select box element in the pager in which we can change the number of the visible rows. When changed during the execution, this parameter replaces the rowNum parameter that is passed to the url
可以选择的行数，例如10、20、30等 |
| sortname | sets the initial sorting column. Can be a name or number. This parameter is added to the url for use by the server routine
默认排序的列 |
| viewrecords | defines whether we want to display the number of total records from the query in the pager bar
是否显示总记录数 |
| caption | sets the caption for the grid. If this parameter is not set the Caption layer will be not visible
标题 |
本章到这里，已经完成前台的配置。下一讲将主要介绍jqGrid和后台的交互。