将行数据从一个 table 传输到另一个 jquery datatable 显示 [object Object]
Transfering a row data from one table to another in jquery datatable shows [object Object]
我使用 image mapster 来映射人体 image.when 我点击它的一部分器官名称作为参数发送到网络 service.Code:
[WebMethod]
public void GetSymptoms(String organ_name)
{
List<symps> listSymptoms = new List<symps>();
string CS = ConfigurationManager.ConnectionStrings["EhealtsCS"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
SqlCommand cmd = new SqlCommand("sendSymptoms", con);
cmd.CommandType = CommandType.StoredProcedure ;
SqlParameter parameter = new SqlParameter();
parameter.ParameterName = "@organ";
parameter.Value = organ_name;
cmd.Parameters.Add(parameter);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
symps symp = new symps();
symp.Sympt = rdr["SymptomsName"].ToString();
listSymptoms.Add(symp);
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(listSymptoms));
}
它 returns 症状名称为 json 我使用 datatable.now 绑定的特定器官的数据 我想将此 table 的行值传输到另一个 table.
代码：
$('#manLeg').mapster($.extend({}, options,{
onClick: function (e) {
if (e.key === 'toes')
{
$.ajax({
url: "SympsService.asmx/GetSymptoms",
data: { organ_name: "toes" },
method: "post",
dataType: "json",
success: function (data) {
$('#symptomsTable').DataTable({
destroy: true, paging: false, searching: false, info: false, data: data,
columns: [
{
'data': 'Sympt',
'title': 'Shin Symptoms',
class: 'center'
},
{
"targets": [-1],
'data': null,
render: function () {
return "<button type='button'>Choise</button>"
}
}
]
});
$("#symptomsTable button").on("click", function (evt) {
var table1 = $("#symptomsTable").DataTable();
var table2 = $("#choiseTable").DataTable();
var tr = $(this).closest("tr");
var row = table1.row(tr);
var data = JSON.parse(JSON.stringify(row.data()));
row.remove().draw();
table2.row.add(data).draw();
});
$("#choiseTable").DataTable({
destroy: true, paging: false, searching: false, info: false,
columns: [
{
data:null,
'title': 'Selected Symptoms'
}
]
});
},
当我单击选择按钮时，删除了一行并在第二个 table 中创建了新行，但该值无法通过。在新行中，它显示每一行的 [object Object]。
拜托，谁能告诉我我的 code.any 有什么问题，我们将不胜感激。
我使用按钮单击 "move" 该行，但这将说明问题。
我创建了一个 jsFiddle，它使用行按钮移动单行。它还使用 table 按钮移动多个 select 行
https://jsfiddle.net/bindrid/sc0bo122/6/
$("#example button").on("click", function (evt) {
var tr = $(this).closest("tr");
var row = table1.row(tr);
// instead of getting the row, I get the row data.
// the json stuff is done just to make a copy of the data
// to ensure it is disconnected from the source.
var data = JSON.parse(JSON.stringify(row.data()));
// this actually destroys the row so you can't add it to the other table.
row.remove().draw();
// then add and draw.
table2.row.add(data).draw();
})
这是我的网络服务class 我用来模拟访问数据库。使用网络方法，您可以获得正常的 return。无需设置编写器等
using System;
using System.Collections.Generic;
using System.Web.Services;
using Newtonsoft.Json;
namespace WebApplication1
{
/// <summary>
/// Summary description for wsSymptoms
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class SympsService : System.Web.Services.WebService
{
/// <summary>
///
/// </summary>
[Serializable]
public class symps
{
public String Sympt { get; set; }
public symps (String newval) { Sympt = newval; }
public symps() { }
}
/// <summary>
/// This method explicitly serialized the data
/// which means it has to be json parsed on the client.
///
/// </summary>
/// <param name="organ_name"></param>
/// <returns></returns>
[WebMethod(enableSession:false)]
public string GetSymptomsSerialized(String organ_name )
{
// I prefer Newton serializer over microsoft one. The ms on adds more overhead and
// causes issue particularly if an object is making a round trip to the client.
List<symps> list = fakedData();
String serializedList = JsonConvert.SerializeObject(list);
return serializedList;
}
/// <summary>
/// This method lets the framework take care of the serialization.
/// This works but its not my personal prefered method
/// </summary>
/// <param name="organ_name"></param>
/// <returns></returns>
[WebMethod(enableSession:false)]
public List<symps> GetSymptomsObject(String organ_name)
{
return fakedData();
}
// since i am not hooked up to a database, just made stuff up.
private List<symps> fakedData()
{
List<symps> list = new List<symps>();
list.Add(new symps("discolor"));
list.Add(new symps("pimples"));
list.Add(new symps("sorness"));
list.Add(new symps("pain"));
list.Add(new symps("break"));
list.Add(new symps("twig"));
list.Add(new symps("red"));
list.Add(new symps("green"));
list.Add(new symps("discolor"));
return list;
}
}
}
我不确定你为什么在这个东西上使用 "extend"。在下面的代码中，我几乎没有被带走，因为大多数东西都在函数中，你可以向任一方向移动行。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.jqueryui.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/scroller/1.4.2/css/scroller.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js"></script>
<script>
// startup and initialize empty tables for appearance
$(function ($) {
createDataTable('#targetTable', null);
createDataTable("#sourceTable", null);
// set up event handlers for both directrions
$('#targetTable').on("click", "tbody button", function (evt) { moveRow(evt, '#targetTable', '#sourceTable'); })
$('#sourceTable').on("click", "tbody button", function (evt) { moveRow(evt, '#sourceTable', '#targetTable'); })
$("#divButtons button").on("click", function (evt) {
createDataTable('#targetTable', []);
runajax('toes', $(evt.target).text())
})
})
// run ajax organ is hard coded to 'toes" above.
// I have two slightly diffrent web methods that the
// end result is the same. webmthod parameter just chooses which one
function runajax(organ, webMethod) {
$.ajax({
url: "SympsService.asmx/" + webMethod,
data: { organ_name: organ },
method: "post",
dataType: "json",
data: JSON.stringify({ organ_name: "toes" }),
contentType: "application/json",
success: function (data) {
// for some reason, when WebMethod returns and object its actually in a child of data called d so it needs to be pulled ouit
// when I explicitly serialize on the server, have to deserialize here.
// the diffrence of webmthod is explained in the web methods
var sympList = webMethod == 'GetSymptomsSerialized' ? JSON.parse(data.d) : data.d;
createDataTable('#sourceTable', sympList)
},
error: function (response, status) {
console.log(response);
debugger;
}
});
}
// create data tables.
function createDataTable(target, data) {
$(target).DataTable({
destroy: true,
paging: false, searching: false, info: false, data: data,
columnDefs: [{
targets: [-1], render: function () {
return "<button type='button'>" + (target == '#targetTable' ? 'Remove' : 'Choose') + "</button>"
}
}],
columns: [
{
'data': 'Sympt',
'title': 'Shin Symptoms',
class: 'center'
},
{
'data': null, 'title': 'Action'
}
]
});
}
// function to move rows
function moveRow(evt, fromTable, toTable) {
var table1 = $(fromTable).DataTable();
var table2 = $(toTable).DataTable();
var tr = $(evt.target).closest("tr");
var row = table1.rows(tr);
// since we are only dealing with data for once cell I just grab it and make a new data object
var obj = { 'Sympt': row.data()[0].Sympt };
table2.row.add(obj).draw();
row.remove().draw();
}
</script>
<style>
.flexed table {
width: 300px;
}
.flexed {
display: flex;
flex-direction: row;
}
</style>
</head>
<body>
<p>Pick Load method:</p>
<div id="divButtons">
<button type="Button">GetSymptomsSerialized</button>
<button type="Button">GetSymptomsObject</button>
</div>
<br />
<div class="flexed">
<div>
<table id="sourceTable">
<thead><tr><th>Symptom List</th><th>Choose</th></thead>
<tbody></tbody>
</table>
</div>
<div>
<table id="targetTable">
<thead><tr><th>Symptom List</th><th>remove</th></thead>
<tbody></tbody>
</table>
</div>
</div>
</body>
</html>
我使用 image mapster 来映射人体 image.when 我点击它的一部分器官名称作为参数发送到网络 service.Code:
[WebMethod]
public void GetSymptoms(String organ_name)
{
List<symps> listSymptoms = new List<symps>();
string CS = ConfigurationManager.ConnectionStrings["EhealtsCS"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
SqlCommand cmd = new SqlCommand("sendSymptoms", con);
cmd.CommandType = CommandType.StoredProcedure ;
SqlParameter parameter = new SqlParameter();
parameter.ParameterName = "@organ";
parameter.Value = organ_name;
cmd.Parameters.Add(parameter);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
symps symp = new symps();
symp.Sympt = rdr["SymptomsName"].ToString();
listSymptoms.Add(symp);
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(listSymptoms));
}
它 returns 症状名称为 json 我使用 datatable.now 绑定的特定器官的数据 我想将此 table 的行值传输到另一个 table. 代码：
$('#manLeg').mapster($.extend({}, options,{
onClick: function (e) {
if (e.key === 'toes')
{
$.ajax({
url: "SympsService.asmx/GetSymptoms",
data: { organ_name: "toes" },
method: "post",
dataType: "json",
success: function (data) {
$('#symptomsTable').DataTable({
destroy: true, paging: false, searching: false, info: false, data: data,
columns: [
{
'data': 'Sympt',
'title': 'Shin Symptoms',
class: 'center'
},
{
"targets": [-1],
'data': null,
render: function () {
return "<button type='button'>Choise</button>"
}
}
]
});
$("#symptomsTable button").on("click", function (evt) {
var table1 = $("#symptomsTable").DataTable();
var table2 = $("#choiseTable").DataTable();
var tr = $(this).closest("tr");
var row = table1.row(tr);
var data = JSON.parse(JSON.stringify(row.data()));
row.remove().draw();
table2.row.add(data).draw();
});
$("#choiseTable").DataTable({
destroy: true, paging: false, searching: false, info: false,
columns: [
{
data:null,
'title': 'Selected Symptoms'
}
]
});
},
当我单击选择按钮时，删除了一行并在第二个 table 中创建了新行，但该值无法通过。在新行中，它显示每一行的 [object Object]。 拜托，谁能告诉我我的 code.any 有什么问题，我们将不胜感激。
我使用按钮单击 "move" 该行，但这将说明问题。 我创建了一个 jsFiddle，它使用行按钮移动单行。它还使用 table 按钮移动多个 select 行 https://jsfiddle.net/bindrid/sc0bo122/6/
$("#example button").on("click", function (evt) {
var tr = $(this).closest("tr");
var row = table1.row(tr);
// instead of getting the row, I get the row data.
// the json stuff is done just to make a copy of the data
// to ensure it is disconnected from the source.
var data = JSON.parse(JSON.stringify(row.data()));
// this actually destroys the row so you can't add it to the other table.
row.remove().draw();
// then add and draw.
table2.row.add(data).draw();
})
这是我的网络服务class 我用来模拟访问数据库。使用网络方法，您可以获得正常的 return。无需设置编写器等
using System;
using System.Collections.Generic;
using System.Web.Services;
using Newtonsoft.Json;
namespace WebApplication1
{
/// <summary>
/// Summary description for wsSymptoms
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class SympsService : System.Web.Services.WebService
{
/// <summary>
///
/// </summary>
[Serializable]
public class symps
{
public String Sympt { get; set; }
public symps (String newval) { Sympt = newval; }
public symps() { }
}
/// <summary>
/// This method explicitly serialized the data
/// which means it has to be json parsed on the client.
///
/// </summary>
/// <param name="organ_name"></param>
/// <returns></returns>
[WebMethod(enableSession:false)]
public string GetSymptomsSerialized(String organ_name )
{
// I prefer Newton serializer over microsoft one. The ms on adds more overhead and
// causes issue particularly if an object is making a round trip to the client.
List<symps> list = fakedData();
String serializedList = JsonConvert.SerializeObject(list);
return serializedList;
}
/// <summary>
/// This method lets the framework take care of the serialization.
/// This works but its not my personal prefered method
/// </summary>
/// <param name="organ_name"></param>
/// <returns></returns>
[WebMethod(enableSession:false)]
public List<symps> GetSymptomsObject(String organ_name)
{
return fakedData();
}
// since i am not hooked up to a database, just made stuff up.
private List<symps> fakedData()
{
List<symps> list = new List<symps>();
list.Add(new symps("discolor"));
list.Add(new symps("pimples"));
list.Add(new symps("sorness"));
list.Add(new symps("pain"));
list.Add(new symps("break"));
list.Add(new symps("twig"));
list.Add(new symps("red"));
list.Add(new symps("green"));
list.Add(new symps("discolor"));
return list;
}
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.jqueryui.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/scroller/1.4.2/css/scroller.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js"></script>
<script>
// startup and initialize empty tables for appearance
$(function ($) {
createDataTable('#targetTable', null);
createDataTable("#sourceTable", null);
// set up event handlers for both directrions
$('#targetTable').on("click", "tbody button", function (evt) { moveRow(evt, '#targetTable', '#sourceTable'); })
$('#sourceTable').on("click", "tbody button", function (evt) { moveRow(evt, '#sourceTable', '#targetTable'); })
$("#divButtons button").on("click", function (evt) {
createDataTable('#targetTable', []);
runajax('toes', $(evt.target).text())
})
})
// run ajax organ is hard coded to 'toes" above.
// I have two slightly diffrent web methods that the
// end result is the same. webmthod parameter just chooses which one
function runajax(organ, webMethod) {
$.ajax({
url: "SympsService.asmx/" + webMethod,
data: { organ_name: organ },
method: "post",
dataType: "json",
data: JSON.stringify({ organ_name: "toes" }),
contentType: "application/json",
success: function (data) {
// for some reason, when WebMethod returns and object its actually in a child of data called d so it needs to be pulled ouit
// when I explicitly serialize on the server, have to deserialize here.
// the diffrence of webmthod is explained in the web methods
var sympList = webMethod == 'GetSymptomsSerialized' ? JSON.parse(data.d) : data.d;
createDataTable('#sourceTable', sympList)
},
error: function (response, status) {
console.log(response);
debugger;
}
});
}
// create data tables.
function createDataTable(target, data) {
$(target).DataTable({
destroy: true,
paging: false, searching: false, info: false, data: data,
columnDefs: [{
targets: [-1], render: function () {
return "<button type='button'>" + (target == '#targetTable' ? 'Remove' : 'Choose') + "</button>"
}
}],
columns: [
{
'data': 'Sympt',
'title': 'Shin Symptoms',
class: 'center'
},
{
'data': null, 'title': 'Action'
}
]
});
}
// function to move rows
function moveRow(evt, fromTable, toTable) {
var table1 = $(fromTable).DataTable();
var table2 = $(toTable).DataTable();
var tr = $(evt.target).closest("tr");
var row = table1.rows(tr);
// since we are only dealing with data for once cell I just grab it and make a new data object
var obj = { 'Sympt': row.data()[0].Sympt };
table2.row.add(obj).draw();
row.remove().draw();
}
</script>
<style>
.flexed table {
width: 300px;
}
.flexed {
display: flex;
flex-direction: row;
}
</style>
</head>
<body>
<p>Pick Load method:</p>
<div id="divButtons">
<button type="Button">GetSymptomsSerialized</button>
<button type="Button">GetSymptomsObject</button>
</div>
<br />
<div class="flexed">
<div>
<table id="sourceTable">
<thead><tr><th>Symptom List</th><th>Choose</th></thead>
<tbody></tbody>
</table>
</div>
<div>
<table id="targetTable">
<thead><tr><th>Symptom List</th><th>remove</th></thead>
<tbody></tbody>
</table>
</div>
</div>
</body>
</html>