jqGrid使用总结:实现的是斑马线格式,根据条件判断下载按钮是否显示. 后台传过来的是json字符串.
使用bootstrap的jqGrid,
$(document).ready(function () {
//从页面获取的数据
var gridWidth = $(".main-content").width();
var portals_Id = document.getElementById('portals_Id').value;var selectedForm = document.getElementById('selectedPortal').value;
$("#portaljqGrid").jqGrid({
url: 'findPortalsByGid',
datatype: "json",
mtype:"post",
postData:{portals_Id,selectedForm},
colNames: ["","","代码", "名称", "是否活动","所属门户组","门户来源","操作"],//列标题
colModel: [
{ name: 'id',
index: 'id',
key: true,
sorttype: "long",
editable: true,
search: false,
hidden: true,
hidedlg: true
},
{ name: 'portalsId',
index: 'portalsId',
sorttype: "long",
editable: true,
search: false,
hidden: true,
hidedlg: true
},
{ name: "code",
ndex: "code",
width: 0.1 * gridWidth,
editable: true,
align: "center",
editoptions: {
size: "20",
maxlength: "30"
}
},
{ name: "name",
index: "name",
width: 0.1 * gridWidth,
editable: true,
editoptions: {
size: "20",
maxlength: "30"
}
},
{ name: "setNoActive",
index: "setNoActive",
width: 0.1 * gridWidth,
editable: true,
editoptions: {
size: "20",
maxlength: "30"
}
},
{ name: "portalGroupCode",
index: "portalGroupCode",
width: 0.1 * gridWidth,
editable: true,
editoptions: {
size: "20",
maxlength: "30"
}
},
{ name: "designerVersion",
index: "designerVersion",
width: 0.1 * gridWidth,
editable: true,
editoptions: {
size: "20",
maxlength: "30"
}
},
{ name: 'portalsId',
width: 0.15 * gridWidth,
formatter: function(value, options, row){
debugger;
var operations = "<a href='javascript:void(0)' οnclick=\"prop('"+options.rowId+"')\"><i class='fa fa-search'></i> 属性  </a>"
+ "<a href='getTree?portalId="+options.rowId+"'><i class='fa fa-eye'></i> 查看树  </a>"
+ "<a href='getRelevanceUser?portalId="+options.rowId+"'><i class='fa fa-eye'></i> 查看关联用户  </a>";
if(row.designerVersion == "条件1"){
operations = operations +"<a href='portalDownLoad.do?portalId="+options.rowId+"'><i class='fa fa-download'></i> 下载</a>";
}
return operations;
}},
],
viewrecords: true,
height: 480,
rowNum: 10,
rowList : [10,30,50],
rownumbers: true,
rownumWidth: 25,
autowidth:true,
multiselect: true,
altRows: true,
multiboxonly: true,
pager: "#portaljqGridPager",
loadComplete : function() {
var table = this;
setTimeout(function() {
updatePagerIcons(table);
}, 0);
},
gridComplete:function(){
//隐藏grid底部滚动条
$("#portaljqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
}
});
});