jqgrid使用小节
jQuery("#list2").jqGrid({
url: 'GetContent.aspx',
datatype: "json",
colNames: ['分行', '姓名', '带看数量', '委托数量', '行程时间', '操作时间', '操作员'],
colModel: [{
name: 'deptid',
index: 'deptid',//排序时向服务器传的参数，即sidx
editable: true,//该列是否可修改，
edittype: "select",//修改时DOM元素的类型
stype: "select",//查找时dom元素的类型。
editoptions: {
index: "deptid",
value: bindDept//select中的选项可以为{"key":"value"}类型的数组，也可为返回该类型数组的函数
},
searchoptions: {
sopt: ['eq'],//搜索时，比较的选项，如大于，小于，等于等。这里的eq对应于等于。
value: sDeptValue//select中的选项可以为{"key":"value"}类型的数组，也可为返回该类型数组的函数
dataInit:function(el){ }//绑定事件，如弹出时间选择框
}
},
{
name: 'empid',
index: 'empid',
editable: true,
edittype: "select",
stype: "select",
editoptions: {
index: "empid",
value: ":"
},
editrules: {//编辑时，该项的约束，有：必填，为数字等。。。。，
required: true ,
custom:true, //设定自定义验证
custom_func:validateNoSpace //自定义的验证函数，function validateNoSpace（a,v） a为值，v为对应的列名
},
searchoptions: {
sopt: ['eq'],
dataInit: searchByDept//数据初始化执行的函数，只执行一次，传递一个当前dom的参数
}
},
{
name: 'daikan',
index: 'daikan',
editable: true,
editrules: {
integer: true,
required: true
},
searchoptions: {
sopt: ['eq', 'gt', 'lt']
}
},
{
name: 'weituo',
index: 'weituo',
editable: true,
align: "right",
editrules: {
integer: true,
required: true
},
searchoptions: {
sopt: ['eq', 'gt', 'lt']
}
},
{
name: 'maindate',
index: 'maindate',
editable: true,
align: "right",
editoptions: {
index: "maindate"
},
editrules: {
required: true
},
searchoptions: {
sopt: ['eq'],
dataInit: function (el) {
$(el).focus(function () {
WdatePicker({
isShowClear: false,
readOnly: true,
dateFmt: "yyyy-MM-dd"
});
})
}
}
},
{
name: 'exdate',
index: 'exdate',
editable: false,
align: "right",
search: false
},
{
name: 'exuser',
index: 'exuser',
editable: false,
sortable: false,//该列是否排序
search: false//该列是否在查找选项中出现
}],
rowNum: 25,
height: parent.getNavPanelH() * 1 - 100,
width: parent.getNavPanelW() * 1 - 25,
rowList: [10, 20, 30],
pager: '#pager2',
sortname: 'exdate',
mtype: 'POST',
viewrecords: true,
sortorder: "desc",
caption: "业务行程管理",
editurl: "editRoute.ashx",
resetSelection: false
//editoptions:{afterclickPgButtons:tt}
});
//工具条的设置
jQuery("#list2").jqGrid('navGrid',
'#pager2', //工具条对应的元素ID
{
edit: true,
add: true,
del: false,
afterShowAddDlg: bindEmp,
afterShowEditDlg: bindEmpEdit
},
{/////////////////////////////修改
top: 50,
left: 50,
onInitializeForm: onInitEditShow,//onInitEditShow(f) ,f为formid
afterclickPgButtons: editPageClick,
recreateForm: true,//此项最好设置为true,否则在提交后，所绑定事件，有不可预知的错误，每次点击编辑按钮时，是否新建form,如果为false，则第一次新建，以后都hide/show的方式
beforeSubmit: beforeSubmith,// beforeSubmith(x,y),y为formid,须返回{bool,""}类型的数组
afterComplete: afterCompleteh
},
{/////////////////////////////新增
top: 50,
left: 50,
beforeSubmit: beforeSub,
afterComplete: afterCom
},
{}/////////////////////////////删除
,
{/////////////////////////////查找（以上四项的顺序不能改变）
multipleSearch: true,
top: 50,
left: 50,
sopt: ['cn', 'bw', 'eq', 'ne', 'lt', 'gt'],
closeAfterReset: true//此项最好设置为true,否则在提交后，再次打开编辑窗口,会造成所绑定事件重复绑定，有不可预知的错误
});
jQuery("#list2").jqGrid('gridResize', {
minWidth: 350,
maxWidth: 800,
minHeight: 80,
maxHeight: 800
});
总结：1.使用过程中多看一下，wiki中的文档
2.注意一下回调函数中的参数，以及调用的次数，有的是只调用一次的，还有的必须返回一个数据。