Js 向表單中添加多個元素

標籤：擷取   etc   extend   void   post   bag   ini   btn   com   

@{    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();      　　　}      });}

以上代碼均可實現給表單添加對象元素。

Js 向表單中添加多個元素