jquery에서 jtable 메소드를 사용하는 방법

jquery에서 jtable 메소드는 Ajax 기반의 CRUD 테이블을 생성하는 데 사용됩니다. 이는 테이블 확장 플러그인이며 HTML 및 JavaScript 코딩이 필요하지 않습니다. 구문은 "".

이 튜토리얼의 운영 환경: Windows 10 시스템, jquery 버전 3.6.0, Dell G3 컴퓨터.

jquery에서 jtable 메소드를 사용하는 방법

jTable은 HTML 및 JavaScript 코딩 없이 Ajax 기반 CRUD 테이블을 만드는 데 사용되는 jQuery 플러그인입니다.

다운로드 후 추가됨:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!