在jquery数据表中将行数据从一个表传输到另一个表显示[object Object]

时间:2017-01-22 01:02:27

标签: jquery web-services datatables asp.net-ajax

我使用图像映射器来映射人体图像。当我点击它的一部分器官名称作为参数发送到web服务。代码:

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

它将症状名称作为我使用datatable.now绑定的特定器官的json数据返回。我想将此表的行值传输到另一个表。 代码:

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

                },

当我单击选择按钮时,将删除一行并在第二个表中创建新行,但该值无法通过。在新行中,它显示每行的[object Object]。 请问,任何人都可以告诉我我的代码有什么问题。非常感谢你提供的帮助。

3 个答案:

答案 0 :(得分:2)

我使用了一个按钮点击&#34;移动&#34;这一行,但这将得到重点。 我创建了一个使用行按钮移动单行的jsFiddle。它还使用表格按钮移动多个选择行 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();

        })

答案 1 :(得分:0)

这是我用来模拟访问数据库的Web服务类。使用Web方法,您可以获得正常的回报。您不必设置编写器等。

struct TrieNode *search(struct TrieNode *root, const char *key)
{
   int level;
   int length = strlen(key);
   int index;
   struct TrieNode *pCrawl = root;

   for (level = 0; level < length; level++)
   {
       index = CHAR_TO_INDEX(key[level]);
       if(index == -1)
           continue;

       if (!pCrawl->children[index])
           return ;

       pCrawl = pCrawl->children[index];
   }
   return pCrawl;
}

答案 2 :(得分:0)

enter image description here我不确定为什么你在这个东西上使用了“扩展”。在下面的代码中,我很少被带走,因为大多数东西都在函数中,你可以在任何一个方向上移动行。

    <!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>