TP5 framework based on Ajax to achieve list no refresh sort function example

Time:2021-7-21

In this paper, an example of TP5 framework based on Ajax to achieve list no refresh sort function. The details are as follows:

In the background management, we sometimes need to sort the data to control the order of the data displayed in the template. The principle of sorting is to modify the database and then update the view. We can write a separate method to realize the sorting function, refresh the page after success, or use ajax technology to realize the partial request of data, that is, the function of no refresh sorting.

Now the effect you want to achieve is to enter the value in the input box of sorting, and click sorting to realize the function of no refresh sorting.

The first is the form (cat. HTML), which we want to separate out and put into a separate page to facilitate our data request.


<table>
{include file="news/cateajaxpage"}
</table>

The content of cateajaxpage.html is as follows:

<thead>
    <tr>
      <th>ID</th>
      < th > classification name
      < th > sort
      < th > operation
    </tr>
  </thead>
  <tbody>
    {volist name="news"}
    <tr>
      <td>{$vo.id}</td>
      <td>{$vo.name}</td>
      <td><input type="text" value="{$vo.order}" name="{$vo.id}"></td>
      <td>
        <div>
          < button data toggle = "dropdown" aria expanded = "true" > operation < span > 0</span>
          </button>
          <ul>
            <li>To add a subcategory, we need to add a new subcategory</a>
            </li>
            <li>< a = "URL ('admin / news / cateupd ', array ('id' = > $vo. ID))}" rel = "external nofollow" > Modify</a>
            </li>
            <li>< a = "javascript: if (confirm ('delete?)) Location = '{: URL ('admin / news / del', array ('id '= > $vo. ID))}' "rel =" external nofollow "> delete</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
    {volist name="$vo.children"}
    <tr>
      <td>{$vo1.id}</td>
      <td>|————{$vo1.name}</td>
      <td><input type="text" value="{$vo1.order}" name="{$vo1.id}"></td>
      <td>
        <div>
          < button data toggle = "dropdown" aria expanded = "true" > operation < span > 0</span>
          </button>
          <ul>
            <li>< a = "URL ('admin / news / cateupd ', array ('id' = > $Vo1. ID))}" rel = "external nofollow" > Modify</a>
            </li>
            <li>< a = "javascript: if (confirm ('delete?)) Location = '{: URL ('admin / news / del', array ('id '= > $Vo1. ID))}' "rel =" external nofollow "> delete</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
    {/volist}
    {/volist}
  </tbody>

Here, because we use the technology of infinite level classification to get multidimensional arrays, there will be two volists. If you don’t know much about infinite level classification, you can allocate a common data


<input type="text" value="{$vo.order}" name="{$vo.id}"></td>

While displaying the sorting value, this sentence sets a name value for each input box, which is the ID value of the classification. In this way, all input boxes in the list can be distinguished, and the corresponding classification can be obtained through the database.

Go back to cat.html and write Ajax:


  $("#changeOrder").click(function(event) {
      /* Act on the event */
      var json = {};
      $("input").not('#top-search').each(function(index, el) {
        json[$(this).attr('name')] = $(this).val();
      });
      $.ajax({
        url: '{:url("admin/news/cate")}',
        type: 'post',
        data: json
      })
      .done(function(data) {
        $(".table-bordered").html(data);
        $(document).click();
      })
    });

Among them, changeorder is the ID value we added for the sort button. We put each group of ID and order into the JSON variable and pass them to the controller.

Controller code:


public function cate()
  {
    $news_model = model("Newsfenlei");
    if (request()->isAjax()) {
      $post = input('post.');
      foreach ($post as $key => $value) {
        db("newsfenlei")->where('id',$key)->update(['order'=>$value]);
      }
      $list = db("newsfenlei")->order('order desc')->select();
      $news = $news_model->getNews($list);
      $this->assign("news",$news);
      return view('cateajaxpage');
    } else {
      $list = db("newsfenlei")->order('order desc')->select();
      $news = $news_model->getNews($list);
      $this->assign("news",$news);
      return view();
    }
  }

Because it involves infinite level classification, we use the model layer to get the data. Getnews method is to get the data after infinite level classification. You can directly use the database to get the data. It should be noted that when processing Ajax requests, we update the data according to the post information, and then query the database after the data is updated to allocate the data to the template.

For more information about ThinkPHP, interested readers can check out the following topics: introduction to ThinkPHP, summary of operation skills of ThinkPHP template, summary of common methods of ThinkPHP, introduction to CodeIgniter, CI (CodeIgniter) framework advanced course, Zend framework introduction course and PHP template technology summary.

I hope this article will be helpful to the design of PHP program based on ThinkPHP framework.

Recommended Today

How to keep the stable output of services in case of traffic surge

Service adaptive load shedding protection design Design purpose Ensure that the system is not overwhelmed by excessive requests Provide higher throughput as much as possible on the premise of ensuring system stability Design considerations How to measure system load Whether it is in the virtual machine or container, it is necessary to read the load […]