X-editable快速编辑table表单,input,select等

最新推荐文章于 2024-09-14 08:51:09 发布

一个猴子请来的救兵

最新推荐文章于 2024-09-14 08:51:09 发布

阅读量676

点赞数

分类专栏：前端文章标签： bootstrap javascript ecmascript

原文链接：http://vitalets.github.io/x-editable/docs.html

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

X-editable

使用 Twitter Bootstrap、jQuery UI 或纯 jQuery 就地编辑

该库允许您在页面上创建可编辑元素。它可以与任何引擎（仅引导、jquery-ui、jquery）一起使用，并包括弹出和内联模式。请试用演示，看看它是如何工作的。

Demo
Documentation

引入CDN（在核心库之后）

Bootstrap

<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>

jquery-ui

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jqueryui-editable/css/jqueryui-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jqueryui-editable/js/jqueryui-editable.min.js"></script>

jquery

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/css/jquery-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/js/jquery-editable-poshytip.min.js"></script>

如

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

主要属性是：

type - 输入类型（文本、文本区域、选择等）
url - 用于处理提交值的服务器端脚本的 URL（/post、post.php 等）
pk - 要更新的记录的主键（数据库中的 ID）
id 或 name - 要更新的字段的名称（db 中的列）。取自 id 或 data-name 属性
value - 初始值。对 select 很有用，其中 value 是要显示的文本的整数键。如果为空 - 将从元素 html 内容中获取

设置可编辑模式：内联或弹出（默认）

//turn to inline mode
$.fn.editable.defaults.mode = 'inline';

popup
inline

将 editable() 方法应用于这些元素

$(document).ready(function() {
    $('#username').editable();
});

或者，您可以通过 javascript 设置所有选项

<a href="#" id="username">superuser</a>

$('#username').editable({
    showbuttons: false  // 是否显示按钮，若为false,点击回车保存输入内容
    type: 'text',
    pk: 1,
    url: '/post',
    title: 'Enter username'
    validate: function(value) { // 校验输入的值，可使用正则表达式
       if ($.trim(value) == '') {
           return 'This field is required';
       } else {
           if (!/^\d+$/.test(val)) {
               return '只能输入数字';
           }
       }
    }
});

一个完整的例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>X-editable starter template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- bootstrap -->
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>  

    <!-- x-editable (bootstrap version) -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js"></script>
    
    <!-- main.js -->
    <script src="main.js"></script>
  </head>

  <body>

    <div class="container">

      <h1>X-editable starter template</h1>

      <div>
        <span>Username:</span>
        <a href="#" id="username" data-type="text" data-placement="right" data-title="Enter username">superuser</a>
      </div>
      
      <div>
        <span>Status:</span>
        <a href="#" id="status"></a>
      </div>

      
    </div>
  <script type="text/javascript">  
	  $(document).ready(function() {
	    //toggle `popup` / `inline` mode
	    $.fn.editable.defaults.mode = 'popup';     
	    
	    //make username editable
	    $('#username').editable();
	    
	    //make status editable
	    $('#status').editable({
	        type: 'select',
	        title: 'Select status',
	        placement: 'right',
	        value: 2,
	        source: [
	            {value: 1, text: 'status 1'},
	            {value: 2, text: 'status 2'},
	            {value: 3, text: 'status 3'}
	        ]
	        /*
	        //uncomment these lines to send data on server
	        ,pk: 1
	        ,url: '/post'
	        */
	    });
	});
  </script>  
  </body>
</html>