功能介绍:
该函数只需要传入两个参数即可实现表格的实时编辑编辑后文本框失去焦点或按回车即可发送异步请求修改如果检查到没有修改则不会发请求服务器接收的参数固定为_id title con该函数修改失败的提示依赖layer插件可自行修改依赖
设置介绍:
html中给需要编辑的td单元格加上name属性即可让该单元格可编辑tr需要设置name 属性放置后台表的id作为修改条件
/** 双击编辑表格单元格* obj object 需要点击的表格单元格* url 需要请求的地址* callback 传入需要添加的html元素并返回元素的jq对象* id int 需要修改的列的id* title text 需要修改的字段名 不设置则不能编辑该单元格* con text 需要修改的字段对应的内容* */function editor(obj,url,callback) { var table = arguments[0]?arguments[0]:$("table tr td"); var postUrl = arguments[1]?arguments[1]:''; table.dblclick(function () { var con = $.trim($(this).text()); var id = $.trim($(this).parent().attr("name")); var title = $.trim($(this).attr("name")); if(!title){ return false; } //放置的html元素和对应的选中逻辑 var saveObj; if(callback) { saveObj = callback($(this), id, con, title); }else{ //不设置回调则使用默认值 $(this).html("<input type='text' class='update' value='"+con+"' name='"+id+"' title='"+title+"'>"); saveObj = $(".update"); } //默认返回对象 if(!saveObj){ saveObj = $(".update"); } //获得真实val值 var setVal = saveObj.val(); //获取文本框焦点 saveObj.focus(); //全选输入框中的文字 saveObj.select(); //失去焦点事件 saveObj.blur(function () { var text = $(this).val(); if(text == setVal){ $(this).parent().html(con); return false; } var id = $(this).attr("name"); var title = $(this).attr("title"); //todo发请求修改 $.post(postUrl, {_id: id, title: title, con: text}, function (res) { if (res.status) { return location.reload(); } return dialog.error(res.info,function () { location.reload(); }); }); }); //回车快捷完成编辑 $(window).keyup(function (e) { var code = e.keyCode; if(code === 13){ var blur = saveObj.is(":focus"); if(blur === false){ return false; }else{ saveObj.blur(); } } }); }); enter();}//弹窗回车确认function enter(obj) { var cli = arguments[0]?arguments[0]:0; $(window).keyup(function (e) { if(e.keyCode === 13){ var btn = $(".layui-layer-btn0"); var len = btn.length; if(len<=0) { if(cli != 0) { obj.click(); } }else{ btn.click(); } } });}
新增功能:
增加回调来设置更多的标签,例如,在回调中设置点击添加一个select 标签,并返回设置的对象做后续操作
callback 参数列表:
- obj 当前点击的
td单元格jquey对象用来添加设置单元格的html标签样式id 需要修改的tr列的id即数据库主键idcon 需要修改的字段对应的内容title 需要修改的字段名 不设置则不能编辑该单元格调用实例:
editor($("table tr td"),url,function (obj,id,con,title) { //title为type的时候需要添加一个select 否则只需要input框 if(title == 'type') { obj.html("<select class='update' name='" + id + "' title='" + title + "'><option value='1'>果实</option><option value='0'>增值服务</option></select>"); if (con == "果实") { $($(".update").get(0).options[0]).attr("selected", true); } else { $($(".update").get(0).options[1]).attr("selected", true); } }else{ obj.html("<input type='text' class='update' value='"+con+"' name='"+id+"' title='"+title+"'>"); } return $(".update"); });
以上就上有关table实时编辑函数封装的全部内容，学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。