jQGrid的使用记录.

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)' onclick=\"prop('"+options.rowId+"')\"><i class='fa fa-search'></i>&nbsp;属性&nbsp&nbsp</a>"
                    + "<a href='getTree?portalId="+options.rowId+"'><i class='fa fa-eye'></i>&nbsp;查看树&nbsp&nbsp</a>"
                    + "<a href='getRelevanceUser?portalId="+options.rowId+"'><i class='fa fa-eye'></i>&nbsp;查看关联用户&nbsp&nbsp</a>";
                if(row.designerVersion == "条件1"){
                operations = operations +"<a href='portalDownLoad.do?portalId="+options.rowId+"'><i class='fa fa-download'></i>&nbsp;下载</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" }); 
        }
    });
});