Js 向表单中添加多个元素

Posted 2020-09-28 BadGirl_Xiao

@{
    ViewBag.title = "地图导航";
}

@model  YT.XWAJ.Public.Application.MapNavigation.Dto.MapNavigationManagementDto
<div class="easyui-layout" data-options="fit: true,border: false">
    <div data-options="region:‘north‘" style="height:80px">
        <div class="form-show">
            <div class="form" style="width: 100%;overflow:auto; padding:10px 15px 5px;">
                <form  id="form" method="post">
                    <div class="form-row col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <div class="form-row col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <div class="form-title">导航名称<span class="red"></span></div>
                            <div class="form-value">
                                <input class="easyui-validatebox form-control" type="text" name="MapNavigationName" value="@Model.MapNavigationName" />
                            </div>
                        </div>
                        <div class="form-row col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <div class="form-title">排序<span class="red"></span></div>
                            <div class="form-value">
                                <input class="easyui-validatebox form-control" type="number" name="Sort" value="@Model.Sort" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div region="center">
        <!--地图-->
        <div id="mmap" style="width: 100%;height: 100%;" param="tileUrl:googleWeb;bounds:67.5 0 157.5 67.5;backgroundColor:#FFFEE9;zoom:5;sliceZoom:5;maxZoom:19;minZoom:5;fullZoom:5;mapTilesWidth:2048;mapTilesHeight:1536;errorImg:/scripts/webgis/mxImg/blank.png;mapTilesExtendPixel:0"></div>
    </div>
    <div data-options="region: ‘south‘,height: 45">
        <div class="form-row dlgButRow">
            <div class="pull-left">
                <input type="checkbox" id="chked" checked="checked" class="chk" />确认并关闭窗口
            </div>
            <div class="pull-right">
                <a href="javascript:void(0)" class="btn btn-success" onclick="javascript: window.page.onSave();"><span class="icon icon-save"></span>保存</a>
                <a href="javascript:void(0)" class="btn btn-default" onclick="javascript: window.page.close();"><i class="icon icon-remove"></i>关闭</a>
            </div>
        </div>
    </div>
</div>
@section scripts
{
    <script src="/scripts/jquery/jquery-1.11.3.min.js"></script>
    <script src="/scripts/common/base.js"></script>
    <!-- 地图 -->
    <script src="/scripts/webgis/mxlib/MapHost.js"></script>
    <script src="/scripts/webgis/mxlib/snap.svg-min.js"></script>
    <script src="/scripts/webgis/mxlib/api.min.js"></script>
    <script src="/scripts/webgis/mxlib/Mapv.min.js"></script>
    <script src="/scripts/webgis/mxlib/RectSearchCmd.js"></script>
    <script src="/scripts/map/mapApi.js"></script>
    <script src="/visualization/js/map.js"></script>
    <script type="text/javascript">
        (function () {
            var config = {
                /*是否显示CAD*/
                showCAD: false,
                /*地图显示模型*/
                mapModel: ‘satellite‘, //"web","satellite","proCad"
                /*地图初始参数*/
                mapParams: {
                    x: 119.47353798201721, y: 36.84729076181995,
                    zoom: 12, maxZoom: 14,
                    control: { enabled: true, position: MX_ANCHOR_TOP_LEFT }
                },
                labelStyle: {
                    background: ‘transparent‘,
                    color: "#33ffbb",
                    fontSize: "16px",
                    border: ‘0px solid #ccc‘,
                    height: "20px",
                    lineHeight: "20px",
                    fontFamily: "微软雅黑"

                },
                markerType: {
                    sensor: "传感器",
                    video: "视频",
                    enterprise: "企业",
                    danger: "危化品",
                    hazard: "危险源",
                    shelter: "避难场所",
                    firehouse: "消防队",
                    medical: "医疗机构",
                    communication: "通讯保障",
                    technique: "技术支持",
                    transport: "运输保障"
                }
            };
            var page = {
                load: function () {
                    page.initMap();//显示地图
                },
                //创建和初始化地图函数：
                initMap:function () {
                    var maps = page.maps = new visualMap({
                        el: ‘mmap‘,
                        mapParams: config.mapParams,
                        showCAD: config.showCAD,
                        labelStyle: config.labelStyle,
                        markerType: config.markerType,
                        mapModel: config.mapModel
                    });


                },
                //保存
                onSave: function () {
                    //获取中心点及缩放级别
                    var zoom = page.maps.maps._map.getZoom(),
                        centerPoint = page.maps.maps._map.getCenter();
                    //console.log(zoom);
                    //console.log(centerPoint);
                    var data = $("#form").serializeArray();
                    data.push(
                        {
                            name: ‘Hierarchy‘,
                            value:zoom 
                        },{
                            name: "CentraLongitude",
                            value: centerPoint.x
                        }, {
                            name: "CenterLatitude",
                            value: centerPoint.y
                        }
                    );
                    console.log(data);

                    /*
                    $.post(‘/api/services/public/mapNavigation/EditMapNavigationManagement‘,
                        {
                            MapNavigationName: $(‘input[name="MapNavigationName"]‘).val(),
                            CentraLongitude: centerPoint.x,
                            CenterLatitude: centerPoint.y,
                            Hierarchy: zoom,
                            Sort: $(‘input[name="Sort"]‘).val()
                        },
                        function (result) {
                            $.closeParentWindow();
                        });
                        */

                    $.ajax({
                        type: "POST",
                        url: ‘/api/services/public/mapNavigation/EditMapNavigationManagement‘,
                        data: data,
                        success: function (result) {
                            $.closeParentWindow();
                        }
                    });

                },

                //刷新
                onRefresh: function() {
                    $("#datagrid").datagrid(‘reload‘);
                },
                //取消
                close: function () {
                    $.closeParentWindow();
                }
            };
            $(page.load);
            window.page = page;
        }());
    </script>
}

View Code

上边代码无法正常运行。

但是期间遇到一个问题：就是页面只把表单中的数据遍历了，地图中获取的值没有传回后台， 因此我们有两种办法可以实现将值传回后台： 方法如下

1、这种方式如果穿的之多的情况下 不太好。

$.post(‘/api/services/public/mapNavigation/EditMapNavigationManagement‘,
     {
       MapNavigationName: $(‘input[name="MapNavigationName"]‘).val(),
       CentraLongitude: centerPoint.x,
       CenterLatitude: centerPoint.y,
       Hierarchy: zoom,
       Sort: $(‘input[name="Sort"]‘).val()
     },
  function (result) {
       $.closeParentWindow();
  });

2、下边的方法是给data.push元素  以下push了三个对象。 （需看接口返回的格式）

//保存
onSave: function () {
      //获取中心点及缩放级别
      var zoom = page.maps.maps._map.getZoom(),
      centerPoint = page.maps.maps._map.getCenter();
      //console.log(zoom);
      //console.log(centerPoint);
      var data = $("#form").serializeArray();
      data.push(
           {
               name: ‘Hierarchy‘,
               value:zoom 
           },{
               name: "CentraLongitude",
               value: centerPoint.x
           }, {
               name: "CenterLatitude",
               value: centerPoint.y
           }
      );
      console.log(data);
      $.ajax({
           type: "POST",
           url: ‘/api/services/public/mapNavigation/EditMapNavigationManagement‘,
           data: data,
           success: function (result) {
           　　$.closeParentWindow();
      　　　}
      });
}

以上代码均可实现给表单添加对象元素。