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', width: 150, height: 23, min: 0, decimalDigits: 0, spinButtons: true });

            $("#price").jqxNumberInput({ spinMode: 'simple', symbol: '$', width: 150, min: 0, height: 23, spinButtons: true });

            var dataAdapter = new $.jqx.dataAdapter(source);

            var editrow = -1;

            // initialize jqxGrid

            $("#jqxgrid").jqxGrid(

            {

                width: 850,

                source: dataAdapter,

                pageable: true,

                autoheight: true,

                columns: [

                  { text: 'First Name', datafield: 'firstname', width: 200 },

                  { text: 'Last Name', datafield: 'lastname', width: 200 },

                  { text: 'Product', datafield: 'productname', width: 190 },

                  { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },

                  { text: 'Price', datafield: 'price', width: 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({

                width: 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>

button click event in jqxgrid jqwidgets的更多相关文章

  1. click event not triggered on bootstrap modal

    I am trying to catch the click event when save changes is pushed. For some reason i can't catch the ...

  2. shit mint-ui & navbar click event bug

    shit mint-ui & navbar click event bug # Vue 2.0 npm install mint-ui -S // 引入全部组件 import Vue from ...

  3. Atitit vod click event design flow  视频点播系统点击事件文档

    Atitit vod click event design flow  视频点播系统点击事件文档 重构规划1 Click cate1 Click  mov4 重构规划 事件注册,与事件分发管理器分开 ...

  4. (转）一段如何調用Button.Click事件的故事

    原文地址:http://helloouc.blog.163.com/blog/static/5530527120091050314590/ 一.前言 由于小朱与BillChung的启发,想写一个故事, ...

  5. nodejs phantom add click event

    page.evaluate( function() { // find element to send click to var element = document.querySelector( ' ...

  6. js trigger click event & dispatchEvent & svg element

    js trigger click event & dispatchEvent & svg element but svg element not support trigger cli ...

  7. svg click event bug & css pointer-events

    svg click event bug & css pointer-events svg click event not working Error OK ??? css class /* d ...

  8. mono for android Listview 里面按钮 view Button click 注册方法 并且传值给其他Activity 主要是context

    需求:为Listview的Item里面的按钮Button添加一个事件,单击按钮时通过事件传值并跳转到新的页面. 环境:mono 效果: 布局代码 主布局 <?xml version=" ...

  9. Click event doesn't work on dynamically generated elements

    I couldn't get live or delegate to work on a div in a lightbox (tinybox). I used setTimeout successf ...

随机推荐

  1. 通过setInterval函数在地图上每隔1s打一次点

    <?php echo <<<_END <!doctype html> <html> <head> <meta charset=&quo ...

  2. event内存泄漏

    C#内存泄漏--event内存泄漏 内存泄漏是指:当一块内存被分配后,被丢弃,没有任何实例指针指向这块内存, 并且这块内存不会被GC视为垃圾进行回收.这块内存会一直存在,直到程序退出.C#是托管型代码 ...

  3. [JZOJ 5852] [NOIP2018提高组模拟9.6] 相交 解题报告 （倍增+LCA）

    题目链接: http://172.16.0.132/senior/#main/show/5852 题目: 题目大意: 多组询问,每次询问树上两条链是否相交 题解: 两条链相交并且仅当某一条链的两个端点 ...

  4. git相关整理

    title: git相关整理 toc: false date: 2018-09-24 20:42:55 git merge 和 git merge --no--ff有什么区别? git merge命令 ...

  5. luogu 2679 子串

    子串 史上最简短的一篇博客,毕竟看题解ac心疼我的kmp /* f[i][j][k][0/1]表示A的前i个,B的前j个,用到了k个子串,当前字符选或者不选. 所以f[0][0][0][0]的方案数为 ...

  6. Wireshark filter语法

    过滤器语法 ------------------------------------------------------------- 最简单的过滤允许你检查一个协议或者字段的存在.如果你想查看所有的 ...

  7. 准备把平台挪到linux

    在上午准备周末胡老师的课程考核的Ppt时,逐渐我觉得不得不把平台挪到linux了.很多并行的应用不只是在linux上效率更高,而且很多包都在linux上.另外如果不及早挪到Linux上,后面遇到的问题 ...

  8. POJ 1182 食物链 （并查集解法）（详细注释）

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 78510   Accepted: 23396 Description ...

  9. Centos 7 修改 ssh 端口

    1.修改 ssh 配置 vi /etc/ssh/ssh_config vi /etc/ssh/sshd_config ///以上这2个文件,都去掉#port22前"#",将22改为 ...

  10. vb常用的内部函数（二）：字符串函数

    len(string):计算字符串长度函数.返回字符串string中字符的个数.一个汉字为一个字符,空格也为一个字符,空字符串的长度为0. Ltrim(string).Rtrim(string).Tr ...