JQuery Grid

Invoke the updaterow method of the jqxGrid. Author: http://jqwidgets.com

by tankla

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>
<div id="jqxNoti" style="z-index:99999999999 !important;"></div>
<div style="margin-top: 10px;">
    <input id="updaterowbutton" type="button" value="Update Selected Row" />
</div>
<div style="margin-top: 10px;">
    <input id="msgButton" type="button" value="Notification Test" />
</div>

JavaScript

var data = generatedata(500);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: "100%",
     theme: 'energyblue',
     source: adapter,
     sortable: true, // 정렬
     columnsresize: true,
            sortmode: "many", // 여러개 정렬
            filterable: true, // 검색 가능
            showfilterrow: true, // 검색 줄 보여줌
            groupable: true, // 그루핑 가능
            editable: false, // 행에서 수정 가능 여부.
            selectionMode: 'checkbox', // 여러 줄 선택 가능
            showaggregates: true,

            showtoolbar: true,
            
            showstatusbar: true,
            statusbarheight: 50,
            renderstatusbar: function(statusbar){ /* to do */ },
     ready: function () {
     		 //$("#jqxgrid").jqxGrid('sortby', 'lastname');
     },
     columns: [{
         text: 'First Name',
         datafield: 'firstname',
         pinned: true, 
         hidden: true,
         width: 90
     }, {
         text: 'Last Name',
         datafield: 'lastname',
         pinned: true, 
         width: 90
     }, {
         text: 'Product',
         datafield: 'productname',
         width: 170,
         aggregates:[{ '총 개수' : function (aggregatedValue, currentValue) { if (currentValue) return aggregatedValue + 1; return aggregatedValue; } }]
     }, {
         text: 'Order Date',
         datafield: 'date',
         width: 160,
         cellsformat: 'dd-MMMM-yyyy'
     }, {
         text: 'Quantity',
         datafield: 'quantity',
         width: 80,
         cellsalign: 'right'
     }, {
         text:...