jquery中jtable方法怎么用

143 阅读 0 评论 95 点赞

我是靠谱客的博主飘逸向日葵，这篇文章主要介绍jquery中jtable方法怎么用，现在分享给大家，希望可以做个参考。

本教程操作环境：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>1
2
3
4
<!-- 包括其中一种 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>1
<div id="PersonTableContainer"></div>
登录后复制

创建一个 jTable 实例

将这些 JavaScript 代码添加到您的页面：

复制代码<script type="text/javascript"> 
    $(document).ready(function () { 
        $('#PersonTableContainer').jtable({ 
            title: '人员表', 
            actions: { 
                listAction: '/GettingStarted/PersonList '，
                createAction：'/GettingStarted/CreatePerson'，
                updateAction：'/GettingStarted/UpdatePerson'，
                deleteAction：'/GettingStarted/DeletePerson' 
            }，
            字段：{ 
                PersonId：{
                    键：true，
                    列表：false 
                }，
                名称：{
                    标题：'作者姓名'，
                    宽度：'40%' 
                }，
                年龄：{
                    标题：'年龄'，
                    宽度：'20%' 
                }，记录日期
                ：{
                    标题：'记录日期'，
                    宽度：'30%'，
                    类型：'日期'，
                    创建：假，
                    编辑：假
                } 
            } 
        }）；
    }); 
</脚本>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script type="text/javascript"> 
    $(document).ready(function () { 
        $('#PersonTableContainer').jtable({ 
            title: '人员表', 
            actions: { 
                listAction: '/GettingStarted/PersonList '，
                createAction：'/GettingStarted/CreatePerson'，
                updateAction：'/GettingStarted/UpdatePerson'，
                deleteAction：'/GettingStarted/DeletePerson' 
            }，
            字段：{ 
                PersonId：{
                    键：true，
                    列表：false 
                }，
                名称：{
                    标题：'作者姓名'，
                    宽度：'40%' 
                }，
                年龄：{
                    标题：'年龄'，
                    宽度：'20%' 
                }，记录日期
                ：{
                    标题：'记录日期'，
                    宽度：'30%'，
                    类型：'日期'，
                    创建：假，
                    编辑：假
                } 
            } 
        }）；
    }); 
</脚本>
登录后复制