eine Zeile von Daten von einem Tisch zum anderen der Übertragung von jquery Datentabelle zeigt [object Object]

Question

i Bild Mapster zum Abbilden menschlichen Gebrauch image.when i einen Teil davon organ Name als Parameter web service.Code senden klicken:

[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)); 
     } 

Es gibt den Namen der Symptome als JSON-Daten für bestimmte Organe, die ich mit datatable.now binden möchte ich jetzt Zeile Wert dieser Tabelle in eine andere Tabelle übertragen möchten. Code:

$('#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' 
          } 
         ] 
        }); 

       }, 

wenn ich Wahl-Taste eine Zeile geklickt wird entfernt und neue Zeile in der zweiten Tabelle erstellt, aber der Wert kann nicht passieren. In einer neuen Zeile wird [object Object] für jede Zeile angezeigt. BITTE, kann mir jemand sagen, was in meinem Code falsch ist. Jede Art von Hilfe wird sehr geschätzt werden.

Answer 1

Ich habe einen Knopfklick verwendet, um die Zeile zu "verschieben", aber das wird den Punkt über. Ich habe ein jsFiddle erstellt, das eine Zeilenschaltfläche verwendet, um eine einzelne Zeile zu verschieben. Es verwendet auch eine Tabelle Schaltfläche, um mehrere Zeilen selektieren 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(); 

     }) 

Answer 2

Das ist meine Web-Services-Klasse-I zu simulieren Zugriff auf die Datenbank zu bewegen. Mit einer Webmethode können Sie eine normale Rendite erzielen. Sie müssen nicht den Schreiber einzurichten usw.

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; 
      } 
     } 
    } 

Answer 3

Ich bin nicht sicher, warum Sie verwenden die „erweitern“ auf diesem Zeug. In dem Code unten, ich werde wenig davon getragen, dass die meisten Sachen in Funktionen sind und Sie können Reihen in beide Richtungen bewegen.

<!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 />&nbsp; 
     <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>