人人开源项目使用jqGrid列表上支持链接与请求方法

本文链接：https://blog.csdn.net/weixin_44994731/article/details/110481520

使用jqGrid列表上支持链接与请求方法+弹框
项目说明：由于在开发过程中，项目使用的是开源项目人人项目（地址为https://www.renren.io/community/project），但由于前端人手不够，只能在此版本基础上修改。

在这里插入图片描述

1，在列表上添加链接
在colModel 数组中找到对应的列

{ label: 'xx标题', name: 'title', index: 'title1', width: 80 ,sortable:false,formatter:function (cellvalue, options, rowObject) {
		return '<a href="https://www.xixxx.com/#/double_selection?dsId='+rowObject.id+'"  style="color: #437fff"  target="_blank">'+ cellvalue +'</a>';
}}
			,

2,在列表上添加请求方法
在colModel 数组中找到对应的列

{ label: '报名企业', name: 'companyNumber', index: 'company_number', width: 80 ,sortable:false,formatter:function (cellvalue, options, rowObject) {
					var comObj = JSON.stringify(rowObject);
					return  "<div style='color:#437FFF' class='self-col' onclick='vm.doSeeCompanyData("+comObj+")'>"+cellvalue+"</div>" ;
	}}
			,

doSeeCompanyData 就是请求的方法名称

3，添加弹框
在renren框架上添加弹框，引入的是layer.js，项目路径如下图所示。
在这里插入图片描述

引入layer.js的代码如下图所示
在这里插入图片描述
4，doSeeCompanyData方法，打开弹框，会在对应的hmtl页面打开 id为comContent元素内容，代码如下

doSeeCompanyData(row){
			vm.comSeaObj.companyName = '';
			vm.comSeaObj.dsId = row.id;
			// data: JSON.stringify(vm.top),
			vm.doReqCom();

			layer.open({
				type: 1 //Page层类型
				,area: '1000px'
				,title: 'hr信息'
				,offset: '10px'
				,shade: 0.6 //遮罩透明度
				,maxmin: false //允许全屏最小化
				,anim: 0 //0-6的动画形式，-1不开启
				,content: $('#comContent'),
				yes: function(){
				}
			});
		},