首页 > 代码库 > 页面 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 可编辑的实现