最近使用jqGrid的场景

阅读更多

/*初始化表格*/
initGrid: function(contacts){
  var self = this;
  var queryResultObject = $("#queryResult_allContacts",self.el);
  queryResultObject.jqGrid({
    datatype:"local",
    data	: contacts,
    colNames:["ID","分组管理","姓名","好友分组","机构大类","机构名称","联系人类型标识","职务","个性签名","固定电话","手机","E-mail","MSN","QQ","机构地址","邮编","传真","生日","自我介绍"],
    colModel:[
       {name:'id' ,width:30,jsonmap:"username",align:"right",search:false,hidden:true,sorttype:"int"},
       {name:'anonymousProp' ,width:60,search:false,sortable:false,formatter:self.myLink},
       {name:'username',width:80,search:false},
       {name:'group' ,width:80,search:false,sorttype:"int"},
       {name:'institution.fullName',width:160,search:false},
       {name:'institution.fullName',width:300,search:false},			           
       {name:'contactTypeID',width:80,hidden:true,search:false},
       {name:'customerInfo.title',width:80,search:false},
       {name:'customerInfo.signature',width:160,search:false,hidden:true},
       {name:'customerInfo.telephone1',width:90,sortable:false,search:false},
       {name:'customerInfo.cellphone1',width:90,sortable:false,search:false},
       {name:'customerInfo.email1',width:100,sortable:false,search:false},
       {name:'customerInfo.msn1',width:100,sortable:false,search:false},
       {name:'customerInfo.qq1',width:80,sortable:false,search:false},
       {name:'customerInfo.address',width:160,sortable:false,search:false},
       {name:'customerInfo.zipCode',width:50,sortable:false,search:false},
       {name:'customerInfo.fax',width:80,sortable:false,search:false},
       {name:'customerInfo.birthDay',width:80,sorttype:"date",datefmt:"Y-m-d",search:false},
       {name:'customerInfo.selfIntroduction',width:160,sortable:false,search:false}
   ],
	  caption:"通讯录",
	  sortname:"id",
    sortorder:"desc",
	  hidegrid:true,
	  viewrecords: true,
	  loadonce: true,
	  rownumbers: true,
	  rownumWidth: 20,
	  height:200,
	  gridview: true,
	  loadtext:"loading......",
	  rowNum:20,
	  rowList:[20,50,80],
	  pager: '#pagerDiv',
	  onSelectRow:function(rowID,flag,event) {self.selectContact(rowID,flag,event,self);
	  onCellSelect:self.selectCell
});

/*分页*/
queryResultObject.jqGrid('navGrid','#pagerDiv', {edit:false,add:false,del:false,search:false});

	/*选择联系人*/
	selectContact:function(rowID,flag,event,contactListView){		
	},

	selectCell:function(rowID,columnID,text,event){
	},
	
	/*自定义连接，链接上绑定事件。自定义formatter返回一个html的元素用来填充表格中某一列*/
	myLink:function(cellValue,opts,rowData){
		return "" + cellValue + "";
	}

jqGrid的onSelectRow默认参数只有三个:

rowID：分别是选中行的id（不是行号）；
flag：选中还是取消、点击事件；
event：要传其他参数给响应的方法；

如果需要在响应函数中需要其他参数，可以直接给onSelectRow指定一个匿名函数，然后再传入其他参数，调用自己的响应函数。

当前场景中传入了self，self实际上是一个View对象。