[JavaScript]jqGrid使用总结二

浏览数：20 / 时间：2015年06月08日

关键代码：

/// <reference path="jquery.jqGrid-4.4.3/js/jquery.jqGrid.src.js" />
$.jgrid.extend({
    initBase: function (height, width, colNames, colModel, caption) {
        /// <summary>
        /// 初始化基本的本地数据jqGird
        /// </summary>
        /// <param name="height">高度</param>
        /// <param name="width">宽度</param>
        /// <param name="colNames">列名称集合</param>
        /// <param name="colModel">列名称绑定集合</param>
        /// <param name="caption">标题</param>
        var jGrid = $(this);
        jGrid.jqGrid({
            datatype: "json",
            height: height,
            width: width,
            colNames: colNames,/*列名称*/
            colModel: colModel,
            multiselect: false,
            caption: caption
        });
    },
    blinkRow: function (rowId, blinks, changeColor) {
        /// <summary>
        /// 闪烁行
        /// </summary>
        /// <param name="rowId">行索引</param>
        /// <param name="blinks">闪烁次数</param>
        /// <param name="changeColor">闪烁颜色</param>
        var jGrid = $(this);
        var delay = 500;
        var blinkCnt = 0;
        var curr = false;
        var rr = setInterval(function () {
            var color;
            if (curr === false) {
                color = changeColor;
                curr = color;
            } else {
                color = ‘‘;
                curr = false;
            }
            jGrid.setRowData(rowId, false, { background: color });
            if (blinkCnt >= blinks * 2) {
                blinkCnt = 0;
                clearInterval(rr);
                jGrid.setRowData(rowId, false, { background: ‘‘ });
            } else {
                blinkCnt++;
            }
        }, delay);
    },
    updateBlinkRow: function (rowId, data, blinks, changeColor) {
        /// <summary>
        /// 更新行，并闪烁
        /// <para>参考：http://blog.valqk.com/archives/jqGrid-update-row-and-blink-highlight-it-58.html </para>
        /// </summary>
        /// <param name="rowId">行索引</param>
        /// <param name="data">行数据</param>
        /// <param name="blinks">闪烁次数</param>
        /// <param name="changeColor">闪烁颜色</param>
        var jGrid = $(this);
        jGrid.setRowData(rowId, data);
        var delay = 500;
        var blinkCnt = 0;
        var curr = false;
        var rr = setInterval(function () {
            var color;
            if (curr === false) {
                color = changeColor;
                curr = color;
            } else {
                color = ‘‘;
                curr = false;
            }
            jGrid.setRowData(rowId, false, { background: color });
            if (blinkCnt >= blinks * 2) {
                blinkCnt = 0;
                clearInterval(rr);
                jGrid.setRowData(rowId, false, { background: ‘‘ });
            } else {
                blinkCnt++;
            }
        }, delay);
    },
    addList: function (jsondb) {
        /// <summary>
        /// 添加行数据集合
        /// </summary>
        /// <param name="jsondb">json数据</param>
        var jGrid = $(this);
        jGrid.setGridParam({ data: jsondb }).trigger(‘reloadGrid‘);
    },
    highlightRow: function (rowIndex, color) {
        /// <summary>
        /// 为行增加highlight效果，默认2000毫米
        /// </summary>
        /// <param name="rowIndex">行索引</param>
        /// <param name="color">颜色</param>
        var jGrid = $(this);
        var id = jGrid.selector;
        jQuery("#" + rowIndex, id).effect("highlight", { color: color }, 2000);
    },
    getRowDataByColNameValue: function (colName, colValue) {
        /// <summary>
        /// 根据列名称以及列值查找行数据
        /// </summary>
        /// <param name="colName">列名称</param>
        /// <param name="colValue">列值</param>
        /// <returns type="">行数据</returns>
        var jGrid = $(this);
        var data = jGrid.getRowData();
        if (data) {
            for (var i = 0; i < data.length; i++) {
                var rowData = data[i];
                if (rowData.hasOwnProperty(colName) && rowData[colName] == colValue) {
                    return rowData;
                }
            }
        }
    },
    getRowIndex: function (colName, colValue) {
        /// <summary>
        /// 根据列名称以及列值查找所在行
        /// </summary>
        /// <param name="colName">列名称</param>
        /// <param name="colValue">列值</param>
        /// <returns type="">所在行，若没有找到则返回-1</returns>
        var jGrid = $(this);
        var ids = jGrid.getDataIDs();
        for (var i = 0; i < ids.length; i++) {
            var rowId = ids[i];
            var rowData = jGrid.getRowData(rowId);
            if (rowData.hasOwnProperty(colName) && rowData[colName] == colValue) {
                return rowId;
            }
        }
        return -1;
    },
    getCellIndex: function (cellName) {
        /// <summary>
        /// 根据列名称获取列索引
        /// </summary>
        /// <param name="cellName">列名称</param>
        /// <returns type="">列名称对应的索引，若没找到则返回-1</returns>
        var jGrid = $(this);
        var cells = jGrid.getGridParam(‘colModel‘);
        if (cells) {
            for (var i = 0; i < cells.length; i++) {
                var cell = cells[i];
                if (cell.name == cellName) {
                    return i;
                }
            }
        }
        return -1;
    },
    blinkCell: function (rowIndex, cellIndex, blinks, changeColor) {
        /// <summary>
        /// 闪烁单元格
        /// </summary>
        /// <param name="rowIndex">行索引</param>
        /// <param name="cellIndex">列索引</param>
        /// <param name="blinks">闪烁次数</param>
        /// <param name="changeColor">闪烁颜色</param>
        var jGrid = $(this);
        var delay = 500;
        var blinkCnt = 0;
        var curr = false;
        var rr = setInterval(function () {
            var color;
            if (curr === false) {
                color = changeColor;
                curr = color;
            } else {
                color = ‘‘;
                curr = false;
            }
            jGrid.setCell(rowIndex, cellIndex, ‘‘, { background: color });
            if (blinkCnt >= blinks * 2) {
                blinkCnt = 0;
                clearInterval(rr);
                jGrid.setCell(rowIndex, cellIndex, ‘‘, { background: ‘‘ });
            } else {
                blinkCnt++;
            }
        }, delay);
    }
});

示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jqGrid 4.4.3 Demo</title>
    <script src="jquery.jqGrid-4.4.3/js/jquery-1.7.2.min.js"></script>
    <script src="jquery-ui-1.11.1.custom/jquery-ui.min.js"></script>
    <link href="jquery-ui-1.11.1.custom/jquery-ui.min.css" rel="stylesheet" />
    <link href="jquery.jqGrid-4.4.3/src/css/ui.jqgrid.css" rel="stylesheet" />
    <script src="jquery.jqGrid-4.4.3/js/jquery.jqGrid.src.js"></script>
    <script src="jquery.jqGrid-4.4.3/js/i18n/grid.locale-cn.js"></script>
    <script src="yjqGridUtils.js"></script>
    <script type="text/javascript">
        function initBase() {
            var colNames = [‘序号‘, ‘箱名称‘, ‘回路名称‘, ‘启用‘, ‘回路控制(DO)‘, ‘回路(DI)‘, ‘是否上锁‘, ‘运行方式‘];
            var colModel = [
                     { name: ‘CID‘, index: ‘CID‘, width: 120 },
                     { name: ‘CCabName‘, index: ‘CCabName‘, width: 120 },
                     { name: ‘CChName‘, index: ‘CChName‘, width: 120 },
                     { name: ‘CEnable‘, index: ‘CEnable‘, width: 120 },
                     { name: ‘CDoValue‘, index: ‘CDoValue‘, width: 80 },
                     { name: ‘CDiValue‘, index: ‘CDiValue‘, width: 80 },
                     { name: ‘CIsLocked‘, index: ‘CIsLocked‘, width: 80 },
                     { name: ‘CRunType‘, index: ‘CRunType‘, width: 80 }
            ];
            var jqrid = $(‘#ctuStatus‘);
            jqrid.initBase(300, 800, colNames, colModel, ‘测试‘);
            for (var i = 0; i < 10; i++) {
                var item = { CID: i, CCabName: ‘测试‘ + i, CChName: ‘回路‘ + i, CEnable: ‘可用‘, CDoValue: ‘打开‘, CDiValue: ‘打开‘, CIsLocked: ‘锁定‘, CRunType: ‘自主运行‘ };
                jqrid.addRowData(i, item);
            }
        }
        function updateBlinkRow() {
            var jqrid = $(‘#ctuStatus‘);
            for (var i = 0; i < 10; i++) {
                var item = { CID: i, CCabName: ‘测试‘ + i, CChName: ‘回路‘ + i, CEnable: ‘可用‘, CDoValue: ‘打开‘, CDiValue: ‘打开‘, CIsLocked: ‘锁定‘, CRunType: ‘自主运行‘ };
                jqrid.updateBlinkRow(i, item, 3, ‘green‘);
            }
        }
        function highlightRow() {
            var jqrid = $(‘#ctuStatus‘);
            jqrid.highlightRow(3, ‘red‘);
        }
        function getRowDataByColNameValue() {
            var jqrid = $(‘#ctuStatus‘);
            var rowdata = jqrid.getRowDataByColNameValue(‘CID‘, 1);
            if (rowdata) {
                alert(‘fined:‘ + rowdata.CCabName);
            }
            else {
                alert(‘not fined.‘);
            }
        }
        function getRowIndex() {
            var jqrid = $(‘#ctuStatus‘);
            var rowIndex = jqrid.getRowIndex(‘CID‘, 1);
            alert(rowIndex);
        }
        function getCellIndex() {
            var jqrid = $(‘#ctuStatus‘);
            var cellIndex = jqrid.getCellIndex(‘CEnable‘);
            alert(cellIndex);
        }
        function blinkRow() {
            var jqrid = $(‘#ctuStatus‘);
            jqrid.blinkRow(3, 10, ‘red‘);
        }
        function blinkCell() {
            var jqrid = $(‘#ctuStatus‘);
            jqrid.blinkCell(3, 3, 10, ‘green‘);
        }
    </script>
</head>
<body>
    <table id="ctuStatus"></table>
    <br />
    <input id="Button1" type="button" value="initBase" onclick="initBase()" />
    <input id="Button2" type="button" value="updateBlinkRow" onclick="updateBlinkRow()" />
    <input id="Button3" type="button" value="highlightRow" onclick="highlightRow()" />
    <input id="Button4" type="button" value="getRowDataByColNameValue" onclick="getRowDataByColNameValue()" />
    <input id="Button5" type="button" value="getRowIndex" onclick="getRowIndex()" />
    <input id="Button6" type="button" value="getCellIndex" onclick="getCellIndex()" />
    <input id="Button7" type="button" value="blinkRow" onclick="blinkRow()" />
    <input id="Button8" type="button" value="blinkCell" onclick="blinkCell()" />
</body>
</html>