jquery jqgrid 메소드

JQuery jqGrid는 강력하고 유연하며 사용자 정의가 가능한 JavaScript 테이블 플러그인으로, JQuery 프레임워크를 사용하여 개발되었으며 사용자가 복잡한 데이터 테이블을 빠르고 쉽게 생성하고 관리할 수 있도록 도와줍니다. 페이징, 정렬, 검색, 편집, 스크롤, 내보내기 등 풍부한 기능을 제공합니다.

JQuery jqGrid는 주로 웹 애플리케이션에서 데이터 테이블 표시 및 편집에 사용됩니다. XML, JSON, 로컬 배열 등 다양한 데이터 소스와 상호 작용할 수 있습니다. 사용자는 JQuery jqGrid 플러그인을 사용하여 복잡한 데이터 테이블을 사용자 친화적인 인터페이스로 변환하여 데이터를 더 쉽게 관리할 수 있습니다.

JQuery jqGrid란 무엇인가요?

JQuery jqGrid는 JQuery 프레임워크 및 오픈 소스 프로젝트를 기반으로 하는 JavaScript 테이블 플러그인입니다. 이는 여러 데이터 소스와의 상호 작용을 지원하고, 대량의 데이터를 처리할 수 있으며, 보다 유연하고 사용자 정의된 구성 옵션을 제공합니다.

JQuery jqGrid 기능:

1. 고도로 사용자 정의 가능하고 유연함

JQuery jqGrid는 간단하고 유연하게 사용할 수 있습니다. 사용자는 자신의 필요와 선호도에 맞게 양식의 모양과 기능을 조정할 수 있습니다.

2. 대량 데이터 처리

JQuery jqGrid는 대용량 데이터를 처리하고 페이징 및 스크롤 작업을 지원합니다. 이는 양식의 유용성과 효율성을 크게 향상시킵니다.

3. 다양한 데이터 형식 지원

JQuery jqGrid는 XML, JSON, 로컬 배열 등을 포함한 여러 데이터 형식과 상호 작용할 수 있습니다.

4. 정렬 및 검색 지원

JQuery jqGrid는 테이블의 열 데이터를 기반으로 정렬 작업을 수행하고 복잡한 검색을 수행할 수 있는 정렬 및 검색 기능을 제공합니다. 이를 통해 사용자는 필요한 데이터를 더 쉽게 찾을 수 있습니다.

5. 편집 및 행 작업 지원

JQuery jqGrid는 편집 및 행 작업을 수행할 수 있습니다. 사용자는 테이블 내에서 편집, 삭제, 복사, 붙여넣기 및 기타 작업을 수행할 수 있으며 행 끌기 및 크기 조정을 지원할 수 있습니다.

JQuery jqGrid 사용법

다음은 JQuery jqGrid 사용법을 소개합니다.

1. JQuery jqGrid 파일 소개

JQuery jqGrid의 CSS, JS 파일을 HTML 파일에 도입해야 합니다. 예:

<link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css"/>
<script type="text/javascript" src="jqgrid/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>

2. 테이블 태그 정의

HTML 파일에서 테이블 태그의 컨테이너 요소를 정의합니다. 예:

<div id="gridContainer"></div>

3. 테이블 속성 정의

URL, 열 이름, 열 너비를 포함한 테이블 속성 정의 그리고 데이터 형식을 기다리세요. 예:

var grid = $("#gridContainer");
grid.jqGrid({
    url: "getData.php",  //请求后台的URL地址
    datatype: "json",   //数据格式
    colNames: ['ID', 'Name', 'Age'],  //列名
    colModel: [           //列的属性
        { name: 'id', index: 'id', width: 55, sorttype: "int" },
        { name: 'name', index: 'name', width: 90 },
        { name: 'age', index: 'age', width: 80, align: "right", sorttype: "float" }
    ],
    rowNum: 10,  //每页显示的记录数目
    rowList: [10, 20, 30],  //每页显示记录数目的选项
    pager: "#gridPager",  //表格分页的容器
    sortable: true,  //是否允许列排序
    multiselect: true,  //是否允许多选
    viewrecords: true,  //是否显示记录数
    width: 780,  //表格宽度
    height: 250  //表格高度
});

4. Display table

페이지에 테이블 데이터 표시. 예:

grid.jqGrid('navGrid','#gridPager',{edit:false,add:false,del:false});

JQuery jqGrid 일반적인 방법:

1. jqGrid()

는 테이블을 초기화하고 속성을 설정하는 데 사용됩니다. 테이블의 구성.

2. navGrid()

는 추가, 편집, 삭제, 검색과 같은 작업을 지원하는 테이블 탐색 메뉴를 만드는 데 사용됩니다.

3. getRowData()

지정된 행의 데이터를 가져옵니다.

4. setRowData()

지정된 행의 데이터를 설정합니다.

5. addRowData()

테이블에 데이터 행을 추가합니다.

6. delRowData()

지정된 행의 데이터를 삭제합니다.

7. editRow()

지정된 행의 데이터를 편집합니다.

8. saveRow()

지정된 행의 데이터를 저장합니다.

요약:

JQuery jqGrid는 웹 애플리케이션에서 데이터 테이블을 개발하기 위한 매우 강력하고 유연하며 사용자 정의가 가능한 도구입니다. 다양한 데이터 소스와 상호 작용할 수 있도록 페이징, 정렬, 검색, 편집, 스크롤, 내보내기 등 다양한 기능을 제공합니다. 사용이 간편하고 유연하며 대량의 데이터를 처리할 수 있고 사용자 정의가 가능합니다. JQuery jqGrid의 다양한 방법을 이해하면 많은 수의 데이터 테이블을 더 잘 관리하고 표시할 수 있으므로 데이터를 더 쉽게 관리, 검색 및 분석할 수 있습니다.

위 내용은 jquery jqgrid 메소드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!