页面 table 可编辑的实现

最新推荐文章于 2024-04-01 09:53:42 发布

转载最新推荐文章于 2024-04-01 09:53:42 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yqweber/p/4028259.html

文章标签：

#前端 #javascript #ViewUI

本文介绍两种实用的可编辑表格方案:X-editable与editableTableWidget。X-editable支持多种编辑方式如文本、下拉选择等，并可通过Ajax提交数据；editableTableWidget则更简洁易用，通过简单配置即可使表格具备编辑功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可编辑table 实现目前我用到的比较好用的有两个：

X-editable

支持bootstrap，jqueryUi, jquery

用法：

　　引入jquery.min.js 就不用说了

　　其次页面引入：

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//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 就行

转载于:https://www.cnblogs.com/yqweber/p/4028259.html