[JavaScript]jqGrid使用总结

最近在项目中使用了jqGrid，都是最基本的使用，所以总结下，。

1.添加Js引用：

    <link href="js/JQury/jquery-ui-1.11.1.custom/jquery-ui.min.css" rel="stylesheet" />
    <link href="js/JQury/jquery.jqGrid-4.4.3/css/ui.jqgrid.css" rel="stylesheet" />
    <script src="js/JQury/jquery.jqGrid-4.4.3/js/jquery-1.7.2.min.js"></script>
    <script src="js/JQury/jquery-ui-1.11.1.custom/jquery-ui.min.js"></script>
    <script src="js/JQury/jquery.jqGrid-4.4.3/js/jquery.jqGrid.min.js"></script>
    <script src="js/JQury/jquery.jqGrid-4.4.3/js/i18n/grid.locale-cn.js"></script>

2.jqGrid设置，这里我们使用的是本地数据源：

        function createLatLngTable() {
            /// <summary>
            /// 创建经纬度表格
            /// </summary>
            jQuery("#list4").jqGrid({
                datatype: "local",
                height: 300,
                colNames: [‘序号‘, ‘经度‘, ‘纬度‘],/*列名称*/
                colModel: [
                    { name: ‘id‘, index: ‘id‘, width: 40 },
                    { name: ‘lat‘, index: ‘lat‘, width: 120 },
                    { name: ‘lng‘, index: ‘lng‘, width: 120 }
                ],
                multiselect: false,
                caption: "批量生成经纬度",
            });
        }

  <table id="list4"></table>

.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; }3.添加数据（黄色背景部分）

            for (var i = 1; i <= mNum; i++) {
                var xdiff_rate = parseFloat(xdiff * (i / (mNum + 1)));
                var ydiff_rate = parseFloat(ydiff * (i / (mNum + 1)));
                var m_xlat = parseFloat(x1) + xdiff_rate
                var m_ylng = parseFloat(y1) + ydiff_rate
                var marker = createMarker(m_ylng, m_xlat);
                marker.id = i;
                var item = { ‘id‘: i, ‘lat‘: m_xlat, ‘lng‘: m_ylng };
                jQuery("#list4").jqGrid(‘addRowData‘, i, item);
                marker.type = ‘builder‘;
            }

.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; }

4.清空数据源：

$("#list4").clearGridData();

5.删除行（黄色背景部分）：

            google.maps.event.addListener(marker, ‘rightclick‘, function (e, ee, mk) {
                var finded = GmapUtils.marker.finded(e.latLng);
                if (finded) {
                    var id = finded.id;
                    if (id) {
                        $("#list4").jqGrid("delRowData", id);
                    }
                    GmapUtils.removeMarker(finded);
                }
            });

.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; }

6.修改数据行（黄色背景部分）：

                google.maps.event.addListener(marker, ‘dragend‘, function (e) {
                    var id = e.currentTarget.id;
                    var item = { ‘id‘: id, ‘lat‘: e.currentTarget.point.lat, ‘lng‘: e.currentTarget.point.lng };
                    $("#list4").setRowData(id, item);
                    $("#list4").setSelection(id)
                })

.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; }

效果：

希望有所帮助，谢谢！