FlexiGrid使用手册.doc

FlexiGrid使用手册 一、概览 Flexigrid是一个基于jQuery开发的Grid，与 Ext Gird类似。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。 它的功能包括： 调整列宽 合并列标题 自定义查找 隐藏列 隔行变色 行扩展事件 动态注册外部参数 分页 排序 显示/隐藏表格等。 二、环境准备 首先.去官网/下载FlexiGrid .下载完成后,解压缩文件得到如下目录结构： flexigrid-1.1 +css + images + bg.gif + btn-sprite.gif +… + flexigrid.css + flexigrid.pack.css +js + flexigrid.js + flexigrid.pack.js其中css文件夹为FlexiGrid的css样式表文件及所需的图片，js文件夹为FlexiGrid的js文件 三、实例 1.在MyEclipse下新建Web project,命名为flexiGridDemo 2.把FlexiGrid包下所有的文件拷贝到WebRoot下 3.修改index.jsp页面 1)将FlexiGrid的样式表文件和js文件引入到页面 link href=css/flexigrid.css type=text/css rel=stylesheet / script src=js/jquery-1.5.2.min.js type=text/javascript/script script src=js/jquery.flexigrid.js type=text/javascript/script 2)在body中增加FlexiGrid的容器 div id=ptable style=margin: 10px table id=flexTable style=display: none/table /div 3）编写生成FlexiGrid的js代码： script type=text/javascript $(document).ready(function(){ var grid=$(#flexTable).flexigrid({ width: 760, height: 280, url: flexGridServlet.do, dataType: json, colModel : [ {display: 编号, name : id, width : 50, sortable : true, align: center, hide: false, toggle : false }, {display: 工作名称, name : job_name, width : 250, sortable : false, align: center }, {display: 工作地址, name : work_address, width : 100, sortable : true, align: center }, {display: 工资, name : salary, width : 60, sortable : true, align: right, process:formatMoney }, {display: 日期, name : date, width : 120, sortable : true, align: center }, {display: 语言, name : language, width : 80, sortable : true, align: center } ], buttons : [ {name: add, displayname: 新增, bclass: add, onpress: toolbarItem }, {separator: true}, { name: modify, displayname: 修改, bclass: modify, onpress: toolbarItem }, {separator: true}, { name: delete, displayname: 删除, bclass: delete, onpress: too