jQuery EasyUI學(xué)習(xí)教程之datagrid點(diǎn)擊列表頭排序
更新時(shí)間：2016年07月09日 10:43:24 作者：java簡(jiǎn)單例子
這篇文章主要介紹了jQuery EasyUI學(xué)習(xí)教程之datagrid點(diǎn)擊列表頭排序的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
這個(gè)示例展示如何排序datagrid通過(guò)點(diǎn)擊列表頭.
在datagrid的所有columns 可以通過(guò)點(diǎn)擊列表頭排序,你可以定義哪行可以排序,默認(rèn)的列是不能排序的除非你設(shè)置sortable 屬性為true
創(chuàng)建an DataGrid
<table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="datagrid8_getdata.php" title="Load Data" iconCls="icon-save" rownumbers="true" pagination="true"> <thead> <tr> <th field="itemid" width="80" sortable="true">Item ID</th> <th field="productid" width="80" sortable="true">Product ID</th> <th field="listprice" width="80" align="right" sortable="true">List Price</th> <th field="unitcost" width="80" align="right" sortable="true">Unit Cost</th> <th field="attr1" width="150">Attribute</th> <th field="status" width="60" align="center">Stauts</th> </tr> </thead> </table>
我們定義一些可排序的列包含itemid,productid,listprice,unitcost等等'attr1' 列和 'status'列不能排序.
當(dāng)排序DataGrid 將發(fā)送2個(gè)參數(shù)到遠(yuǎn)程服務(wù)器:
sort: 排序列字段名.
order: 排序方式, 可以是 'asc' 或者 'desc', 默認(rèn)值是 'asc'.
服務(wù)器端代碼
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$sort = isset($_POST['sort']) ? strval($_POST['sort']) : 'itemid';
$order = isset($_POST['order']) ? strval($_POST['order']) : 'asc';
$offset = ($page-1)*$rows;
$result = array();
include 'conn.php';
$rs = mysql_query("select count(*) from item");
$row = mysql_fetch_row($rs);
$result["total"] = $row[0];
$rs = mysql_query("select * from item order by $sort $order limit $offset,$rows");
$items = array();
while($row = mysql_fetch_object($rs)){
array_push($items, $row);
}
$result["rows"] = $items;
echo json_encode($result);
您可能感興趣的文章:
- 基于jquery實(shí)現(xiàn)多選下拉列表
- jQuery+Ajax請(qǐng)求本地?cái)?shù)據(jù)加載商品列表頁(yè)并跳轉(zhuǎn)詳情頁(yè)的實(shí)現(xiàn)方法
- jQuery插件select2利用ajax高效查詢(xún)大數(shù)據(jù)列表（可搜索、可分頁(yè)）
- jQuery實(shí)現(xiàn)Select下拉列表進(jìn)行狀態(tài)選擇功能
- jQuery實(shí)現(xiàn)聯(lián)動(dòng)下拉列表查詢(xún)框
- jquery實(shí)現(xiàn)圖片列表鼠標(biāo)移入微動(dòng)
- JQuery實(shí)現(xiàn)列表中復(fù)選框全選反選功能封裝(推薦)
- 基于jQuery和Bootstrap框架實(shí)現(xiàn)仿知乎前端動(dòng)態(tài)列表效果
- 利用jQuery對(duì)無(wú)序列表排序的簡(jiǎn)單方法
- 多功能jQuery樹(shù)插件zTree實(shí)現(xiàn)權(quán)限列表簡(jiǎn)單實(shí)例
- jQuery實(shí)現(xiàn)列表的增加和刪除功能
相關(guān)文章
jQuery中ajax請(qǐng)求后臺(tái)返回json數(shù)據(jù)并渲染HTML的方法
今天小編就為大家分享一篇jQuery中ajax請(qǐng)求后臺(tái)返回json數(shù)據(jù)并渲染HTML的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
jQuery中slideUp 和 slideDown 的點(diǎn)擊事件
這篇文章主要介紹了jQuery中slideUp 和 slideDown 的點(diǎn)擊事件的相關(guān)資料,需要的朋友可以參考下2015-02-02
輕松實(shí)現(xiàn)jquery選項(xiàng)卡切換效果
這篇文章主要幫助大家輕松實(shí)現(xiàn)jquery選項(xiàng)卡切換效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了jQuery中:has選擇器用法,實(shí)例分析了:has選擇器的功能、定義及匹配技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jQuery實(shí)現(xiàn)錨點(diǎn)向下平滑滾動(dòng)特效示例
下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)錨點(diǎn)向下平滑滾動(dòng)特效示例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
jQuery EasyUI Tab 選項(xiàng)卡問(wèn)題小結(jié)
這篇文章主要介紹了jQuery EasyUI Tab 選項(xiàng)卡問(wèn)題小結(jié),在項(xiàng)目開(kāi)發(fā)階段很多朋友都遇到過(guò)此問(wèn)題，其實(shí)解決辦法很簡(jiǎn)單的，下面小編給大家分享下問(wèn)題原因及解決辦法，需要的朋友可以參考下2016-08-08
基于jQuery的網(wǎng)頁(yè)右下角彈出廣告(IE7,firefox)
以前曾寫(xiě)過(guò)一個(gè),不過(guò)太麻煩了,呵呵```現(xiàn)在改進(jìn)了一下,其實(shí)很簡(jiǎn)單:css定位層一直在右下角,用js控制層的高度增減。2010-08-08
jQuery使用EasyUi實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)下拉框效果
本篇文章主要介紹了jQuery使用EasyUi實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果，實(shí)例使用EasyUi實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)技巧，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2017-03-03
JQUERY的AJAX請(qǐng)求緩存里的數(shù)據(jù)問(wèn)題處理
這篇文章主要介紹了JQUERY的AJAX請(qǐng)求緩存里的數(shù)據(jù)問(wèn)題處理的相關(guān)資料,需要的朋友可以參考下2016-02-02
jQuery通過(guò)改變input的type屬性實(shí)現(xiàn)密碼顯示隱藏切換功能
大家在做登錄注冊(cè)功能的時(shí)候都會(huì)遇到用戶(hù)選擇自己輸入的密碼是否顯示需求，大家都是怎么實(shí)現(xiàn)的呢？今天小編給大家分享一種比較好用的方法jQuery通過(guò)改變input的type屬性實(shí)現(xiàn)密碼顯示隱藏切換功能，需要的朋友參考下2017-02-02