好用的插件 jqGrid

好用的插件 jqGrid 1、在项目中，使用一款合适的表格软件会让开发事半功倍，jqGrid提供 搜索、分页功能，添加、编辑、删除和搜索表中记录等，是一款优秀的Grid的。 2、jqGrid是基于jQuery，作为jQuery的插件存在的，所以，使用前必须先导 入jQuery包,同时，它支持Query的UI theme(from3.6)。3、支持数组、json、 xml、本地等格式作为数据源，一般情况下均使用json或xml和后台交互，本 文以json为例，使用java环境(PHP可以参考官方演示的案例)3、安装(1)安 装顺序:先引入ui.grid.css样式和ui theme样式表link rel="stylesheet"type="text/css"media="screen"href="${ctx}/jquery-ui-1.7.2.custom/css/redmond/jquery-ui-1.7.1.custom.css"/link rel="stylesheet"type="text/css"media="screen"href="${ctx}/jqgrid/css/ui.jqgrid.css"/link rel="stylesheet"type="text/css"media="screen"href="${ctx}/jqgrid/css/datepicker.css"/link rel="stylesheet"type="text/css"media="screen"href="${ctx}/alert/jquery.alerts.css"/再引入jQuery核心文件,UI theme核心包以及jqGrid核心包、 语言包，切记:语言包要先于核心包引入。script src="${ctx}/jqgrid/js/jquery- 1.3.2.min.js"type="text/javascript"/script script type="text/javascript"src="${ctx}/jquery-ui-1.7.2.custom/js/jquery-ui-1.7.2.custom.min.js"/script script src="${ctx}/jqgrid/i18n/grid.locale-cn- gbk.js"type="text/javascript"/script script src="${ctx}/jqgrid/js/jquery.jqGrid.min.js"type="text/javascript"/script再写入以下css代码html,body{margin:10;/*Remove body margin/padding*/padding:0;overflow:hidden;/*Remove scroll bars on browser window*/font-size:75%;}.ui-tabs-nav li{position: relative;}.ui-tabs-selected aspan{padding-right:10px;}.ui-tabs- close{display:none;position:absolute;top:3px;right:0px;z- index:800;width:16px;height:14px;font-size:10px;font-style: normal;cursor:pointer;}.ui-tabs-selected.ui-tabs-close{display: block;}.ui-layout-west.ui-jqgrid tr.jqgrow td{border-bottom:0px none;}.ui-datepicker{z-index:1200;2、在要插入jqGrid的地方写入以下 代码table id="list"/table div id="pager"/div其中table是用于显示数据， paper用于显示分页。table必须，paper可选。这个在jqGrid是基础配置， 必须条件。3、写jqGrid属性。在写jqGrid属性配置文件前，必须先了解下 jqGrid个属性的含义接下来，我们先将属性写好，再来说明下个属性的意思。 script type="text/javascript"jQuery(document).ready(function(){jQuery("#list").jqGrid({url:'admin/json/jsondata.action',datatype:'json',mtype: 'GET',colNames:['流水号','姓名','年龄','性别','部门','入职时间 :'id',index:'id',width:180,editable:'],colModel:[{name 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显示的结果如下:jqGrid固定 的写法是jQuery("#list").jqGrid({参数})PropertyDescriptionurltells us where to get the data.Typically this is aserver-side function with aconnection to adatabase which returns the appropriate information to be filled into the Body layer in the grid从后台获取要显示数据的地址 datatypethis 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 alist of all available datatypes refer to API Methods从 服务器后台要返回的数据的类型，可以为json、xml等格式，本例中使用json mtypetells 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 colNamesan 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为一个数组，用来显示的头部，在本例就是流水 号、姓名等。colModelan array that describes the model of the columns.This is the most important part of the grid.Here Iexplain only the options used above.an array that describes the model of the columns.This is the most important part of the grid.Here Iexplain 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是否可以排列该元素为核心元素，各种配置均在这边 pagerdefines that we want to use apager bar to navigate through the records.This must be avalid 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 rowNumsets 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默认显示 的每页行数rowListan array to construct aselect 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等 sortnamesets the initial sorting column.Can be aname or number.This parameter is added to the url for use by the server routine默认排序 的列viewrecordsdefines whether we want to display the number of total records from the query in the pager bar是否显示总记录数 captionsets the caption for the grid.If this parameter is not set the Caption layer will be not visible标题jqGrid与后台的交互方式如下:载 入时，jqGrid以POST或GET方式(用定义)向服务器发起数据载入请求，服务 器根据请求传递给jqGrid;传递的参数如下:page:指示需要查询第几页的数 据。rows:指示每页显示的记录条数。sidx:指示查询排序的条件，这是一个 字符串，可能是数据库表字段或者是POJO对象的属性名。这需要程序来处理。 sord:指示查询排序的方式，可能的值是ASC和DESC _search:用来指示是否 是查询，值是true或者false。同时，除了_search，其他变量名可以通过 prmNames:{},进行指定，如本例中，prmNames:{rows:"pageSize",page: "page"},将rows改为pageSize，将page仍定义为page。这样做的目的是我们 想使用Struts2的json插件，避免命名上的冲突。默认后台返回的json数据 为{total:xxx,page:yyy,records:zzz,rows:[{name1:"Row01″,name2: "Row 11″,name3:"Row 12″,name4:"Row 13″,name5:"Row 14″},因为我 们设定后台传递的类型为json，并且更改了prmNames，所以。我们要对 jqGrid的属性做一下配置。设定datatype:'json',并设定jsonReader: {root:"rows",//root的意思是，表格数据的名repeatitems:false,//指定 返回的数据的标签是否是可重复的，一般为false id:"0″//每行数据的唯一 标识。可以设置为空字符串或者一个数字。一般设置为0},