GRID 表格的常用的使用方法.docx

GRID 表格的常用的使用方法：动态切换表格：var g;function initComplete()g = $(#maingrid).quiGrid(columns: display: 姓名, name: name, align: center,width: 30%, display: 性别, name: sex, align: center , width: 20%, display: 部门, name: deptName,align: center , width: 30%, display: 学历, name: degree,align: center, width: 20% , data:testData, pageSize: 10, rownumbers:true, checkbox:true,percentWidthMode:true,height: 100%, width:100%);function changeGrid()var columns = display: 姓名, name: name, align: center,width: 10%, display: 工作日期, name: beginworkDate, align: center , width: 20%, display: 年龄, name: age,align: center , width: 10%, display: 爱好, name: hobby,align: center, width: 20% , display: 性别, name: sex, align: center , width: 10%, display: 部门, name: deptName,align: center , width: 20%, display: 学历, name: degree,align: center, width: 10% ;g.options.data=testData2;g.set(columns, columns);g.loadData();动态设置urlvar g;function initComplete()g = $(#maingrid).quiGrid(columns: display: 姓名, name: userName,align: left, width: 18%, display: 所属部门, name: orgName,align: left, width: 20%, display: 性别, name: userSex, align: left, width: 10%, display: 入职时间, name: userEmployTime,align: left,width:20% , display: 学历, name: userEducation,align: left,width:20%,sortName: userId,rownumbers:true,checkbox:true,url:,height: 100%, width:100%,pageSize:5,percentWidthMode:true);function loaddataHandler()g.setOptions(url:/getUsersOfPager.action)g.loadData();综合实例：grid = $(#dataBasic).quiGrid(columns: display: 姓名, name: userName,align: left, width: 18%, display: 所属部门, name: orgName,align: left, width: 20%, display: 性别, name: userSex, align: left, width: 10%, display: 入职时间, name: userEmployTime,align: left,width:20% , display: 学历, name: userEducation,align: left,width:20% , display: 操作, isAllowHide: false, align: left, width:12%,render: function (rowdata, rowindex, value, column)return + + + + ;,url: /getUsersOfPager.action, sortName: userId,rownumbers:true,checkbox:true,height: 100%, width:100%,pageSize:10,percentWidthMode:true,toolbar:items:text: 新增, click: addUnit,iconClass: icon_add, line : true ,text: 批量删除, click: deleteUnit, iconClass: icon_delete, line : true ,text: 导入, click: showImportDialog, iconClass: icon_import, line : true ,text: 导出当前页, click: exportPageData, iconClass: icon_export, line : true ,text: 导出全部, click: exportTotalData, iconClass: icon_export);查询条件：/查询function searchHandler()var query = $(#queryForm).formToArray();grid.setOptions( params : query);/页号重置为1grid.setNewPage(1);grid.loadData();/加载数据/重置查询function resetSearch()$(#queryForm)0.reset();$(#search).click();常用属性分类参数名默认值说明高度与宽度heightauto表格高度,支持百分比isScrolltrue是否滚动为flase不出现纵向滚动条，高度自适应数据。设置的高度无效heightDiff-10高度补差,当设置height:100%时，可能会有高度的误差，可以通过这个属性调整fixedCellHeighttrue是否固定行的高度，设为false，则行高根据内容自适应rowHeight26行高度headerRowHeight26表头行的高度widthauto表格宽度,数字或百分比columnWidth120统一设置每一列的默认列宽minColumnWidth80统一设置每一列的最小列宽percentWidthModefalse如果希望浏览器尺寸变化时，每一列宽度自动调整始终自适应，那么需要设置该属性为true并且每一列设置百分比宽度，所有列宽相加为100%数据交互url空用于获取数据data空用于获取数据params空提交到服务器端的额外参数格式如：params:name:abc,value:111,name:efg,value:222则提交的形式是：abc=111&efg=222dataActionserver提交数据的方式，可选值：local和server。选择本地方式时将在客服端分页、排序methodpost提交服务端方式contentType无用于设置ajax通信的contentType参数asynctrue是异步还是同步方式，如果设为false，则需要等到数据加载完成再进行其他处理where函数3个参数：data, item,index数据过滤查询函数分页与排序usePagertrue是否分页page1默认当前页pageSize10每页默认的结果数pageSizeOptions10, 20, 30, 40, 50可选择设定的每页结果数showPageInfotrue是否显示分页的右侧信息showPageSizetrue是否显示每页多少条的下拉框sortName无，默认按数据顺序排序字段名sortOrderdesc排序顺序外观设置frozentrue为true时默认行号和checkbox是锁定的。如果某一列也设置了frozen为true则那一列也锁定。为false则不允许有锁定列，包括行号和checkboxtitle空表格标题，设置后自动显示标题栏enabledSorttrue是否允许排序allowUnSelectRowfalse设为true，则第一次点击选中行，第二次点击可以取消选中行alternatingRowtrue是否启用奇偶行变色效果mouseoverRowCssClassl-grid-row-over鼠标移入样式。如果不希望响应鼠标移入，将此参数设为nullwhenRClickToSelectfalse右键点击行时是否选中toolbar工具条multiheadfalse多表头模式时设为trueshowHeadertrue是否显示表头行号rownumbersfalse是否显示行号frozenRownumberstrue行号列是否锁定rownumbersColWidth26行号列宽度复选框checkboxfalse是否显示复选框checkboxColWidth27复选框宽度selectRowButtonOnlytrue复选框模式时，是否只允许点击复选框才能选择行frozenCheckboxtrue复选框列是否锁定isChecked函数2个参数：row, data复选框初始化函数，通过它可以设置复选框具有初始值noSelectonfalse在没有checkbox的情况下，如果不希望点击选中，设置此参数为true9.1.3常用方法表分类方法名参数说明新增addRow1、要附加的数据2、插入的位置可以是DOM对象，也可以是Row Data3、isBefore是否在指定Dom对象的前方插入行4、parentRow作为子节点加入到这个行，树模式用增加行例如要插入一条到首行：var firstRow = g.getRow(0);var rowData=userName:xxx,userLoginName: xxx,userPassword: xxx,userSex: xxxg.addRow(rowData, firstRow, true);addRows1、rowdataArr要附加的数据一次性增加多行删除deleteSelectedRow删除选择的某一行注意删除行只用于本地内存数据，刷新后会还原如果要真正的删除，是将id提交到后台删除数据，然后再重新loadData()加载数据deleteRow1、行Dom对象或者行对应的row data删除行如果要删除多个选中行：var rows = g.getSelectedRows();if (rows.length = 0) alert(请至少选择一行);return;for(var index in rows)g.deleteRow(rowsindex);deleteRange1、rows一次性删除多行选择select1、rowindex或者rowdata选中某一行unselect1、rowindex或者rowdata取消选中某一行更新数据updateRow1、newRowData要附加的数据2、rowDom DOM对象更新行updateCell1、cell单元格Dom对象或者列名value新值2、行Dom对象或者行对应的row data更新单元格loadData1、loadDataParm是否重新提交服务器,或者是筛选的函数,也可以指定data2、detailRemory父子表刷新用到。默认为true,这样调用loadData后，上次展开的能够保持展开状态刷新数据loadServerData1、param加载参数2、clause筛选的函数加载数据(服务器)判断existRecord1、rowdata行数据是否存在某记录isSelected2、rowdata行数据判断是否选中移动up1、targetRowrowindex或者rowdata上移down1、targetRow rowindex或者rowdata下移move1、from来源表头2、to目标位置表头3、isAfter是否附加到后面移动行moveRange1、rows移动多行外观changePage1、ctype可选值有first/prev/next/last/input改变分页changeSort1、columnName列名2、sortOrder排序方向,asc或者desc改变排序setColumnWidth1、columnparm列参数,可以是列索引、列ID,也可以是列名2、value宽度调整列宽toggleCol1、columnparm列参数,可以是列索引、列ID,也可以是列名2、visible是否可见显示/隐藏列changeHeaderText1、columnparm列参数,可以是列索引、列ID,也可以是列名2、headerText表头文本改变表头文本setOptions参数是以key，value的形式的对象。单个参数如：url:xxx多个参数如：url:xxx,pageSize:10重新设置属性。一般设置完需要重新loadData()才生效。例如要动态更改表格的urlg.setOptions(url:/getUsersOfPager.action)g.loadData();又比如表格数据的查询，form.js提供了formToArray方法，将查询表单name和value转为json数组，然后再传递给表格的额外参数params：var query =$(#queryForm).formToArray();grid.setOptions( params : query);grid.setNewPage(1);grid.loadData();大多数属性都可以通过setOptions()方法设置，如果有的属性不生效，则使用g.options.属性名=新值例如：g.options.data=testData2;g.loadData();set参数是以key，value的形式的对象。某些特殊的熟悉可以通过set方法设置。例如将表格重新渲染成一个新的表格，需要重设数据和表格的列g.options.data=testData2;g.set(columns, co