双击 ajax修改单元格里的值

最终效果

列表页面表格里双击排序修改其值

按钮样式要引入bootstrap才可以用

本文件用的是laravel框架环境

larave路由里

 Route::get('category/changestatus','Admin\CategoryController@changestatus')->name('admin.category.changestatus'); //修改属性排序/修改名字

html表格里

<script type="text/javascript">

    var changeValue_url = "/admin/category/changestatus"; //双击修改值(如排序,名字)

</script>

<td>

	<span ondblclick="changeValue(this,{{ $vo['id'] }},'sort')">{{ $vo['sort'] }}</span>

	<input style="text-align: center;display: none"  class="input-text size-MINI " type="text" value="{{ $vo['sort'] }}">

</td>

<!--共用js-->

<script type="text/javascript" src="/rap/admin/static/common.js"></script> //用户共用的js文件

共用的common.js里

//双击修改值(如排序,名字)

/**

 *

 * @param $this 当前操作的元素

 * @param $id 主键id

 * @param $name  要修改的字段名字

 */

function changeValue($this,$id,$name){

    // console.log($id,$name);

    var current_span = $($this).hide();

    var current_input=current_span.siblings('input');

    current_input.show();

    $(current_input).unbind("blur").bind("blur",function(){

        if($id == ''){

            layer.alert('属性id不能为空.', {icon: 5});

            return false;

        }

        //拿到当前input里输入的值

        // var current_input_value=current_input.val(); //效果和下面一行一样

        var current_input_value = $(this).val();

        if(current_input_value == ''){

            layer.alert('排序值不能为空.', {icon: 5});

            return false;

        }

        if($name == 'sort'){

            //匹配正整数

            var int_v = /[1-9]\d*$/;  //特殊字符

            if(!int_v.test(current_input_value)) {

                layer.alert('排序值只能为正整数.', {icon: 5});

                return false;

            }

        }

        var cv_url = changeValue_url; //拿调用页面里全局js里的url

            cv_url += '?id='+$id;

            cv_url += '&'+ $name + '=' + current_input_value ;

        $.get(cv_url,function(res){

            if(res.code != 0){

                layer.alert(res.msg, {icon: 5});

                return false;

            }else{

                layer.alert(res.msg, {icon: 6});

//                   current_input.val(sort);

//                   current_input.hide();

//                   current_span.html(sort);

//                   current_span.show();

                $('table').load(location.href + ' table');

            }

        },'json');

    });

}

控制器里:

   //http://api.hm/admin/category/changestatus

    //修改状态

    public function changestatus(Request $request)

    {

        $data = $request->all();

//        returnMsg(1,'ok.',$data);

        if(empty($data['id'])){

            returnMsg(1,'id不能为空.');

        }

        if(isset($data['sort'])){

            //验证

            $validator = Validator::make($request->all(),

                [

                    'sort' => 'bail|required| integer',

                ],

                [

                    'sort.required' => '排序必选',

                    'sort.integer' => '排序应为整数',

                ]

            );

            if ($validator->fails()) {

                $error=$validator->messages()->messages();

                $msg = '';

                if($error){

                    foreach ($error as $v){

                        $msg .= $v[0] . '; ';

                    }

                }

                returnMsg(1,$msg);

            }

        }

        $changeRes= DB::table('goods_category')

            ->where('id', $data['id'])

            ->update($data);

        if(!$changeRes){

            returnMsg(1,'修改失败.');

        }

        returnMsg(0,'修改成功.');

    }

返回json函数 放在公共方法里

/**

 * Created by Haima.

 * Author:Haima

 * QQ:228654416

 * Date: 2019-02-27

 * Time: 9:24

 */

/**

 * 公用的方法  返回json数据，进行信息的提示

 * @param $status 状态

 * @param string $message 提示信息

 * @param array $data 返回数据

 */

function returnMsg($status,$message = '',$data = array()){

    $result = array(

        'code' => $status,

        'msg' =>$message,

        'data' =>$data

    );

    exit(json_encode($result,JSON_UNESCAPED_UNICODE));

}

/*