Chỉnh sửa bảng sử dụng jQuery và PHP

    Rating: ★★★★☆
    View: 159
    Download: 223

    1. Giới thiệu về Chỉnh sửa bảng sử dụng jQuery và PHP

    Chỉnh sửa bảng sử dụng jQuery và PHP với chức năng chỉnh sửa / xóa nội tuyến trên các ô của bảng và gửi các thay đổi kết quả thông qua AJAX để bạn có thể xử lý chúng phù hợp bằng cách sử dụng PHP cho phụ trợ.

    Tương thích với khung Bootstrap 3 và Bootstrap 4 . Được cấp phép theo GPL-3.0.

    2. Cách sử dụng cơ bản:

    1. Bao gồm tệp JavaScript jquery.tabledit.jssau thư viện jQuery và chúng tôi đã sẵn sàng để đi.

    <script src="//code.jquery.com/jquery.min.js"></script> 
    <script src="jquery.tabledit.js"></script>

    2. Code HTML

    <table class="table">
      <thead>
        <tr>
          <th>Id</th>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
      </tbody>
    </table>

    3. Javascript

    $('#my-table').Tabledit({
      url: 'example.php',
      columns: {
        identifier: [0, 'id'],                    
        editable: [[1, 'col1'], [2, 'col1'], [3, 'col3']]
      }
    });

    4. Code PHP

    <?php
    
    // Basic example of PHP script to handle with jQuery-Tabledit plug-in.
    // Note that is just an example. Should take precautions such as filtering the input data.
    
    header('Content-Type: application/json');
    
    // CHECK REQUEST METHOD
    if ($_SERVER['REQUEST_METHOD']=='POST') {
      $input = filter_input_array(INPUT_POST);
    } else {
      $input = filter_input_array(INPUT_GET);
    }
    
    // PHP QUESTION TO MYSQL DB
    
    // Connect to DB
    
      /*  Your code for new connection to DB*/
    
    
    // Php question
    if ($input['action'] === 'edit') {
    
      // PHP code for edit action
    
    } else if ($input['action'] === 'delete') {
    
      // PHP code for edit delete
    
    } else if ($input['action'] === 'restore') {
    
      // PHP code for edit restore
    
    }
    
    // Close connection to DB
    
    /*  Your code for close connection to DB*/
    
    // RETURN OUTPUT
    echo json_encode($input);
    
    ?>

    5. Cấu hình javascript nâng cao

    $('#my-table').Tabledit({
    
      // Link to server script
      url: window.location.href,
    
      // Server request method for action 'edit' and 'delete'
      editmethod: 'post',
      deletemethod: 'post',
    
      // Class for form inputs
      inputClass: 'form-control input-sm',
    
      // Class for toolbar header column
      toolbarHeaderClass: '',
    
      // Class for buttons toolbar
      toolbarClass: 'btn-toolbar',
    
      // Class for buttons group
      groupClass: 'btn-group btn-group-sm',
    
      // Class for row when ajax request fails
      dangerClass: 'danger',
    
      // Class for row when save changes
      successClass: 'success',
    
      // Class for row when is deleted
      mutedClass: 'text-muted',
    
      // Class for prohibiting cell editing
      noEditClass: 'noedit',
    
      // Trigger to change for edit mode
      eventType: 'click',
    
      // Change the name of attribute in td element for the row identifier
      rowIdentifier: 'id',
    
      // Hide the column that has the identifier
      hideIdentifier: false,
    
      // Activate focus on first input of a row when click in save button
      autoFocus: true,
    
      // Localization -(en, default) - LowerCase or UpperCase
      lang: 'en',
    
      // Debug mode
      debug: false,
    
      // Escape Html - convert hmtl character
      escapehtml: true,
    
      // Activate edit button instead of spreadsheet style
      editButton: true,
    
      // Activate delete button
      deleteButton: true,
    
      // Activate save button when click on edit button
      saveButton: true,
    
      // Activate restore button to undo delete action
      restoreButton: true,
    
      // Customize buttons created in the table
      buttons: {
        edit: {
          class: 'btn btn-sm btn-default',
          html: '<span class="glyphicon glyphicon-pencil"></span>',
          action: 'edit'
        },
        delete: {
          class: 'btn btn-sm btn-default',
          html: '<span class="glyphicon glyphicon-trash"></span>',
          action: 'delete'
        },
        save: {
          class: 'btn btn-sm btn-success',
          html: ''
        },
        restore: {
          class: 'btn btn-sm btn-warning',
          html: 'Restore',
          action: 'restore'
        },
        confirm: {
          class: 'btn btn-sm btn-danger',
          html: 'Confirm'
        }
      },
    
      /**
       * REQUIRED - Set up in user options
       * Identifier column and editable columns
       * More info in Documentation (https://markcell.github.io/jquery-tabledit/#documentation)
       * columns: '',
       */
       
      // Executed after draw the structure
      onDraw: function () {
        return;
      },
    
      // Executed when the ajax request is completed
      onSuccess: function () {
        return;
      },
    
      // Executed when occurred an error on ajax request
      onFail: function () {
        return;
      },
    
      // Executed whenever there is an ajax request
      onAlways: function () {
        return;
      },
    
      // Executed before the ajax request
      onAjax: function () {
        return;
      }
    
    });

     

    loading Đang tải...

    api được ưa chuộng