本篇内容介绍了“jquery中jtable方法如何用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
在jquery中,jtable方法用于创建基于Ajax的CRUD表格,是一个表格扩展插件,并且不需要进行html和JavaScript编码,语法为“<script src="jquery.jtable.min.js路径" type="text/javascript"></script>”。
本教程操作环境:windows10系统、jquery3.6.0版本、Dell G3电脑。
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中jtable方法如何用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。