zoukankan      html  css  js  c++  java
  • button click event in jqxgrid jqwidgets

     button click event in jqxgrid jqwidgets

    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/popupediting.htm?arctic  

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>In order to enter in edit mode, click any of the 'Edit' buttons. To save the changes, click the 'Save' button in the popup dialog. To cancel the changes
        click the 'Cancel' button in the popup dialog.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = generatedata(200);
    
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' }
                    ],
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failder.
                        commit(true);
                    }
                };
    
                // initialize the input fields.
                $("#firstName").jqxInput({ theme: theme });
                $("#lastName").jqxInput({ theme: theme });
                $("#product").jqxInput({ theme: theme });
            
                $("#firstName").width(150);
                $("#firstName").height(23);
                $("#lastName").width(150);
                $("#lastName").height(23);
                $("#product").width(150);
                $("#product").height(23);
    
                $("#quantity").jqxNumberInput({spinMode: 'simple',  150, height: 23, min: 0, decimalDigits: 0, spinButtons: true });
                $("#price").jqxNumberInput({ spinMode: 'simple', symbol: '$',  150, min: 0, height: 23, spinButtons: true });
    
                var dataAdapter = new $.jqx.dataAdapter(source);
                var editrow = -1;
    
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                     850,
                    source: dataAdapter,
                    pageable: true,
                    autoheight: true,
                    columns: [
                      { text: 'First Name', datafield: 'firstname',  200 },
                      { text: 'Last Name', datafield: 'lastname',  200 },
                      { text: 'Product', datafield: 'productname',  190 },
                      { text: 'Quantity', datafield: 'quantity',  90, cellsalign: 'right' },
                      { text: 'Price', datafield: 'price',  90, cellsalign: 'right', cellsformat: 'c2' },
                      { text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
                         return "Edit";
                      }, buttonclick: function (row) {
                         // open the popup window when the user clicks a button.
                         editrow = row;
                         var offset = $("#jqxgrid").offset();
                         $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
    
                         // get the clicked row's data and initialize the input fields.
                         var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                         $("#firstName").val(dataRecord.firstname);
                         $("#lastName").val(dataRecord.lastname);
                         $("#product").val(dataRecord.productname);
                         $("#quantity").jqxNumberInput({ decimal: dataRecord.quantity });
                         $("#price").jqxNumberInput({ decimal: dataRecord.price });
    
                         // show the popup window.
                         $("#popupWindow").jqxWindow('open');
                     }
                     }
                    ]
                });
    
                // initialize the popup window and buttons.
                $("#popupWindow").jqxWindow({
                     250, resizable: false,  isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01           
                });
    
                $("#popupWindow").on('open', function () {
                    $("#firstName").jqxInput('selectAll');
                });
             
                $("#Cancel").jqxButton({ theme: theme });
                $("#Save").jqxButton({ theme: theme });
    
                // update the edited row when the user clicks the 'Save' button.
                $("#Save").click(function () {
                    if (editrow >= 0) {
                        var row = { firstname: $("#firstName").val(), lastname: $("#lastName").val(), productname: $("#product").val(),
                            quantity: parseInt($("#quantity").jqxNumberInput('decimal')), price: parseFloat($("#price").jqxNumberInput('decimal'))
                        };
                        var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
                        $('#jqxgrid').jqxGrid('updaterow', rowID, row);
                        $("#popupWindow").jqxWindow('hide');
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid"></div>
            <div style="margin-top: 30px;">
                <div id="cellbegineditevent"></div>
                <div style="margin-top: 10px;" id="cellendeditevent"></div>
           </div>
           <div id="popupWindow">
                <div>Edit</div>
                <div style="overflow: hidden;">
                    <table>
                        <tr>
                            <td align="right">First Name:</td>
                            <td align="left"><input id="firstName" /></td>
                        </tr>
                        <tr>
                            <td align="right">Last Name:</td>
                            <td align="left"><input id="lastName" /></td>
                        </tr>
                        <tr>
                            <td align="right">Product:</td>
                            <td align="left"><input id="product" /></td>
                        </tr>
                        <tr>
                            <td align="right">Quantity:</td>
                            <td align="left"><div id="quantity"></div></td>
                        </tr>
                        <tr>
                            <td align="right">Price:</td>
                            <td align="left"><div id="price"></div></td>
                        </tr>
                        <tr>
                            <td align="right"></td>
                            <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td>
                        </tr>
                    </table>
                </div>
           </div>
        </div>
    </body>
    </html>
  • 相关阅读:
    NSUserDefaults存储自定义类
    beginBackgroundTaskWithExpirationHandle
    instancetype
    #define const extern
    singleton
    报错:说改变了系统文件。解决方法
    不合法语句 self.contentView.frame.origin.x = x;
    google应用商店的解决
    笔记
    读流testDemo
  • 原文地址:https://www.cnblogs.com/rojas/p/6527490.html
Copyright © 2011-2022 走看看