jqgird

最近项目中用到jqgrid做表格，边学便用，记录下来
jqgrid是一个做表格的工具，首先定义一个<table id="gridTable">标签

$("#gridTable").jqGrid({

    url:'',        //加载grid表格的链接

    editurl:'',    //编辑之后调用的url

    datatype: "json",    // 加载的数据类型

    colNames:['col1', 'col2', 'col3'],//设置列标题

    colModel:[{name:'', index=''},{name:'', index=''},{name:'', index=''}],//设置每列的数据,根据name指定的值进行填充

    rowList:[10, 20, 30],    //设置可以选择的每页显示行数

    rowNum:10,            //   设置默认每页显示多少航

    pager: '#pager',    //    显示当前页数，以及翻页等显示，需要定义一个id为pager(此名字随意取)的div标签用于显示翻页信息

    caption:'',        //为表格指定一个标题

    multiselect: 'true',    //  设置是否可以多选，设置为true支持多选会在最右边添加一个checkbox

})

colModel：name属性来进行填充值，

hidden设置是否隐藏该行，设置为true的时候隐藏

editable:设置是否可以编辑，为true的时候可以编辑

sortable:是否为改行设置排序

formatter:function(){return "<a href=''/>"} 可以用来为该列设置超链接

edittype:设定编辑时类型，例如可以设置checkbox,select, textarea等类型

editoptions:当edittype设置为某种类型的时候，设定编辑时的选项

align:设置值在表格中的位置

事件

afterInsertRow(rowId,rowdata, rowelem)插入某行时触发

beforeRequest()向服务端发起请求的时候触发

beforeSelectRow(rowId,e)用户点击改行的时候触发，如果为返回true,则该行会被选中，如果为false则不会选中该行

gridComplete()数据都加载完成的时候触发

loadComplete(xhr)当从服务器返回响应的时候执行，xhr为XMLHttpRequest对象

loadError(xhr,status,error)请求失败的时候调用该方法

onCellSelect(rowId,iCol,cellContent,e)当选中某单元格的时候调用

ondbClickRow(rowId, iRow,iCol,e)双击该行触发

onPaging()点击翻页按钮填充数据之前触发此事件

onRightClickRow(rowId,iRow,iCol,e)右击鼠标时触发

onSelectAll(allRowIds, status)选中所有数据时触发

onSortCol(index,iCol,sortorder) 当点击排序列但是数据还未进行变化时触发此事件。index：name在colModel中位置索引；iCol：当前单元格位置索引；sortorder：排序状态：desc或者asc

resizeStart(event, index)   当开始改变一个列宽度时触发此事件。event：event对象；index：当前列在colModel中位置索引

resizeStop(newwidth, index)   当列宽度改变之后触发此事件。newwidth：列改变后的宽度；index：当前列在colModel中的位置索引

行操作：

删除行var result=$("gridTable").jqGrid('delRowData',12);

更新：var result=$("gridTable").jqGrid('setRowData',id,value);

新增：var result=$("gridTable").jqGrid('addRowData', id, datarow);

后台是jackson将对象转化为json，然后在前台进行读取