jqGrid列表

一、增加行背景色

gridComplete: function () {
    var rows = $("#datagridId").getDataIDs();
    for (var i = 0; i < rows.length; i++) {
        //列表某个字段判断条件
        var progress = $("#datagridId").getCell(rows[i], "progress");
        if ("01" == progress) {
            $("#datagridId").jqGrid('setRowData', rows[i], false, {
                background: '#FF8C8C',
            });
            //修改行字体颜色
            ("#" + rows[i] + " td").css("color", "black")
        }
    }
}

二、增加横向滚动条

1、jqGrid属性 shrinkToFit： false,

2、$("#datagridId").closest(".ui-jqgrid-bdiv").css({"overflow-x": "scroll",});

三、列表增加背景色和修改列表字体颜色

var dataGridColModel = [
    {label: 'id', name: 'id', key: true, width: 75, hidden: true},
    {label: '比例', name: 'percentage', cellattr: percentageCellattr, formatter: percentageFormatter},
]
//比例背景色
function percentageCellattr(cellValue, option, rowObj) {
    if (Number(rowObj.percentage.replace("%", "")) < Number("50%".replace("%", ""))) {
        return "style='background-color: red;'";
    } else {
        return "style='background-color: green;'";
    }
}
//比例字体
function percentageFormatter(cellValue, option, rowObj) {
    return "<font color='black' >" + rowObj.percentage + "</font>"
}

四、列表增加CSS样式

<style>
   .lineWrap{
       white-space: normal;
    }
</style>

var dataGridColModel = [
    {label: 'id', name: 'id', key: true, width: 75, hidden: true},
    {label: '比例', name: 'percentage',classes:"lineWrap"}
]

五、jqGrid列表textarea文本框内容换行

<style>
   .ui-jqgrid .ui-jqgrid-btable tbody tr.jqgrow td{
       white-space: normal;
   }
</style>
/* 如果列表固定某个字段换行，则在列表字段单独加CSS样式，参考四 */

 六、jqGrid格式化列表属性的值

formatCell: function (rowid, cellname, value, iRow, iCol) {
    $(this).jqGrid('setColProp', cellname, {editoptions: {value: ''}});
    $(this).jqGrid('setColProp', cellname, {editoptions: {value: valueData}});
},

七、jqGrid中改变表格中列悬浮框的显示

$("#grid").jqGrid({
   ...
   colModel: [
      { name:'column1', index:'column1', width:250, formatter:tooltipVal},
      { name:'column2', index:'column2', width:250, formatter:changeTooltipVal}
   ],
   ...
});

1、鼠标悬浮上去字符串根据固定字数换行显示
function tooltipVal(value, options, rowObject) {
    // 每个子字符串包含的字符数量
    var count = 5;
    var tooltipContent = '';
    var l = value.length;
    for (let i = 0; i < Math.ceil(l / count); i++) {
        let startIndex = i * count;
        let endIndex = startIndex + count;
        if (endIndex > l) {
           endIndex = l;
        }
        tooltipContent += value.substring(startIndex, endIndex) + '\n'
    }
    return "<span title='" + tooltipContent + "' class='autotip'>" + value + "</span>"
}
/* 如果列表也要固定字数去换行，return返回的value改为tooltipContent  */

2、jqGrid中改变表格中列悬浮框的显示
function changeTooltipVal(cellvalue,options,rowObject){
    return "<span title='"+'审核说明：'+rowObject.column1+"' class='autotip'>"+rowObject.column2+"</span>"
}

八、jqGrid常用获取数据方法

1.获取当前页码：$('#gridTable').getGridParam('page');

2.获取总页数：$('#gridTable').getGridParam('lastpage');

3.获取所有数据总条数：$('#gridTable').getGridParam('records');

4.获取当前页所有id：$('#gridTable').jqGrid('getDataIDs'); 或者 $("#gridTable").getDataIDs();

5.获取当前页所选id：$('#gridTable').jqGrid('getGridParam', 'selarrrow');

6.根据id获取行数据：$('#gridTable').jqGrid('getRowData',id); 或者 $('#gridTable').getRowData(id);

7.获取单元格数据：$("#gridTable").jqGrid('getCell',id,colnum);

8.设定行选择：$("#gridTable").jqGrid('setSelection',id);

九、获取jqGrid列数据

        1、获取一列值,以数组形式返回(当为false时，返回的数组中只包含列的值)

var colArray= $(_self._datagridId).getCol("taskNoValue",false);

返回值：['RW202403070001-0', 'RW202401310002-0', 'RW202401310001-0', 'RW202401310001-0', 'RW202401310001-0']

        2、获取一列值,以数组形式返回.(当为true时返回数组是对象数组，具体格式 {id:rowid, value:cellvalue} 

var colArray1 =$(_self._datagridId).getCol("taskNoValue", true)

返回值：[{"id":"1","taskNo":"RW202403070001-0"},{"id":"2","value":"RW202401310002-0"},{"id":"3","value":"RW202401310001-0"},{"id":"4","value":"RW202401310001-0"},{"id":"5","value":"RW202401310001-0"}]

        3、 获取列中最大值,最小值等等 

 var min= $("#gridRakuData").getCol("chk",false,'min');
 var max= $("#gridRakuData").getCol("chk",false,'max');