table实时编辑函数封装
来源:互联网 发布:魔兽世界大脚mac 编辑:程序博客网 时间:2024/06/05 17:41
功能介绍:
- 该函数只需要传入两个参数即可实现表格的实时编辑
- 编辑后文本框失去焦点或按回车即可发送异步请求修改
- 如果检查到没有修改则不会发请求
- 服务器接收的参数固定为
_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即数据库主键id - con 需要修改的字段对应的内容
- 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"); });
阅读全文
0 0
- table实时编辑函数封装
- Lua封装打印Table函数
- OC-向table中添加数据&table的编辑模式&通过封装自定义cell
- JavaScript 编辑table
- table 动态编辑
- jquery 编辑table tr
- jquery 编辑table tr
- Jquery可编辑table
- table的编辑.删除
- Jquery可编辑table
- table行编辑
- table行编辑
- js编辑table td
- ajax 编辑保存table
- lua table封装
- 实时编辑表格,可以编辑的表格
- 实时编辑表格数据!DOM
- 实时协同编辑的实现
- Oracle基础教程-第四章 OEM与SQL*Plus
- 我所不知道的TCP Socket编程(六)-高级内容简介
- Servlet基础知识1
- SpringBoot 入门与配置
- 远程共享工具USB Network Gate v8.0.1828发布,支持Windows Server 2016
- table实时编辑函数封装
- linux内核队列实现
- 教你如何使用android studio发布release 版本(完整版)
- 剑指offer—写一个函数,求两个整数之和,要求在函数体内不得使用+、-、*、/四则运算符号。
- MTK6737N平台做反复重启开关机测试卡在开机动画界面不开机
- zTree全复制包含父子节点关系
- oracle data guard broker配置与使用(上)
- UICollectionView 设置section的背景色
- 基于centos搭建wordpress个人博客