jquery：创建响应式数据网格

时间：2016-01-30 14:23:27

标签： jquery html responsive-design

我正在尝试创建一个响应式数据网格，我可以编辑和添加行。这些行来自数据库，在编辑或创建新行时，它应该更新/插入数据库中。 在过去，我只是使用普通表单和提交来处理PHP中的数据，现在我正试图以更现代的方式学习相同的东西。

我已经走了很长的路，我可以更新一行，并且可以插入一个新的，返回id并在表中使用它。然而，什么不起作用是更新刚刚插入的行。当我单击这样一行的编辑图标时，它似乎确实进入编辑模式，而是在后台插入一个新行。知道我哪里错了吗？

我也想知道是否有一种不那么复杂的方法来实现这一点，似乎我必须为只有3个字段的表编写一堆代码，有什么建议吗？

HTML部分如下所示：

<table class="table table-bordered" id="schedules">
            <thead>
                <tr>
                    <th>Time from</th>
                    <th>Time to</th>
                    <th>Enabled</th>
                                        <th></th>
                </tr>
            </thead>
            <tbody>

                                <tr id="1">
                    <td id="time_from">16:01</td>
                    <td id="time_to">23:01</td>
                    <td id="enabled">true</td>
                    <td id="edit"><i class="fa fa-pencil-square-o fa-fw" id="editicon"></i></td>
                </tr>
                                <tr id="2">
                    <td id="time_from">10:00</td>
                    <td id="time_to">11:00</td>
                    <td id="enabled">false</td>
                    <td id="edit"><i class="fa fa-pencil-square-o fa-fw" id="editicon"></i></td>
                </tr>

            </tbody>
        </table>

            <i class="fa fa-plus" id="addRow"></i>

javascrip / jquery部分如下所示：

<script>
                //function for when the addrow action is used
                $('#addRow').on('click',function(){ 
                    $('#schedules > tbody:last-child').append('<tr id="newrow"><td id="time_from"><input id="time_from"/></td><td id="time_to"><input id="time_to"/></td><td id="enabled"><input id="enabled"/></td><td id="saveicon"><i class="fa fa-check fa-fw" id="saveicon"></i></td></tr>');

                    //function for when the save new row icon is pressed
                    $('#saveicon').on('click',function(){ 
                        //Send data to script to store as now row in db
                        $.get( "/settings/insertSchedule/" + $('#newrow input#time_from').val() + "/" + $('#newrow input#time_to').val() + "/" +   $('#newrow input#enabled').val()  , function( data ) {

                            //Change input fields to text fields
                            $('#newrow td#time_from').text($('#newrow input#time_from').val());
                            $('#newrow td#time_to').text($('#newrow input#time_to').val());
                            $('#newrow td#enabled').text($('#newrow input#enabled').val());

                            //change checkmark icon into edit icon
                            $('#newrow i#saveicon').attr('class', 'fa fa-pencil-square-o fa-fw');
                            $('#newrow i#saveicon').attr('id', 'editicon');                
                            $('#newrow td#saveicon').attr('id', 'edit');                

                            $('#newrow').attr('id',data);                
                            console.log(data);
                        });
                    });
                });


                //function for when the edit row icon is clicked
                var arr = {};
                $('#schedules').on('click','#edit',function() {
                    var rowid = ($(this).parent().attr('id'));
                    $(this).siblings().each(
                        function(){
                                //end of editing, change the icon back to a pencil and change the fiels back to text
                                if ($(this).find('input').length){
                                $(this).text($(this).find('input').val());
                                $('#editicon').attr('class', 'fa fa-pencil-square-o fa-fw');
                                arr[this.id] = $(this).html()
                            }
                            else {
                                //start of editing, change fields to input fields and icon to checkmark
                                var t = $(this).text();
                                $(this).html($('<input />',{'value' : t}).val(t));
                                $('#editicon').attr('class', 'fa fa-check fa-fw');
                            }
                    });

                    //Send updated data to script to store in DB.
                    if (Object.keys(arr).length > 0){
                        $.get( "/settings/updateSchedule/" + rowid + "/" + arr.time_from + "/" + arr.time_to    , function( data ) {});

                    }
                }); 



                </script>

编辑：我在jsfiddle中以略微修改的形式模拟了问题：jsfiddle.net/15dd3j3v

2 个答案:

答案 0 :(得分：1)

这里是JSfiddle https://jsfiddle.net/15dd3j3v/5/

HTML：

<table class="table table-bordered" id="schedules" border="1">
  <thead>
    <tr>
      <th>Time from</th>
      <th>Time to</th>
      <th>Enabled</th>
      <th></th>
    </tr>
  </thead>
  <tbody>

    <tr id="1">
      <td class="td_time_from">16:01</td>
      <td class="td_time_to">23:01</td>
      <td class="td_enabled">true</td>
      <td class="button"><button class="editBtn"><i class="fa fa-pencil-square-o fa-fw" ></i> edit</button></td>
    </tr>
    <tr id="2">
      <td class="td_time_from">10:00</td>
      <td class="td_time_to">11:00</td>
      <td class="td_enabled">false</td>
      <td class="button"><button class="editBtn"><i class="fa fa-pencil-square-o fa-fw"></i> edit</button></td>
    </tr>

  </tbody>
</table>

<button id="addRow"><i class="fa fa-plus"></i> add row</button>

JS：

var fakeId = 3;

function getRowForSaving(){
    return '<tr id="newrow"><td class="td_time_from"><input class="input_time_from"/></td><td class="td_time_to"><input class="input_time_to" /></td><td class="td_enabled"><input class="input_enabled" /></td><td><button class="saveBtn"><i class="fa fa-check fa-fw"></i>save</button><button class="cancelBtn">&times;</button></td></tr>';
}

function getRowWithData(id, time_from, time_to, enabled){
    return '<tr id="'+id+'"><td class="td_time_from">'+time_from+'</td><td class="td_time_to">'+time_to+'</td><td class="td_enabled">'+enabled+'</td><td><button class="editBtn"><i class="fa fa-pencil-square-o fa-fw" ></i> edit</button></td></tr>';
}
function getRowForEdit(id, time_from, time_to, enabled){
    return '<tr id="'+id+'"><td class="td_time_from"><input class="input_time_from" value="'+time_from+'" /></td><td class="td_time_to"><input class="input_time_to" value="'+time_to+'" /></td><td class="td_enabled"><input class="input_enabled" value="'+enabled+'" /></td><td><button class="saveEditBtn"><i class="fa fa-pencil-square-o fa-fw" ></i> Save edit</button></td></tr>';
}

//function for when the addrow action is used
$('#addRow').on('click', function() {
  $('#schedules > tbody:last-child').append(getRowForSaving());
});

$('#schedules').on('click', '.cancelBtn', function(){
    $(this).parents('tr').remove();
});

$('#schedules').on('click', '.saveBtn', function(){
    var $row = $(this).parents('tr');
  var time_from = $row.find('.input_time_from').val();
  var time_to = $row.find('.input_time_to').val();
  var enabled = $row.find('.input_enabled').val();
  console.log("Save this datas \ntime_from: " + time_from + "\ntime_to: " + time_to + "\nenabled:"+enabled);

  // SAVING FUNCTION

  $row.replaceWith(getRowWithData(fakeId,time_from, time_to, enabled));
  fakeId++;
});

$('#schedules').on('click', '.editBtn', function(){
    var $row = $(this).parents('tr');
  var id = $row.attr('id');
  var time_from = $row.find('.td_time_from').text();
  var time_to = $row.find('.td_time_to').text();
  var enabled = $row.find('.td_enabled').text();

  console.log("EDIT MODE for row: " + id );

  $row.replaceWith(getRowForEdit(id, time_from, time_to, enabled));
});

$('#schedules').on('click', '.saveEditBtn', function(){
    var $row = $(this).parents('tr');
  var id = $row.attr('id');
  var time_from = $row.find('.input_time_from').val();
  var time_to = $row.find('.input_time_to').val();
  var enabled = $row.find('.input_enabled').val();
  console.log("Save the edit this datas \nid: "+id+"\ntime_from: " + time_from + "\ntime_to: " + time_to + "\nenabled:"+enabled);

  // SAVE EDIT FUNCTION

  $row.replaceWith(getRowWithData(id, time_from, time_to, enabled));
});

我重写了部分代码以满足您的需求。我试图尽可能地使用你的编码风格。有些部分是冗长的，以帮助理解。

但是我建议您使用像JQuery Grid http://www.trirand.com/blog/这样的预编写库，这是最好的解决方案，因为您必须努力获得具有JQgrid等深层功能的良好网格

如果您需要帮助，请写评论，记得投票并查看答案，如果有帮助byeee

答案 1 :(得分：0)

我会使用jquery数据表，https://www.datatables.net/examples/data_sources/server_side.html

你可以添加，编辑，删除行，然后执行任何操作，例如在执行此操作后调用php更新数据库

相关问题
最新问题