PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

jquery中jtable方法怎么用

WBOY
WBOY 原创
2022-06-24 16:08:38 1580浏览

在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视频教程

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。