【发布时间】：2019-08-27 15:39:47
【问题描述】：
我正在从 HTML 表中更新 JSON 记录。
基本上，它的工作方式是从 api url 中提取 json 数据 - 将其设置在表格内 - 在表格的最后一列 ROW 设置了保存按钮 - 我单击此按钮，它使所有TR 可编辑的 TD - 再次单击“保存”按钮，然后保存该行。这只是我们所说的工作客户端。我需要完成这项工作以更新服务器端 - 可能也从表 ROW 编码回 JSON 格式 - 然后使用 API 更新该特定记录。
代码
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-json/2.6.0/jquery.json.min.js"></script>
<script>
//Use jQuery to edit row
$(document).ready(function(){
$('.editbtn').click(function () {
var currentTD = $(this).parents('tr').find('td');
//alert('this '+$(this).html() );
if ($(this).text().trim() == 'Edit') {
currentTD = $(this).parents('tr').find($("td").not(":nth-child(7)"));
//alert("first if "+currentTD.html());
$.each(currentTD, function () {
$(this).prop('contenteditable', true).css({
'background':'#fff',
'color':'#000'
})
});
} else {
// alert("second if "+currentTD.html());
$.each(currentTD, function () {
//alert("second if "+currentTD.html());
$(this).prop('contenteditable', false).removeAttr("style");
});
}
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
if ($(this).html() == 'Save'){
// alert("third if "+currentTD.html());
$(this).prop('contenteditable',false)
}
});
});
</script>
<?php
$url = 'URL';
$data = file_get_contents($url);
$parsed = json_decode($data, true);
$eachEntry = $parsed['response']['result']['Leads']['row'];
$valuesIWant = ["First Name", "Last Name", "Street", "City", "State", "Zip Code"];
echo '<div class="uabb-table-module-content uabb-table">
<div class="uabb-table-element-box">
<div class="uabb-table-wrapper">
<table id="tableone" class="uabb-table-inner-wrap table table-striped table-dark table-bordered">
<thead class="uabb-table-header">
<tr class="table-header-tr">
<th class="table-heading-0 table-header-th" rowspan="" colspan="">
<label class="head-style-0 th-style">
<label class="head-inner-text">First Name</label>
</label>
</th>
<th class="table-heading-1 table-header-th" rowspan="" colspan="">
<label class="head-style-1 th-style">
<label class="head-inner-text">Last Name</label>
</label>
</th>
<th class="table-heading-2 table-header-th" rowspan="" colspan="">
<label class="head-style-2 th-style">
<label class="head-inner-text">Street</label>
</label>
</th>
<th class="table-heading-3 table-header-th" rowspan="" colspan="">
<label class="head-style-3 th-style">
<label class="head-inner-text">City</label>
</label>
</th>
<th class="table-heading-4 table-header-th" rowspan="" colspan="">
<label class="head-style-4 th-style">
<label class="head-inner-text">State</label>
</label>
</th>
<th class="table-heading-5 table-header-th" rowspan="" colspan="">
<label class="head-style-5 th-style">
<label class="head-inner-text">Zip Code</label>
</label>
</th>
<th class="table-heading-5 table-header-th" rowspan="" colspan="">
<label class="head-style-5 th-style">
<label class="head-inner-text"></label>
</label>
</th>
</tr>
</thead>';
foreach ($eachEntry as $entry) {
$FL = $entry['no'];
$entries = $entry['FL'];
echo '<tbody class="uabb-table-features"><tr class="tbody-row">';
foreach ($entries as $value) {
$val = $value['val'];
$content = $value['content'];
if (in_array($val, $valuesIWant)) {
//$out = $val;
$out2 = $content;
echo '<td class="table-body-td table-body-0" colspan="" rowspan=""><span class="content-text">'. $out2 .'</span></td>';
}
}
echo '<td contenteditable="false">
<button type="button"class="btn btn-primary editbtn">Edit</button><!--<button type="button" class="btn btn-danger">Delete</button>--></td></tr></tbody>';
}
echo '</table></div></div></div>';
$count = count($eachEntry);
echo '<tbody class="uabb-table-features"><tr class="tbody-row"><span>There are '. $count .' records.</span></tr></tbody>';
?>
JSON 结构
{
"response": {
"result": {
"Leads": {
"row": [
{
"no": "1",
"FL": [
{
"val": "LEADID",
"content": "123000000596123"
},
{
"val": "SMOWNERID",
"content": "123000000291123"
},
{
"val": "Lead Owner",
"content": "Casar"
},
{
"val": "First Name",
"content": "Bob"
},
{
"val": "Last Name",
"content": "Something"
},
{
"val": "Email",
"content": "email@email.com"
},
{
"val": "Mobile",
"content": "1113332222"
},
{
"val": "SMCREATORID",
"content": "383590700000032132"
},
{
"val": "Created By",
"content": "Casar"
},
{
"val": "Created Time",
"content": "2019-04-03 15:14:05"
},
{
"val": "Modified Time",
"content": "2019-04-03 17:13:58"
},
{
"val": "Full Name",
"content": "Bob"
},
{
"val": "Street",
"content": "123 Fake Rd"
},
{
"val": "City",
"content": "Fakecity"
},
{
"val": "State",
"content": "DC"
},
{
"val": "Zip Code",
"content": "123123"
},
{
"val": "Email Opt Out",
"content": "false"
},
{
"val": "Salutation",
"content": "Mr."
},
{
"val": "Last Activity Time",
"content": "2019-04-03 17:13:58"
},
{
"val": "Tag",
"content": "convert"
},
{
"val": "Account Name",
"content": "Chief"
},
{
"val": "Territory Manager",
"content": "Mike"
},
{
"val": "Territory Manager_ID",
"content": "312390700000021111"
},
{
"val": "Classification",
"content": "Instal"
},
{
"val": "Area",
"content": "Zone 1"
},
{
"val": "Account Number",
"content": "2342342"
}
]
}
]
}
},
"uri": "/crm/private/json/Leads/getRecords"
}
}
这是一个扩展问题来自：
PHP JSON Decoding To Array To Grab Specific Key Values (All fields same name)
【问题讨论】：
-
你有什么问题？
-
嗨，Miken，我怎样才能将此更新后的信息发布回 CRM JSON API。我的问题可能不是很清楚，我很难解释。基本上 - 当我单击“保存”按钮时 - 我想将更新的信息发送回我第一次从中提取它的地方。更新记录。保存按钮位于返回的每个 TABLE ROW 上。
-
所以这应该是每行函数？你能描述一下你期望它如何工作吗？点击该行中的一个按钮，抓取更新的行信息并发布到数据库？
-
嗨，Jay，当然可以——尽我所能。基本上，它的工作方式是它从 api url 中提取 json 数据 - 将其设置在表格内 - 在表格的最后一列 ROW 设置了 SAVE 按钮 - 我单击此按钮，它会生成所有 TD TR 可编辑 - 再次单击“保存”按钮，然后保存该行。这只是我们所说的工作客户端。我需要完成这项工作以更新服务器端 - 可能也从表 ROW 编码回 JSON 格式 - 然后使用 API 更新该特定记录。
-
是的，编码回 JSON，使用 AJAX 连接到 PHP 脚本，该脚本将使用行数据更新数据库。
标签： php jquery json ajax html-table