jquery ajax雙擊div可直接修改div中的內(nèi)容
最近在做后臺(tái)功能開(kāi)發(fā)的時(shí)候,用到對(duì)排序字段的修改,感覺(jué)只為了修改一個(gè)排序值,而要重新進(jìn)入編輯頁(yè)比較麻煩,于是網(wǎng)上找點(diǎn)資料自己動(dòng)手寫(xiě)了一個(gè)jquery雙擊實(shí)現(xiàn)直接修改排序值的效果:
html代碼:
<div title="【雙擊可直接修改】" class="changeSort" id="{$id}">{$sort}</div>
JS代碼:
<script type="text/javascript"> //雙擊修改排序 $('.changeSort').dblclick(function(){ var url = "{:U('setSort')}"; var td = $(this); var id = td.attr('id'); var text = td.text(); var txt = $("<input type='text' class='input-small' >").val(text); txt.blur(function(){ // 失去焦點(diǎn),保存值。于服務(wù)器交互自己再寫(xiě),最好ajax var newText = $(this).val(); $.ajax({ url:url, type:'POST', data:{'tid':id,'sort':newText}, dataType:'json', success:function(res){ if(res.flag==1){ layer.msg(res.msg); // 移除文本框,顯示新值 $(this).remove(); td.text(newText); }else if(res.flag==3){ layer.msg(res.msg); txt.val(newText); } } }); }); td.text(""); td.append(txt); }); </script>
PHP代碼:
<?PHP /** * ajax 設(shè)置排序值 */ public function setSort(){ if(IS_POST){ $tid = I('post.tid'); $sort = I('post.sort'); if(!is_numeric($sort)){ $arr = array( 'flag'=>3, 'msg'=>'請(qǐng)輸入數(shù)字', 'link'=>'', 'content'=>'' ); $this->ajaxReturn($arr); } $data = array( 'id'=>$tid, 'sort'=>$sort ); $this->mod_sort = M('Sort'); $res = $this->mod_sort->save($data); if($res){ $arr = array( 'flag'=>1, 'msg'=>'排序值設(shè)置成功', 'link'=>'', 'content'=>'' ); }else{ $arr = array( 'flag'=>2, 'msg'=>'排序值設(shè)置失敗', 'link'=>'', 'content'=>'' ); } }else{ $arr = array( 'flag'=>0, 'msg'=>'請(qǐng)求非法!', 'link'=>'', 'content'=>'' ); } $this->ajaxReturn($arr); } ?>
效果如下圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- AJAX 自學(xué)練習(xí) 無(wú)刷新提交并修改數(shù)據(jù)庫(kù)數(shù)據(jù)并顯示
- 用Jquery實(shí)現(xiàn)可編輯表格并用AJAX提交到服務(wù)器修改數(shù)據(jù)
- Ajax修改數(shù)據(jù)即時(shí)顯示篇實(shí)現(xiàn)代碼
- jquery ajax修改全局變量示例代碼
- Ajax修改購(gòu)物車(chē)示例
- jquery formValidator插件ajax驗(yàn)證 內(nèi)容不做任何修改再離開(kāi)提示錯(cuò)誤的bug解決方法
- jQuery+ajax實(shí)現(xiàn)鼠標(biāo)單擊修改內(nèi)容的方法
- php通過(guò)ajax實(shí)現(xiàn)雙擊table修改內(nèi)容
- jQuery+ajax實(shí)現(xiàn)鼠標(biāo)單擊修改內(nèi)容的思路
- ajax實(shí)現(xiàn)修改功能
相關(guān)文章
jquery實(shí)現(xiàn)橫向圖片輪播特效代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)橫向圖片輪播特效代碼,效果很精致,實(shí)現(xiàn)方法很簡(jiǎn)單,特推薦給大家,希望大家可以喜歡。2015-11-11jquery實(shí)現(xiàn)圖片漸變切換兼容ie6/Chrome/Firefox
jquery代碼實(shí)現(xiàn)圖片漸變切換同時(shí)兼容ie6、Chrome、Firefox,想學(xué)習(xí)的朋友可以測(cè)試下,希望對(duì)大家有所幫助2013-08-08jQuery圖片縮放插件smartZoom使用實(shí)例詳解
本文通過(guò)實(shí)例代碼給大家簡(jiǎn)單介紹了jQuery圖片縮放插件smartZoom使用以及遇到問(wèn)題的解決方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-08-08jQuery實(shí)現(xiàn)產(chǎn)品對(duì)比功能附源碼下載
一些電商網(wǎng)站產(chǎn)品或評(píng)測(cè)網(wǎng)站會(huì)為用戶提供產(chǎn)品對(duì)比的功能,用戶只需勾選多個(gè)需要對(duì)比的產(chǎn)品,就可以進(jìn)行比對(duì),下文給大家?guī)?lái)了jQuery實(shí)現(xiàn)產(chǎn)品對(duì)比功能,一起看下吧2016-08-08在一個(gè)頁(yè)面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動(dòng)的方法
最近發(fā)現(xiàn)項(xiàng)目中很多地方都是樹(shù)形菜單,而這些樹(shù)形菜單都是使用樹(shù)形插件zTree來(lái)制作的,下面這篇文章主要給大家介紹了關(guān)于在一個(gè)頁(yè)面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動(dòng)的相關(guān)資料,需要的朋友可以參考借鑒,下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12jquery設(shè)置表單元素為不可用的簡(jiǎn)單代碼
下面小編就為大家?guī)?lái)一篇jquery設(shè)置表單元素為不可用的簡(jiǎn)單代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07使用element-ui的el-menu導(dǎo)航選中后刷新頁(yè)面保持當(dāng)前選中狀態(tài)
這篇文章主要介紹了使用element-ui的el-menu導(dǎo)航選中后刷新頁(yè)面保持當(dāng)前選中狀態(tài),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07