页面 table 可编辑的实现

可编辑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 就行

时间: 2024-10-09 05:21:14

页面 table 可编辑的实现的相关文章

页面table的每行都有一个&lt;input type=&#39;button&#39; /&gt;,如何实现点击按钮在按钮下方弹出一个div,点击空白消失

\ <input id="test" type="button" />/*按钮*/ <div id="tanchu"></div> <script language="javascript"> $(document).ready(function(e) { $("#test").click(function(e) { $("#tanchu"

zencart简易页面ezpage后台编辑位置

zencart简易页面ezpage后台编辑位置: 后台-Tools(工具)-EZ-Pages(简易页面管理) 若编辑之后无法保存,说明includes\languages\语言包\html_includes目录及子目录下php文件不可写. 解决办法: 登录FTP,将html_includes目录及子目录下的php文件属性设为777即可. 为了安全,编辑完成之后,要将php文件属性设为755.

简单粗暴的table行编辑保存

前段时间有人私信问"有没有点击编辑按钮相应的一行变成编辑状态",最后交流了一会儿,只能写了一个简单的Demo,也就是上一篇博文:<最原始的行编辑>,完事后问题又来了,编辑完成后保存能行否?这个问题你们觉得答案是什么,我就不说了,答案你们定...最后强调了一句,编程一定要有自己的思路和想法!!!今天就把剩下的想要的给大家~~~ <html> <head> <title>Table Test Demo</title> <st

jsp页面table列表

<%@ page language="java" pageEncoding="UTF-8"%><%@ page language="java" import="com.tepper.common.ToolConstants"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

HTML页面常用的编辑框

public class FormInputUtil { /** * 获取表单中的InputText * * @param name * @param rs * @return */ public static String getFormInput(String name, ResultSet rs) { StringBuffer buffer = new StringBuffer(); try { buffer.append("<input type=\"text\"

html5 contenteditable 实现table可编辑(网页版EXCEL)

一直想找一个免费的网页版的EXCEL插件,以便于多人共同在线编辑,始终没发现合适的. 其实自己实现类似功能也不难.参考:https://blog.csdn.net/chadcao/article/details/52014730 直接将以下代码存在本地目录中,如A.html,双击在浏览器中打开,即可对 姓名 字段进行编辑. <!doctype html> <html> <head> <title>table contenteditable</title

Knockout 实现table在线编辑功能

@{ ViewBag.Title = "Tracking"; Layout = "~/Views/Shipment/_ShipmentLayout.cshtml"; } <div class="table-responsive"> <table id="EditTable" class="table table-striped table-hover"> <thead>

table行编辑

一个简单的Demo <html> <head> <title>Table Test Demo</title> <style> .view_table { width:800px; height:auto; margin:0px auto; } .view_table table { width: 100%; font-size: 12px; font-family: "Microsoft YaHei" !important;

Bootstrap table 行编辑导航

/*开启表格编辑方向键导航 方向键(←): VK_LEFT (37) 方向键(↑): VK_UP (38) 方向键(→): VK_RIGHT (39) 方向键(↓): VK_DOWN (40) */ function OpenTableEditKeyNavigation() { $(document).on("keyup", "tr.editable-select input", function (event) { var keyCode = event.keyC