GRID 表格的常用的使用方法

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();
}
动态设置url
var 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:'<%=path%>/getUsersOfPager.action'})
g.loadData();
}
综合实例：
<div class="padding_right5">
<div id="dataBasic"></div>
</div>
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 '<div class="padding_top4 padding_left5">'
+ '<span class="img_list hand" title="查看" onclick="onView(' + erId + ')"></span>'
+ '<span class="img_edit hand" title="修改" onclick="onEdit(' + erId + ')"></span>'
+ '<span class="img_delete hand" title="删除" onclick="onDelete(' + erId+','+rowindex + ')"></span>'
+ '</div>';
}
}
],
url: '<%=path%>/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});
//页号重置为1
grid.setNewPage(1);
grid.loadData();//加载数据
}
//重置查询
function resetSearch(){
$("#queryForm")[0].reset();
$('#search').click();
}
常用属性。