jquery ajax双击div可直接修改div中的内容
内容摘要
最近在做后台功能开发的时候,用到对排序字段的修改,感觉只为了修改一个排序值,而要重新进入编辑页比较麻烦,于是网上找点资料自己动手写了一个jquery双击实现直接修改排序值的效
文章正文
最近在做后台功能开发的时候,用到对排序字段的修改,感觉只为了修改一个排序值,而要重新进入编辑页比较麻烦,于是网上找点资料自己动手写了一个jquery双击实现直接修改排序值的效果:
html代码:
1 | <div title= "【双击可直接修改】" class = "changeSort" id= "{$id}" >{ $sort }</div> |
JS代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <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 (){ // 失去焦点,保存值。于服务器交互自己再写,最好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代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <?PHP /** * ajax 设置排序值 */ public function setSort(){ if (IS_POST){ $tid = I( 'post.tid' ); $sort = I( 'post.sort' ); if (! is_numeric ( $sort )){ $arr = array ( 'flag' =>3, 'msg' => '请输入数字' , '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' => '排序值设置成功' , 'link' => '' , 'content' => '' ); } else { $arr = array ( 'flag' =>2, 'msg' => '排序值设置失败' , 'link' => '' , 'content' => '' ); } } else { $arr = array ( 'flag' =>0, 'msg' => '请求非法!' , 'link' => '' , 'content' => '' ); } $this ->ajaxReturn( $arr ); } ?> |
效果如下图:
以上就是本文的全部内容,希望对大家的学习有所帮助。
代码注释