jqGrid Constructor

jqGrid v4.6

by 1004lucifer

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-kr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<table id="list"><tr><td></td></tr></table> 
<div id="pager"></div>

JavaScript

var dataArray = [
      {
        "name": "Lorene Battle",
        "phone": "(936) 574-3976"
      },
      {
        "name": "Wendi Downs",
        "phone": "(815) 510-3017"
      },
      {
        "name": "Wendi Downs",
        "phone": "(815) 510-3017"
      },
      {
        "name": "Wendi Downs",
        "phone": "(815) 510-3017"
      },
      {
        "name": "Wendi Downs",
        "phone": "(815) 510-3017"
      },
      {
        "name": "Wendi Downs",
        "phone": "(815) 510-3017"
      },
      {
        "name": "Wendi Downs",
        "phone": "(815) 510-3017"
      }
    ];

    $(document).ready(function() {
      $("#list").jqGrid({
        datatype: 'local',
        styleUI: 'Foundation',
        data: dataArray,
        colModel: [
          {name: 'name', label : 'Name'},
          {name: 'phone', label : 'Phone Number'}
        ],
        caption : 'Users Grid',
        height: 'auto',
        rowNum: 5,
        sortname: 'phone',
        viewrecords: true,
        autowidth: true,
        headertitles: true,
        emptyrecords: '데이터가 없습니다.',
        multiselect: true,
        multiselectWidth: 20,
        multiboxonly: true,
        viewsortcols: [true,'vertical',true],
        sortable: true,
        pager: '#pager'
      });
    });