java - JQgrid 中列之间的粗体线

Question

我正在尝试将我正在处理的 JQgrid 上的列之间的线条加粗。我试图在 Special、Exit、Buyback、Reset、New 和其他粗体之前获取列行。如有任何帮助，我们将不胜感激

 $("#departmentGrid").jqGrid({  
    datatype: 'jsonstring',
    datastr : departmentData,
    colNames:['SVP', 'Dept','Mkt Inact OH $','% to Ttl', 'Special', '% to Ttl', 'Exit','% to Ttl','Buyback','% to Ttl','Reset','% to Ttl','New’,'% to Ttl', 'Other','% to Ttl'],
    colModel:[
          {name:'svp',index:'svp', sorttype:'int', width:'5', align:'left', editoptions: {border: '3'}},
          {name:'dept',index:'dept', sorttype:'int', width:'2', align:'left'},
          {name:'mktDollars',index:'mktDollars', sorttype:'int', width:'4', align:'right'},
          {name:'mktPercent',index:'mktPercent', sorttype:'int', width:'2', align:'center'},
          {name:'rsn',index:'rsnCdSpecBuy', sorttype:'int', width:'3', align:'right'},
          {name:'rsnCdSpecBuyPercent',index:'rsnCdSpecBuyPercent', sorttype:'int', width:'2', align:'center'},
          {name:'exit',index:'exit', sorttype:'int', width:'2', align:'right'},
          {name:'exitPercent',index:'exitPercent', sorttype:'int', width:'2', align:'center'},
          {name:'buyback',index:'buyback', sorttype:'int', width:'2', align:'right'},
          {name:'buybackPercent',index:'buyback', sorttype:'int', width:'2', align:'center'},
          {name:'reset',index:'reset', sorttype:'int', width:'2', align:'right'},
          {name:'resetPercent',index:'resetPercent', sorttype:'int', width:'2', align:'center'},
          {name:'new',index:'newSku', sorttype:'int', width:'2.5', align:'right'},
          {name:'newPercent',index:'newPercent', sorttype:'int', width:'2', align:'center'},
          {name:'other',index:'other', sorttype:'int', width:'2', align:'right'},
          {name:'otherPercent',index:'otherPercent', sorttype:'int', width:'2', align:'center'},
      ],
    jsonReader: {
        root: "results",
        repeatitems: false
    },
    gridview: true,
    altRows: false,
    sortorder: "asc",
    height:'auto',
    selrow:true,
    autowidth: true,
    title:true,
    caption:false,

    loadComplete: function(){
         var rowIDs = jQuery("#departmentGrid").getDataIDs(); 
         var allRowsOnCurrentPage = $('file-grid').jqGrid('getDataIDs'); 


         for (var i=0;i<rowIDs.length;i=i+1){ 
            rowData=jQuery("#departmentGrid").getRowData(rowIDs[i]);
            var trElement = jQuery("#"+ rowIDs[i],jQuery('#departmentGrid'));
            if (rowData.dept == "") { 
                trElement.addClass('total_row');
            }

            if(rowData.svp != ""){
                trElement.addClass('svp_row');
            }
          }

      }
});

Answer 1

不确定这是否是最好的方法，但我知道这是有效的:

编写您想要的CSS，然后添加loadComplete(或gridComplete)函数并使用该CSS样式设置您想要的单元格。这是 psedu 代码，未经测试。

loadComplete: function (d) {
    $.each(d.rows, function (i, item) {
        var i = d.rows[i].id;
        jQuery('#' + i).addClass("new_css_border_name");
    });
}

您只需添加代码来检查您要应用的条件。