jqGrid列表

1、增加行背景色

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")
        }
    }
}

2、增加横向滚动条

1、jqGrid属性 shrinkToFit: false,

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

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

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 "" + rowObj.percentage + ""
}

4、列表增加CSS样式

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

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


/* 如果列表固定某个字段换行,则在列表字段单独加CSS样式,参考4 */

你可能感兴趣的:(jquery,前端,javascript)