[JavaScript]jqGrid使用总结

标签：style   blog   http   color   io   os   使用   ar   java   

最近在项目中使用了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>

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

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

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

效果：

希望有所帮助，谢谢！

[JavaScript]jqGrid使用总结

标签：style   blog   http   color   io   os   使用   ar   java   

原文地址：http://www.cnblogs.com/Yan-Zhiwei/p/4021723.html