Jqgrid의 강력한 테이블 플러그인 application

Jqgrid의 강력한 테이블 플러그인 application_jquery

WBOY

풀어 주다： 2016-05-16 15:28:10

원래의

1329명이 탐색했습니다.

jqGrid는 jQuery를 기반으로 하는 강력한 테이블 플러그인으로, jqGrid를 사용하면 프런트 엔드 페이지와 백그라운드 데이터 간의 ajax 비동기 통신을 쉽게 구현할 수 있으며 매우 빠르게 실행되며 일부 백그라운드 관리 시스템에서 잘 사용될 수 있습니다. 수많은 데이터 상황을 관리합니다.

jqGrid 기능:

jquery UI 테마를 기반으로 개발자는 고객 요구 사항에 따라 다양한 테마를 변경할 수 있습니다.
현재 널리 사용되는 모든 웹 브라우저와 호환됩니다.
Ajax 페이징은 각 페이지에 표시되는 레코드 수를 제어할 수 있습니다.
XML, JSON, 배열 형식의 데이터 소스를 지원합니다.
풍부한 옵션 구성 및 메소드 이벤트 인터페이스를 제공합니다.
테이블 정렬, 열 끌기 및 열 숨기기를 지원합니다.
스크롤링 데이터 로딩을 지원합니다.
데이터 내용의 실시간 편집 및 저장을 지원합니다.
하위 테이블과 트리 테이블을 지원합니다.
여러 언어를 지원합니다.
가장 중요한 것은 현재 무료라는 것입니다.

jqGrid 사용 방법

1. 먼저 jqGrid 공식 웹사이트에서 최신 버전의 패키지를 다운로드해야 합니다. http://www.trirand.com/blog/
2. WEB 디렉토리에 두 개의 새로운 css 및 js 폴더를 생성하고 관련 css 및 js 파일을 배치한 후 index.html 페이지 파일을 생성하고 즐겨 사용하는 텍스트 편집기로 열고 코드를 입력합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ 
xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Grid</title> 
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" /> 
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" /> 
<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script> 
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 
</head> 
<body> 
... 
</body> 
</html>

로그인 후 복사

3. 본문에 다음 코드를 추가합니다.

<table id="list"></table> 
<div id="pager"></div>

로그인 후 복사

#list는 데이터 목록을 불러오는 데 사용되고, #page는 페이징 바를 표시하는 데 사용됩니다.

4. jqGrid 플러그인을 호출하고 다음 js 코드를 페이지에 추가합니다

$("#list").jqGrid({ 
  caption: '手机产品列表', 
  url:'server.php', 
  datatype: "json", 
    colNames:['编号','名称','主屏尺寸','操作系统','电池容量', '价格(￥)','操作'], 
    colModel:[ 
      {name:'sn',index:'sn', width:80,align:'center'}, 
      {name:'title',index:'title', width:180}, 
      {name:'size',index:'size', width:120}, 
    {name:'os',index:'os', width:120}, 
      {name:'charge',index:'charge', width:100,align:'center'}, 
    {name:'price',index:'price', width:80,align:'center'}, 
      {name:'opt',index:'opt', width:80, sortable:false, align:'center'}     
    ], 
    rowNum:10, 
    rowList:[10,20,30], 
    pager: '#pager', 
    sortname: 'id', 
  autowidth: true, 
  height:280, 
  viewrecords: true, 
  multiselect: true, 
  multiselectWidth: 25, 
  sortable:true, 
  sortorder: "asc" 
 });

로그인 후 복사

이때 index.html을 미리 보면 테이블 모양이 랜더링 되어 있고 데이터만 채워져 있는 것을 볼 수 있습니다. 이 시점에서도 여전히 결과가 표시되지 않으면 파일 경로가 올바른지 확인하세요.

5. 데이터를 로드합니다.

php를 사용하여 mysql 데이터를 읽고 json 형식의 데이터를 jqGrid에 반환하여 데이터를 표시합니다. 휴대폰 제품정보를 기록하기 위한 데이터 테이블을 준비합니다.

구성은 다음과 같습니다.

CREATE TABLE IF NOT EXISTS `products` ( 
 `id` int(11) NOT NULL AUTO_INCREMENT, 
 `sn` varchar(10) NOT NULL, 
 `title` varchar(60) NOT NULL, 
 `size` varchar(30) NOT NULL, 
 `os` varchar(50) NOT NULL, 
 `charge` varchar(50) DEFAULT NULL, 
 `screen` varchar(50) DEFAULT NULL, 
 `design` varchar(50) DEFAULT NULL, 
 `price` int(10) NOT NULL, 
 `addtime` datetime NOT NULL 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

로그인 후 복사

다음으로 server.php에서 데이터를 읽고 json 데이터를 출력합니다.

//连接数据库 
include_once ('connect.php'); 
$page = $_GET['page']; 
$limit = $_GET['rows']; 
$sidx = $_GET['sidx']; 
$sord = $_GET['sord']; 
if (!$sidx) 
  $sidx = 1; 
$result = mysql_query("SELECT COUNT(*) AS count FROM products where deleted=0"); 
$row = mysql_fetch_array($result, MYSQL_ASSOC); 
$count = $row['count']; 
if ($count > 0) { 
  $total_pages = ceil($count / $limit); 
} else { 
  $total_pages = 0; 
} 
if ($page > $total_pages) 
  $page = $total_pages; 
$start = $limit * $page - $limit; 
$SQL = "SELECT * FROM products WHERE deleted=0 ORDER BY $sidx $sord LIMIT $start , $limit"; 
$result = mysql_query($SQL) or die("Couldn t execute query." . mysql_error()); 
$responce->page = $page; 
$responce->total = $total_pages; 
$responce->records = $count; 
$i = 0; 
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { 
  $responce->rows[$i]['id'] = $row[id]; 
  $opt = "<a href='edit.php'>修改</a>"; 
  $responce->rows[$i]['cell'] = array ( 
    $row[sn], 
    $row[title], 
    $row[size], 
    $row[os], 
    $row[charge], 
    $row[price], 
    $opt 
  ); 
  $i++; 
} 
echo json_encode($responce);

로그인 후 복사

이때 데이터 테이블에 데이터를 입력하면 페이지에 데이터 테이블을 표시한 후 정렬과 페이징을 할 수 있습니다. 다음으로 jqGrid 옵션 설명을 문서로 정리하여 모두와 공유하겠습니다. 그런 다음 실제 프로젝트 적용부터 시작하여 삭제, 보기, 데이터 검색 및 기타 서비스 적용에 대해 설명하는 예제를 제공하겠습니다.