[JavaScript]jqGrid使用总结二

关键代码：

/// <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>.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }

效果：

希望有所帮助！

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

时间： 2024-10-18 10:58:54

[JavaScript]jqGrid使用总结二的相关文章

javascript系列之DOM(二)

原生DOM扩展 我们接着第一部分来说,上文提到了两种常规的DOM操作:创建文档片段和遍历元素节点.我们知道那些雨后春笋般的库,有很大一部分工作就是提供了一些优秀 的DOM操作API.可见原生的一些方法和属性,还不能很灵活快捷的来完成我们所希望的操作.下面将总结出总结出几种很实用的扩展方法.包括 after()和before(), A:after()和before() 1 function after(elem){ 2 if(this.parentNode){ 3 this.parentNode.

javascript基础学习（二）

javascript的数据类型 学习要点: typeof操作符 五种简单数据类型:Undefined.String.Number.Null.Boolean 引用数据类型:数组和对象 一.typeof操作符 typeof操作符用来检测变量的数据类型,操作符可以操作变量也可以操作字面量. 对变量或值运用typeof操作符得到如下值: undefined----如果变量是Undefined类型: boolean-------如果变量是Boolean类型: number-------如果变量是Numbe

全栈JavaScript之路（ 二十四 ）DOM2、DOM3, 不涉及XML命名空间的扩展

(一)DocumentType 类型的变化新增三个属性: publicId,systemId,internalSubset(内部子集) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" [<!ELEMENT name (#PCDATA)>] > 通过, document.doc

Javascript面向对象编程（二）：构造函数的继承

这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function Cat(name,color){ this.name = name; this.color = col

全栈JavaScript之路（ 二十三 ）DOM2、DOM3, 涉及XML命名空间的扩展(一)

<!DOCTYPE html> <xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"> <head> <title>Example XHTML page</title> </head> <body> <s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.1&

Javascript 正确使用方法 二

好的,废话不多说,接着上篇来. 变量(variables) 始终使用 var 关键字来定义变量,如果不这样将会导致 变量全局化,造成污染. //bad superPower = new SuperPower(); //good var superPower = new SuperPower(); 使用 一个 var关键字来定义多个变量...并且每个变量一行.. // bad var items = getItems(); var goSportsTeam = true; var dragonba

JQuery日记6.5 Javascript异步模型（二）

mnesia在频繁操作数据的过程可能会报错:** WARNING ** Mnesia is overloaded: {dump_log, write_threshold},可以看出,mnesia应该是过载了.这个警告在mnesia dump操作会发生这个问题,表类型为disc_only_copies .disc_copies都可能会发生. 如何重现这个问题,例子的场景是多个进程同时在不断地mnesia:dirty_write/2 mnesia过载分析 1.抛出警告是在mnesia 增加dump

Javascript常用方法函数收集(二)

Javascript常用方法函数收集(二) 31.判断是否Touch屏幕 function isTouchScreen(){ return (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch); } 32.判断是否打开视窗 function isViewportOpen() { return !!document.getElementById('wixMobileV

全栈JavaScript之路（ 二十 ）HTML5 插入 html标记 （ 二 ）insertAdjacentHTML

insertAdjacentHTML(),  这个方法也是在IE中最早出现的,现在已纳入html5规范,它接受两个参数,一个是下列的标记之一,一个是要写入的 html 代码文本. beforebegin , (英文为开始之前的意思)在当前元素之前插入一个新的紧邻的同辈元素 afterbegin,(英文为开始之后的意思)在当前元素之下插入一个子元素,或者是在当前元素的第一个子元素之前插入一个新的子元素. beforeend,(英文为结束之前的意思)在当前元素之后插入一个新的子元素,或者在当前元素最