使用jQuery和Pure.CSS创建一个可编辑的表格

使用开源组件真的可以容易又快速地为网站和app构建强大的前端元素。在本教程中,我会告诉你如何使用PureCSS和jQuery轻松地创建可编辑的表格。

如果想看教程演示的话,请点击这里查看

开始

你要做的第一件事情是,在你的服务器或本地硬盘上创建一个index.html文件。粘贴以下基本代码到新创建的文档中,然后保存。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Editable table</title>
        <style>
            body{ padding: 1% 3%; color: rgb(119, 119, 119); }
            h1{ color:#333 }
        </style>
    </head>
    <body>
        <h1>Editable table example</h1>
    </body>
</html>

现在我们需要获取我们将要在此教程中使用的免费工具。第一个是Pure.CSS。这是一个非常轻巧的CSS框架,极为适合小型项目。但是你不需要下载,因为从雅虎服务器可以直接链接。因此,你只需要粘贴以下代码到刚创建的index.html文件的<head>部分:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

我们要使用第二个工具是一个简单又甜蜜的名为editableTableWidget的jQuery插件。在这里下载.js文件并拖放到你的web服务器或本地硬盘驱动上,并且和你创建的index.html文件在同一个目录下。

都ok了?好的,让我们捣鼓一下这些漂亮的工具吧。

HTML

因为我们要创建一个可编辑的表格,所以现在我们做的事情自然是……创建一个HTML表格了。下面是一个我们将在这个教程中使用的HTML表格。代码需要粘贴到index.html文件的<body>部分:

<table id="editable" class="pure-table pure-table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
        </tr>
    </thead>
     <tbody>
         <tr>
             <td>1</td>
             <td>Honda</td>
             <td>Accord</td>
             <td>2009</td>
         </tr>
         <tr>
             <td>2</td>
             <td>Toyota</td>
             <td>Camry</td>
             <td>2012</td>
         </tr>
         <tr>
             <td>3</td>
             <td>Hyundai</td>
             <td>Elantra</td>
             <td>2010</td>
         </tr>
    </tbody>
</table>

看看你的index.html文件:感谢Pure.CSS,使得我们基本表格看起来优雅又专业。如果你想要知道更多Pure.CSS能对HTML表格做的事情,那么请查看相关文档

添加jQuery

我们的表格看起来不错,但它仍然是静态的。感谢jQuery和editableTableWidget插件,我们可以让表格变得可编辑。

要做的第一件事是链接到jQuery,因为我们要使用的插件依赖于它。你既可以使用你自己的jQuery副本,也可以Google CDN链接,像我下面展示的那样。我们还需要链接到我们前面下载的mindmup-editabletable.js文件。

将下面的代码插入到你的 index.html 文件中,就在结束的</body>标签上面。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
<script src="mindmup-editabletable.js"></script>

这样做好了之后,你还需要如下所示使得HTML表格可编辑。代码直接放在你刚刚添加的脚本下面。

<script>
    $('#editable').editableTableWidget();
</script>

完工。看看你创造了什么:该表格现在是可编辑的了。

更进一步

现在,我们已经有了一个全功能的可编辑的表格,何不更进一步,使之更佳?第一件事是要确定特定单元格是不能被编辑的。这不是什么大工程,只需要添加一个类到任意<td>元素中即可:

<td class="uneditable">...</td>

然后,使用下面的JavaScript代码来检测不可编辑的单元格的变化,并阻止:

$('#editable td.uneditable').on('change', function(evt, newValue) {
    return false;
});

如果你想要在演示中测试,那么可以尝试编辑表格右下角上面写着“2010”的单元格:你可以看到,该单元格的值是不可编辑的。

最后,如果你想要存储输入的值到数据库也可以。对此最简单的解决办法是使用jQuery和Ajax自动地发送值到PHP脚本,PHP脚本会处理数据并将其存储到数据库。

使用jQuery.post()方法,这实际上是小菜一碟。

$('#editable td').on('change', function(evt, newValue) {
    $.post( "script.php", { value: newValue })
    .done(function( data ) {
        alert( "Data Loaded: " + data );
    });
});

第1行中,我们使用事件侦听器来检查值有没有被用户更改。如果是的话,包含newValue变量的.post()请求会发送到服务器上的PHP脚本(script.php,不包括在本教程中)。

 

译文链接:http://www.codeceo.com/article/jquery-purecss-editable-table.html
英文原文:Create a Fancy Editable Table With jQuery and Pure.CSS
翻译作者:码农网 – 小峰

 

 

本文: 使用jQuery和Pure.CSS创建一个可编辑的表格

Leave a Reply