利用JQuery 和$.AJAX函数，通过异步请求，将update内容传递到sysmap.php页面，再将个窗体data文件存入到mysql数据库中；
Jquery->ajax->php_REQUEST->MYSQL
在修改代码之前需要先添加一个数据表：
1）mysql>zabbix>sysmaps_elements(表)>filed_name(列表项)；
#mysql -uroot -p
#mysql>use zabbix;
#mysql>alter table sysmaps_elements add filed_name int(11) default '0';
相关命令：
(1)show tables;
(2)describe 表名；
(3)查看表中数据 select roamsetting from sysmaps_elements;
(4)更新某个表数据 update sysmaps_elements set roamsetting=2 where selementid=15;
(5)修改表中字段；alter table sysmaps modify map_scale bigint(20) default '100';
2）然后再修改对应的数据格式文件的内容；定义db格式的文件在include/schema.ini.php文件；
selements_sysmaps:中增加一个字段；
在4061行'x'字段下面；
'filed_name' => [
'null' => false,
'type' => DB::FIELD_TYPE_CHAR,
'length' => 10,
'default' => '0',
],
3）接下分析窗体文件，sysmap.php文件=>修改map地图相应的php文件；
在该文件中有个引入脚本文件的类；
$page['scripts'] = ['class.svg.canvas.js', 'class.svg.map.js', 'class.cmap.js', 'class.cviewswitcher.js',
'multiselect.js', 'colorpicker.js'
]; 通过分析窗体文件在这个class.cmap.js文件中；该文件在js/目录下
4）class.cmap.js=>所有和map地图要素相关的JQuery 文件；
（1）将需要添加的船体内容到js文件中，格式为；
// 如下；
var Appfield_id='<li id="filed_name"><div id=" " class="table-forms-td-left">
<label for="elementType">Sined_name</label></div><div class="table-forms-td-right">
<input id="field_id" type="radio" name="filed_name" style="width: 35px;" value="1" />Sined_name_1
<input type="radio" name="filed_name" style="width:35px;" value="2" />Sined_name_2
<input type="radio" name="filed_name" style="width:35px;" value="0" />NULL
</div></li>';
（2）//通过这个语句对应将filed_name的值放入values中；意思是filed_name='0' '1'或'2';jQuery窗体文件交互都是采用这种格式；
3036行；
data[values[i].name] = values[i].value.toString();
5)将Appfield_id div内容添加到页面；
在this.domNode = $(tpl.evaluate(formTplData)).appendTo(formContainer);这行语句之后
//filed_name parameter by suneiot
//console.log(this.formContainer); 这里sel=="0"是表示判断是否是host主机类型；
var sel="";
sel = $("#elementType").val();
if(sel=="0"){
$(formContainer).append(Appfiled_id);
$("#filed_name").insertAfter($('#hostGroupSelectRow'));
}else{$("#filed_name").remove();}
$("#elementType").change(function(){
if ($("filed_name")!="") $("#filed_name").remove();
sel = $("#elementType").val();
if(sel=="0"){
$(formContainer).append(Appfiled_id);
$("#filed_name").insertAfter($('#hostGroupSelectRow'));
}else{$("#filed_name").remove();}
});6）将以下代码插入到615行之后，进行点击之后进行判断
/*
-
Selements events
*/
// Delegate selements icons clicks.点击图形之后，对添加ap,sta,null单选按钮进行判断是否已经出现；
// ***
//
$(this.container).on('click', '.sysmap_element, .sysmap_shape', function(event) {
that.selectElements([{
id: $(this).attr('data-id'),
type: $(this).attr('data-type')
}], event.ctrlKey || event.metaKey);
//
if(($("#elementType").val())=="0") {
//将以下内容添加到这个forContainer对象中。
$(this.formContainer).append(Appfiled_id);
$("#filed_name").insertAfter($('#hostGroupSelectRow'));
}else{$("#filed_name").remove()};
});//********************************************************************************
5）修改完信息后通过点击窗体update按钮，回到sysmap.php文件中，通过.ajax函数传递窗体内容具体代码如下：
save: function() {
var url = new Curl();
$.ajax({
url: url.getPath() + '?output=ajax&sid=' + url.getArgument('sid'),
type: 'post',
data: {
favobj: 'sysmap',
action: 'update',
sysmapid: this.sysmapid,
sysmap: Object.toJSON(this.data) // TODO: remove prototype method
},
error: function() {
throw new Error('Cannot update map.');
}
});
},
传递的数据通过json格式放到网页缓存中，等待$REQUEST（）函数调用；
6）sysmap.php 调用$REQUEST().ajax 代码，代码如下
if (isset($_REQUEST['favobj'])) {
$json = new CJson();
if (getRequest('favobj') === 'sysmap' && hasRequest('action')) {
if (getRequest('action') === 'update') {
$sysmapid = getRequest('sysmapid', 0);
@ob_start();
try {
DBstart();
$sysmap = API::Map()->get([
'sysmapids' => $sysmapid,
'editable' => true,
'output' => ['sysmapid'],
]);
$sysmap = reset($sysmap);
if ($sysmap === false) {
throw new Exception(_('Access denied!'));
}
$sysmapUpdate = $json->decode($_REQUEST['sysmap'], true);
$sysmapUpdate['sysmapid'] = $sysmapid;
$sysmapUpdate['lines'] = [];
if (array_key_exists('shapes', $sysmapUpdate)) {
foreach ($sysmapUpdate['shapes'] as $key => &$shape) {
if (array_key_exists('sysmap_shapeid', $shape) && !is_numeric($shape['sysmap_shapeid'])) {
unset($shape['sysmap_shapeid']);
}
if ($shape['type'] == SYSMAP_SHAPE_TYPE_LINE) {
$sysmapUpdate['lines'][$key] = CMapHelper::convertShapeToLine($shape);
unset($sysmapUpdate['shapes'][$key]);
}
}
unset($shape);
}
$result = API::Map()->update($sysmapUpdate);
if ($result !== false) {
echo 'if (confirm('.CJs::encodeJson(_('Map is updated! Return to map list?')).')) { location.href = "sysmaps.php"; }';
}
else {
throw new Exception(_('Map update failed.'));
}
DBend(true);
}
///该代码是核心，调用系统API::MAP()->update方法 将$sysmapUpdate字段内容存入到zabbix数据库中；
$result = API::Map()->update($sysmapUpdate);