首页 > 代码库 > 页面 table 可编辑的实现
页面 table 可编辑的实现
可编辑table 实现目前我用到的比较好用的有两个:
X-editable
支持bootstrap,jqueryUi, jquery
用法:
引入jquery.min.js 就不用说了
其次页面引入:
<link href="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/><script src="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
js 调用:
$(".deport").editable({ type: ‘select‘,source:deport});
有两种编辑:行内打开和tips 打开方式:
这种事popur
这种是inline
代码设置
$.fn.editable.defaults.mode = ‘inline‘;
编辑方式:
$(‘#status‘).editable({ value: 2, source: [ {value: 1, text: ‘Active‘}, {value: 2, text: ‘Blocked‘}, {value: 3, text: ‘Deleted‘} ] });
$(‘#username‘).editable({ type: ‘text‘, pk: 1, url: ‘/post‘, title: ‘Enter username‘});
type :鼠标点击的编辑方式,text 表示 是文本框,select 表示是下拉,source 表示绑定下拉的数据源。支持以下的
- text
- textarea
- select
- date
- datetime
- dateui
- combodate
- html5types
- checklist
- wysihtml5
- typeahead
- typeaheadjs
- select2
还有一个提交验证的方法 validate,值得注意的是validate方法是在修改完成之后调用,但是并不表示数据已经在页面上了,此时的数据还没有更新到页面上。
还有提供ajax 提交的,具体更多参考:http://vitalets.github.io/x-editable/docs.html
editableTableWidget
这个来说相比简单的多
http://mindmup.github.io/editable-table/
使用:
$(‘#table‘).editableTableWidget();
验证数据:
$(‘table td‘).on(‘validate‘, function(evt, newValue) { if (....) { return false; // mark cell as invalid }});
修改完成事件:
$(‘table td‘).on(‘change‘, function(evt, newValue) { // do something with the new cell value if (....) { return false; // reject change }});
这里的onchange 和x-edittable 不一样,这里的onchange是数据已经修改完成之后触发的回调。
技巧:此js 会让所有的td 可编辑,如果不想编辑某个单元格,将td标签换成th 就行
页面 table 可编辑的实现
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。