jqGrid - table id

by 1004lucifer

HTML

<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>
<div id="app">
  <table ref="list1" id="list1"><tr><td></td></tr></table> 
  <div id="pager1"></div>
  <br /><br />
  <table ref="list2"><tr><td></td></tr></table> 
  <div id="pager2"></div> 
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data () {
    return {
      dataArray: [
        {
          "name": "Lorene Battle",
          "phone": "(936) 574-3976"
        },
        {
          "name": "Wendi Downs",
          "phone": "(815) 510-3017"
        },
        {
          "name": "Hatfield Hinton",
          "phone": "(983) 515-2327"
        }
      ]
    }
  },
  mounted () {
    console.log($(this.$refs.list1))
    console.log($(this.$refs.list2))
    this.initJqGrid1()
    this.initJqGrid2()
  },
  methods: {
    initJqGrid1 () {
      $(this.$refs.list1).jqGrid({
        datatype: 'local',
        styleUI: 'Foundation',
        data: this.dataArray,
        colModel: [
          { name: 'name', label: 'Name' },
          { name: 'phone', label: 'Phone Number' }
        ],
        caption: 'Users Grid',
        height: 'auto',
        rowNum: 5,
        pager: '#pager1'
      });
    },
    initJqGrid2 () {
      $(this.$refs.list2).jqGrid({
        datatype: 'local',
        styleUI: 'Foundation',
        data: this.dataArray,
        colModel: [
          { name: 'name', label: 'Name' },
          { name: 'phone', label: 'Phone Number' }
        ],
        caption: 'Users Grid',
        height: 'auto',
        rowNum: 5,
        pager: '#pager2'
      });
    },
  }
})