jquery中jtable方法怎么用

在jquery中，jtable方法用于创建基于Ajax的CRUD表格，是一个表格扩展插件，并且不需要进行html和JavaScript编码，语法为“<script src="jquery.jtable.min.js路径" type="text/javascript"></script>”。

本教程操作环境：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 () {          $('#PersonTableContainer').jtable({              title: '人员表',              actions: {                  listAction: '/GettingStarted/PersonList '，                 createAction：'/GettingStarted/CreatePerson'，                 updateAction：'/GettingStarted/UpdatePerson'，                 deleteAction：'/GettingStarted/DeletePerson'              }，             字段：{                  PersonId：{                     键：true，                     列表：false                  }，                 名称：{                     标题：'作者姓名'，                     宽度：'40%'                  }，                 年龄：{                     标题：'年龄'，                     宽度：'20%'                  }，记录日期                 ：{                     标题：'记录日期'，                     宽度：'30%'，                     类型：'日期'，                     创建：假，                     编辑：假                 }              }          }）；     });  </脚本>

视频教程推荐：jQuery视频教程