数据表编辑按钮功能

时间:2018-04-03 09:20:32

标签: javascript asp.net-mvc

以下是当前的脚本:

 <script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    url: '/Home/NewPopulation',
                    dataType: "json",
                    type: "POST",
                    contentType: 'application/json; charset=utf-8',
                    data: {},
                    success: function (data) {
                        var tr;
                        console.log(data);
                        for (var i = 0; i < data.length; i++) {
                            tr = tr + "<tr>";
                            tr = tr + "<td style='display: none'>" + data[i].PollSurveyID + "</td>"
                            tr = tr + "<td>" + data[i].PollSurveyName + "</td>";
                            tr = tr + "<td>" + data[i].PollSurveyDescription + "</td>";
                            tr = tr + "<td>" + data[i].CategoryName + "</td>";
                            tr = tr + "<td>" + data[i].StartDate + "</td>";
                            tr = tr + "<td>" + data[i].EndDate + "</td>";
                            tr = tr + "<td><a class='editRow' ><i class='fa fa-edit'></i></a></td>";
                            //tr = tr + "<td><input type='button' id='btnDelete' value='Delete' /><i class='fa fa - close'></i></td > ";
                            tr = tr + "<td><a class='delRow'><i class='fa fa-trash'></i></a></td>";
                            tr = tr + "</tr>";

                        }

                        $('#tblPopulation').append(tr);
                        tblFormate();
                    },
                    error: function (xhr) {
                        alert('No Valid Data');
                    }

                });


                $('#tblPopulation').on('click', '.delRow', function () {
                    var table = $('#tblPopulation').DataTable();
                    table
                        .row($(this).parents('tr'))
                        .remove()
                        .draw();
                });

                function deleteRow(row) {
                    var i = row.parentNode.parentNode.rowIndex;
                    document.getElementById("#tblPopulation").deleteRow(i);
                }

                function tblFormate() {
                    var table = $('#tblPopulation').DataTable(
                        {
                            //"searching": false,
                            "lengthMenu": [[5, 10, 50, 100, 150, -1], [5, 10, 50, 100, 150, "All"]]
                        });
                    //Apply the search
                    table.columns().eq(0).each(function (colIdx) {
                        $('input', table.column(colIdx).header()).on('keyup change', function () {
                            table
                                .column(colIdx)
                                .search(this.value)
                                .draw();
                        });
                    });
                }
            });

        </script>

这是我的数据表的JavaScript,具有编辑和删除按钮。对于编辑我尝试了很多东西,但没有得到按钮的响应。我想要的是当我点击编辑按钮时,所有细节必须分别填入下面的部分。除名称外,其他控件均为下拉列表,以便用户可以更改类别状态

我这样做的想法就是当我点击一行 PollId 的编辑按钮发送到隐藏的文本框时,在该列中取一个隐藏的列并进行 PollId 。基于文本框值,所有控制器都会填充,因为我有一个函数,它将 PollId 作为参数,并返回针对该轮询或调查的所有详细信息。 欢迎任何其他想法。附上页面图片以粗略了解流程。

[]

0 个答案:

没有答案