jqgrid项目使用笔记
function loadActData(){
$("#actGridTable").clearGridData();//首先清空表格内容
var url = webContext + ‘/act/getActivitiesData‘;//配置路径
$(‘#actGridTable‘).jqGrid({ //调用 jqgrid方法
url: url,
mtype: ‘post‘, //设置请求后台的方式
datatype: ‘json‘, //设置传输的数据类型
colNames: [‘活动ID‘,‘处理类型‘,‘活动名称‘,‘目标‘,‘创建日期‘,‘完成率‘,‘申请人ID‘, ‘申请人‘, ‘主办人ID‘,‘主办人‘,‘状态‘,‘操作‘],// 写出所有表头信息 ,
colModel: [ // 列的模型
{name: ‘maId‘, index:‘ma_id‘, key: true, hidden: true},//设置第一列的各种属性 指的是活动id name是值json数据传回来时里面的对应的key 真正放这的是值 例如:json是{maId,1} 那么放这里的就是1 index是进行排序时 请求(与交互)后台排序的列名 这里与数库中的字段名相匹配 key:true 是设置这是这个列的唯一标示 hidden:true 是指 此列为隐藏列 并不显示 但也站位colnames中的一个
{name: ‘dealType‘, index:‘deal_type‘, hidden: true},
/** 下面这个是指定宽度 单位是px formatter:function 是用来解决我们把一些数据库的数据 转换成其他想要的数据 连接等问题的
* 指定此方法一定有返回值 返回值可以是一个html文档 此方法含有sane参数 我们一般用最后面的参数居多
* rowData是指当前行的数据 获取方式 直接加上"." 列名即可(因为是js里面 他的本质原理也是讲json数据解析成了数组 数组中是键值对) options也可以用 下面的options.rowId 指的是我们的操作的行的主键(唯一标示)就是刚才的用(key=true)指定的maid列
* 由此就有回道了原生url传递参数 获取参数的问题了
*/
{name: ‘name‘, width:‘350‘, index: ‘name‘,formatter: function(cellvalue, options, rowData){
var dealType = rowData.dealType;//活动状态 。0：主活动 ；1：协同活动；2：邀约活动
var rowId = options.rowId;
var name = rowData.name;
var state = rowData.state;
//var temp=‘<a href="‘+webContext+‘/act/forwardActDetail?maId=‘+rowId+‘&actFlag=invite" >‘+name+‘</a>‘;
var temp=‘<a href="‘+webContext+‘/marketa/fowardEditActivity?maId=‘+rowId+‘&editFlag=edit" >‘+name+‘</a>‘;
if(2==state){//2：申请中；
temp=name;
}else if(3==state||2==dealType){//3：已拒绝
//}else if((3==state&&1==dealType)||2==dealType){//3：已拒绝
temp=name;
}
//var temp=‘<a href="‘+webContext+‘/marketa/fowardEditActivity?maId=‘+rowId+‘&editFlag=detail" >‘+name+‘</a>‘;
if(1==dealType){
temp = temp+‘<span class="label-act-xiezuo label-info">协作</span>‘;
}else if(2==dealType){
temp = temp+‘<span class="label-act-xiezuo label-info" style="background-color:#ffb915">邀约</span>‘;
}else if(4==dealType){
temp = ‘ |- ‘+temp;
}
return temp;
}},
{name: ‘points‘, width:‘120‘, index:‘points‘},
{name: ‘createTime‘, width:‘160‘, index:‘create_time‘},
{name: ‘conversionRate‘, width:‘120‘, index:‘conversion_rate‘,formatter: function(val){ //一个值的情况加 val指的是当前的值
var cellValue = val;
if(typeof (cellValue)!=‘undefined‘ && cellValue!=null){
cellValue = cellValue*100+‘%‘;
}else{
cellValue = cellValue+‘%‘;
}
return cellValue;
}},
{name: ‘createUserId‘, index:‘create_user_id‘,hidden: true},
{name: ‘createUserName‘, width:‘120‘, index:‘create_user_name‘},//申请人姓名
{name: ‘ownerUserId‘, index:‘owner_user_id‘,hidden: true},
{name: ‘ownerUserName‘, width:‘120‘, index:‘owner_user_name‘},
{name: ‘state‘, align:‘left‘, index:‘state‘,formatter: function(val){
var cellValue = val;//活动状态 。0：进行中 ；1：已结束；2：申请中；3：已拒绝
if(cellValue == 0){
cellValue = ‘<span class="act-table-acting">推广中</span>‘;
}else if(cellValue == 1){
cellValue = ‘<span class="act-table-end">已完成</span>‘;
}else if(cellValue == 2){
cellValue = ‘<span class="act-table-planing">策划中</span>‘;
}else if(cellValue == 3){
cellValue = ‘<span class="act-table-refuse">已拒绝</span>‘;
}
return cellValue;
}},
{name: ‘edit‘, align:‘left‘, sortable: false, formatter: function(cellvalue, options, rowData){
var rowId = options.rowId;
//需要根据记录的具体情况进行处理
var state = rowData.state;
var dealType = rowData.dealType;//处理类型 0：主活动 ；1：协同活动；2：邀约活动
//可用的按钮
var agree = ‘<a href="‘+webContext+‘/marketa/forwardCreateActivity?maId=‘+rowId+‘" title="接受" class="handle-col mr-left10" onclick="agreeActivity(‘+rowId+‘)">接受</a>‘;
var refuse = ‘<a href="javascript:;" title="拒绝" class="handle-col mr-left10" onclick="refuseActivity(‘+rowId+‘)" data-toggle="modal" data-target="#act_dialog">拒绝</a>‘;
var edit = ‘<a href="‘+webContext+‘/marketa/fowardEditActivity?maId=‘+rowId+‘&editFlag=edit" title="编辑" class="handle-col mr-left10" onclick="scanActivity(‘+rowId+‘)">编辑</a>‘;
//灰色的不可用按钮
var agree_ = ‘<span href="javascript:;" title="接受" class="handle-col-no mr-left10">接受</span>‘;
var refuse_ = ‘<span href="javascript:;" title="拒绝" class="handle-col-no mr-left10">拒绝</span>‘;
var edit_ = ‘<span href="javascript:;" title="编辑" class="handle-col-no mr-left10">编辑</span>‘;
var agreeChoose = ‘<a href="javascript:;" title="接受" class="handle-col mr-left10" onclick="agreeChoose(‘+rowId+‘)" data-toggle="modal" data-target="#choose_dialog">接受</a>‘;
//根据状态赋予按钮
if(2==dealType){//选择人
if(2>state){
//return refuse_+agreeChoose+edit_;
return edit_;
}else{
//return refuse_+agree_+edit_;
return edit_;
}
}else if(0==state){//活动状态 。0：进行中 ；
//return refuse_+agree_+edit;
return edit;
}else if(1==state){//1：已结束；
//return refuse_+agree_+edit_;
return edit_;
}else if(2==state){//2：申请中；
//return refuse+agree+edit_;
return edit_;
}else{//3：已拒绝
//return refuse_+agree_+edit_;
return edit_;
}
}},
],
jsonReader: { //server返回Json解析设定 因为他是个三方提供的pagelist对象 他里面的list存放的才是页面真正的数据
root: "list", //对于json中数据列表
page: "pageNum", //相当于 pageList.pageNum 取值给他了
total: "pages", //同上
records: "total",//总的记录数 (下面loadComplete中使用到了)
repeatitems: false,
},
beforeRequest: function () {//在请求数据之前
var postData = {}; // 传递参数准备!
postData.userId = loginUser.userId; //相当于 userId:XXX
postData.searchText = $(‘#searchText‘).val(); //获取查找框的值 searchText:查找内容
$.extend($("#actGridTable").getGridParam("postData"), postData);// 给grid函数加上这个postData属性 这个属性是指请求时的 用户参数
},
loadComplete: function(){//加载完成后
var re_records = $("#actGridTable").getGridParam(‘records‘);// 记录总数是多少
//alert(re_records);
if(re_records == 0 ){
$("#tishi").show();
}else{
$("#tishi").hide();
}
},
resizeable: true,
rownumbers: true,//显示记录条数
hidegrid: true,
//shrinkToFit:true,
viewrecords: true,//定义是否要显示总记录数
sortorder: ‘desc‘,//指定按升序还是倒序
sortname: ‘create_time‘,//指定排序列
height: "100%",
autowidth: true,
rowList: [10, 15, 20],//一个数组用来调整表格显示的记录数，此参数值会替代rowNum参数值传给服务器端。
rowNum: 15,// 默认一页显示15条
//caption: "组织列表",
pager: "#actGridPager"// 前后页
}).navGrid(‘#actGridPager‘, {add: false, edit: false, del: false, search: false, refresh: false});
//去掉水平滚动条
$(‘#actGridTable‘).closest(".ui-jqgrid-bdiv").css({ ‘overflow-x‘: ‘hidden‘ });
}