本文實(shí)例講述了tp5框架基于Ajax實(shí)現(xiàn)列表無(wú)刷新排序功能。分享給大家供大家參考，具體如下：
在后臺(tái)管理的時(shí)候我們有時(shí)需要對(duì)數(shù)據(jù)進(jìn)行排序，以控制數(shù)據(jù)在模板顯示的順序，排序的原理就是修改數(shù)據(jù)庫(kù)，然后更新視圖。我們可以單獨(dú)寫一個(gè)方法來(lái)實(shí)現(xiàn)排序的功能，成功后刷新頁(yè)面，也可以利用Ajax技術(shù)，實(shí)現(xiàn)數(shù)據(jù)的局部請(qǐng)求，也就是無(wú)刷新排序的功能。
現(xiàn)在想要達(dá)到的效果是在排序的input框中輸入數(shù)值，點(diǎn)擊排序?qū)崿F(xiàn)無(wú)刷新排序的功能。
首先是表格（cate.html）這一塊我們要單獨(dú)摘出來(lái)，放入到一個(gè)單獨(dú)頁(yè)面當(dāng)中，方便我們數(shù)據(jù)的請(qǐng)求。
table class="table table-bordered">
{include file="news/cateajaxpage"}
/table>
其中cateajaxpage.html的內(nèi)容為：
thead>
tr>
th>ID/th>
th>分類名稱/th>
th>排序/th>
th>操作/th>
/tr>
/thead>
tbody>
{volist name="news" id="vo"}
tr>
td>{$vo.id}/td>
td>{$vo.name}/td>
td>input type="text" value="{$vo.order}" name="{$vo.id}">/td>
td>
div class="btn-group open">
button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" aria-expanded="true">操作 span class="caret">/span>
/button>
ul class="dropdown-menu">
li>a href="{:url('admin/news/cateadd',array('id'=>$vo.id))}" rel="external nofollow" >添加子分類/a>
/li>
li>a href="{:url('admin/news/cateupd',array('id'=>$vo.id))}" rel="external nofollow" >修改/a>
/li>
li>a href="javascript:if(confirm('確認(rèn)刪除？')) location='{:url('admin/news/del',array('id'=>$vo.id))}'" rel="external nofollow" >刪除/a>
/li>
/ul>
/div>
/td>
/tr>
{volist name="$vo.children" id="vo1"}
tr>
td>{$vo1.id}/td>
td>|————{$vo1.name}/td>
td>input type="text" value="{$vo1.order}" name="{$vo1.id}">/td>
td>
div class="btn-group open">
button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" aria-expanded="true">操作 span class="caret">/span>
/button>
ul class="dropdown-menu">
li>a href="{:url('admin/news/cateupd',array('id'=>$vo1.id))}" rel="external nofollow" >修改/a>
/li>
li>a href="javascript:if(confirm('確認(rèn)刪除？')) location='{:url('admin/news/del',array('id'=>$vo1.id))}'" rel="external nofollow" >刪除/a>
/li>
/ul>
/div>
/td>
/tr>
{/volist}
{/volist}
/tbody>
這里因?yàn)槭褂昧藷o(wú)限級(jí)分類得到多維數(shù)組的技術(shù)，所以會(huì)有兩個(gè)volist，如果你不太懂無(wú)限級(jí)分類的話可以分配過(guò)來(lái)一個(gè)普通的數(shù)據(jù)過(guò)來(lái)，重點(diǎn)是：
input type="text" value="{$vo.order}" name="{$vo.id}">/td>
這句在顯示排序值得同時(shí)，為每一個(gè)input框設(shè)置了一個(gè)name值，這個(gè)值就是分類的id值，通過(guò)這種方式，可以為列表當(dāng)中的所有input框進(jìn)行區(qū)分，且能通過(guò)數(shù)據(jù)庫(kù)獲取到對(duì)應(yīng)的分類。
回到cate.html，寫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();
})
});
其中changeOrder是我們?yōu)榕判虬粹o添加的id值，我們把每一組id、order都放進(jìn)json變量當(dāng)中，傳遞給控制器。
控制器代碼：
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();
}
}
因?yàn)樯婕暗綗o(wú)限級(jí)分類，所以使用了模型層獲取數(shù)據(jù)，getNews方法是獲取到無(wú)限級(jí)分類后的數(shù)據(jù)，這塊大家可以直接使用數(shù)據(jù)庫(kù)獲取數(shù)據(jù)，需要注意的是處理Ajax請(qǐng)求的時(shí)候，我們根據(jù)POST信息進(jìn)行數(shù)據(jù)更新，再數(shù)據(jù)更新以后再查詢數(shù)據(jù)庫(kù)，將數(shù)據(jù)分配到模板上。
更多關(guān)于thinkPHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《ThinkPHP入門教程》、《thinkPHP模板操作技巧總結(jié)》、《ThinkPHP常用方法總結(jié)》、《codeigniter入門教程》、《CI(CodeIgniter)框架進(jìn)階教程》、《Zend FrameWork框架入門教程》及《PHP模板技術(shù)總結(jié)》。
希望本文所述對(duì)大家基于ThinkPHP框架的PHP程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:- ThinkPHP5.1+Ajax實(shí)現(xiàn)的無(wú)刷新分頁(yè)功能示例
- ThinkPHP5 通過(guò)ajax插入圖片并實(shí)時(shí)顯示(完整代碼)
- Thinkphp5框架ajax接口實(shí)現(xiàn)方法分析
- TP5(thinkPHP5)框架基于ajax與后臺(tái)數(shù)據(jù)交互操作簡(jiǎn)單示例
- thinkPHP5框架實(shí)現(xiàn)基于ajax的分頁(yè)功能示例
- thinkPHP5 ajax提交表單操作實(shí)例分析
- ThinkPHP中ajax使用實(shí)例教程
- ThinkPHP中使用ajax接收json數(shù)據(jù)的方法
- ThinkPHP使用心得分享-ThinkPHP + Ajax 實(shí)現(xiàn)2級(jí)聯(lián)動(dòng)下拉菜單
- tp5框架基于ajax實(shí)現(xiàn)異步刪除圖片的方法示例
