`

最近使用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 "<a href=#?contactID="+opts.rowId+"&contactType="+ rowData.contactTypeID +">" + cellValue + "</a>";
	}


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

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

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

当前场景中传入了self,self实际上是一个View对象。
分享到:
评论

相关推荐

    ASP.NET中使用JqGrid完整实现.docx

    JqGrid的灵活性和强大功能使其成为处理大量数据和复杂表格操作的理想选择,尤其适用于需要动态查询和筛选功能的场景。通过适当的配置和定制,可以轻松地将其融入到ASP.NET应用中,提升用户体验。

    jqgrid4.6.rar

    这个压缩包 "jqgrid4.6.rar" 包含了 jqGrid 4.6.0 版本,它是一个稳定且功能丰富的表格展示工具,广泛应用于Web开发中数据管理的场景。以下是对 jqGrid 4.6 版本及相关知识点的详细说明: 1. **jQuery 基础**:...

    jqGrid 3.5源码+DEMO+DOC

    它在Web开发领域中被广泛使用,特别是在需要处理大量结构化数据的场景下。jqGrid 3.5版本是该插件的一个较早版本,但仍然具有丰富的功能和良好的社区支持。 1. **jqGrid的基本概念** - 数据网格:jqGrid提供了一个...

    jqGrid中文文档.doc

    jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作表格化的数据。在开始使用 jqGrid 之前,需要具备基本的 JavaScript 和...通过深入理解 jqGrid 的 API 和各种选项,可以定制化地满足不同场景的需求。

    jqGrid demo (完整版)

    通过学习和使用这个 demo,你可以快速掌握如何在实际项目中使用 jqGrid。 8. **JSP 集成** 尽管这个 demo 主要是与 PHP 集成,但 jqGrid 也支持 JSP。将 PHP 部分替换为 JSP 代码,同样可以实现数据的获取和操作。...

    jqGrid4.6完整包

    2. **可编辑表格**:jqGrid 支持表格数据的编辑功能,用户可以直接在表格内修改单元格数据,提供单行编辑、多行编辑和弹出式编辑等多种模式,满足不同场景的需求。 3. **文件结构**: - `src`:源码目录,通常包含...

    jqGrid 4.6和4.7版本

    6. **编辑和新增数据**:对于需要进行数据操作的场景,jqGrid支持行内编辑、弹出编辑窗口以及新增记录功能,方便用户进行数据的增删改查操作。 7. **本地化和多语言**:jqGrid允许设置语言选项,满足不同地区用户的...

    jQgrid demo

    **正文** ...总之,jQGrid 是一个功能丰富的 jQuery 插件,适用于需要展示大量结构化数据的应用场景。通过实践这个"jQgrid demo",你将能够熟练掌握其核心特性和用法,从而在实际项目中发挥其优势。

    jqGrid.CHM.zip

    6. **编辑模式**:jqGrid支持行内编辑、弹出式编辑和表格编辑模式,理解这些模式的使用场景和配置方法。 7. **表头筛选**:提供列头筛选功能,允许用户快速定位和查找数据。 8. **国际化**:jqGrid支持多语言,...

    jqGrid-3.2.zip

    5. **js**:这个文件夹可能包含了jqGrid的其他辅助脚本或插件,可能包含一些扩展功能或者特定场景下的解决方案。 在使用jqGrid时,你需要在HTML文件中引入jQuery和jqGrid的JavaScript文件,然后通过jQuery选择器...

    jqgrid_doc

    这个插件在Web应用程序中广泛使用,特别是那些需要展示大量结构化数据的场景。jqGrid提供了一系列强大的功能,如数据分页、排序、过滤、编辑以及自定义列等,使得用户可以方便地操作和管理表格数据。 **主要特性** ...

    jqGrid5.5 版本

    总的来说,jqGrid5.5版本是一个功能全面且高度可定制的数据网格解决方案,适合开发复杂的Web应用程序,特别是在处理大量数据和需要复杂用户交互的场景中。学习jqGrid5.5不仅可以提高数据展示和管理的效率,还能提升...

    jqGrid 4.6.0 源码完整版

    在实际使用 jqGrid 时,开发者可以通过配置选项来定制表格的行为,如设置列宽、定义列的标题和数据源,以及设定排序规则和筛选条件。此外,jqGrid 还支持异步数据加载,与服务器端进行交互,实现动态数据展示。 ...

    jqgridDemo

    学习和理解"jqgridDemo",可以帮助你熟练掌握jqGrid的使用,提升开发效率,尤其是在处理大量数据展示和交互的场景下。不过,随着技术的发展,jqGrid可能已经有一些更新的替代品,如datatables等,它们在功能和性能上...

    jqGrid 3.6

    9. 示例代码:通过 demo.html、masterex.html、subgrid_grid.html 等文件,你可以看到实际应用场景中的 jqGrid 实例,帮助理解如何在项目中集成和配置 jqGrid。 10. 寻找免费资源:虽然官方未提供免费的 3.6 封装版...

    jqgrid全套示例代码

    本资源包含的"jqgrid全套示例代码"涵盖了 jqGrid 的多种使用场景,帮助开发者深入理解和应用这个插件。 1. **Web.config**:这是ASP.NET应用程序的核心配置文件,包含了应用程序的设置,如连接字符串、身份验证模式...

    jqGrid组件

    9. 高级特性:如行拖放、树形结构展示、子表嵌套、数据导出等功能,使得jqGrid在复杂场景下也有出色的表现。 在学习和使用jqGrid时,我们通常会参考官方文档和社区资源,例如博文链接中提到的iteye博客文章,可以...

    jquery.jqGrid-4.4.5

    使用jqGrid时,开发者需要引入必要的CSS和JS文件,然后通过jQuery选择器初始化网格,配置数据源、列定义、操作选项等。4.4.5版本可能提供了更友好的API和更丰富的配置项,以适应更多的开发需求。 总结,jQuery....

Global site tag (gtag.js) - Google Analytics