首页 > 代码库 > Js 向表单中添加多个元素
Js 向表单中添加多个元素
@{ 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="http://www.mamicode.com/@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="http://www.mamicode.com/@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="http://www.mamicode.com/scripts/jquery/jquery-1.11.3.min.js"></script> <script src="http://www.mamicode.com/scripts/common/base.js"></script> <!-- 地图 --> <script src="http://www.mamicode.com/scripts/webgis/mxlib/MapHost.js"></script> <script src="http://www.mamicode.com/scripts/webgis/mxlib/snap.svg-min.js"></script> <script src="http://www.mamicode.com/scripts/webgis/mxlib/api.min.js"></script> <script src="http://www.mamicode.com/scripts/webgis/mxlib/Mapv.min.js"></script> <script src="http://www.mamicode.com/scripts/webgis/mxlib/RectSearchCmd.js"></script> <script src="http://www.mamicode.com/scripts/map/mapApi.js"></script> <script src="http://www.mamicode.com/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 = http://www.mamicode.com/$("#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> }
上边代码无法正常运行。
但是期间遇到一个问题:就是页面只把表单中的数据遍历了,地图中获取的值没有传回后台, 因此我们有两种办法可以实现将值传回后台: 方法如下
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 = http://www.mamicode.com/$("#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 向表单中添加多个元素
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。