jquery中jtable方法怎麼用

在jquery中，jtable方法用於建立基於Ajax的CRUD表格，是一個表格擴充插件，不需要進行html和JavaScript編碼，語法為「」。

本教學操作環境：windows10系統、jquery3.6.0版本、Dell G3電腦。

jquery中jtable方法怎麼用

jTable 是一個 jQuery 外掛程式用來建立基於 Ajax 的 CRUD 表格，無需進行 HTML 和 JavaScript 編碼。

下載後增加：

將這些行新增至  HTML 文件的HEAD部分：

<!-- 包括其中一种 jTable 样式。-->
<link href="/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
<!-- 包含jTable脚本文件。-->
<script src="/jtable/jquery.jtable.min.js" type="text/javascript"></script>

您可以在主題資料夾中選擇任何主題和色彩模式。

注意：您還必須在匯入 jTable 檔案之前新增所需 的 jQuery 和 jQueryUI  JavaScript 和 CSS 檔案。

建立容器

jTable 只需要一個用於表格的容器元素。

<div id="PersonTableContainer"></div>

建立一個jTable 實例

將這些JavaScript 程式碼新增至您的頁面：

<script type="text/javascript"> 
    $(document).ready(function () { 
        $(&#39;#PersonTableContainer&#39;).jtable({ 
            title: &#39;人员表&#39;, 
            actions: { 
                listAction: &#39;/GettingStarted/PersonList &#39;，
                createAction：&#39;/GettingStarted/CreatePerson&#39;，
                updateAction：&#39;/GettingStarted/UpdatePerson&#39;，
                deleteAction：&#39;/GettingStarted/DeletePerson&#39; 
            }，
            字段：{ 
                PersonId：{
                    键：true，
                    列表：false 
                }，
                名称：{
                    标题：&#39;作者姓名&#39;，
                    宽度：&#39;40%&#39; 
                }，
                年龄：{
                    标题：&#39;年龄&#39;，
                    宽度：&#39;20%&#39; 
                }，记录日期
                ：{
                    标题：&#39;记录日期&#39;，
                    宽度：&#39;30%&#39;，
                    类型：&#39;日期&#39;，
                    创建：假，
                    编辑：假
                } 
            } 
        }）；
    }); 
</脚本>

影片教學推薦：jQuery影片教學

##### ###

以上是jquery中jtable方法怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！