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. CoreData的介绍和使用

    一.CoreData是什么? CoreData是iOS SDK里的一个很强大的框架,允许程序员以面向对象的方式存储和管理数据.使用CoreData框架,程序员可以轻松有效地通过面向对象的接口管理数据 ...

  2. Ext4，Ext3的特点和区别

    Linux kernel 自 2.6.28 开始正式支持新的文件系统 Ext4. Ext4 是 Ext3 的改进版,修改了 Ext3 中部分重要的数据结构,而不仅仅像 Ext3 对 Ext2 那样,只 ...

  3. POJ 1950暴搜

    思路: 暴力枚举好了..每回判断一下-- 用long long会超时 但是10^20会爆int... 不过仔细想一想 超过10^9的数肯定拼不回0啊-- 猥琐用int AC了 (当然可以打表 ) // ...

  4. 【算法】第二类斯特林数Stirling

    第二类Stirling数实际上是集合的一个拆分,表示将n个不同的元素拆分成m个集合的方案数,记为 或者 . 第二类Stirling数的推导和第一类Stirling数类似,可以从定义出发考虑第n+1个元 ...

  5. 转js调优

    随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术.而现在Ajax则是最为流行的一种方式.javascript是一种解释型 语言,所以能无法达到和C/Java之类的水平,限制了它 ...

  6. Jlink如何校验Hex

    打开SEGGER J-Flash ARM,记住必须设置好工程属性后才能校验,否则校验和为0 设置好工程属性后,直接将Hex拖入到工程中即可.在LOG窗口中会显示CRC的值 如何校验芯片中的程序的版本号 ...

  7. servlet关于转发用法

    # 1.转发 ## (1)什么是转发? 一个web组件将未完成的处理交给另外一个web组件继续做.      注:         web组件(servlet/jsp)         最常见的情况: ...

  8. 线段树（segment tree ）

    http://www.cnblogs.com/TenosDoIt/p/3453089.html 写的非常好! 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很 ...

  9. for 的相关用法

    forEach() <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  10. bzoj2333 [SCOI2011]棘手的操作(洛谷3273)

    题目描述 有N个节点,标号从1到N,这N个节点一开始相互不连通.第i个节点的初始权值为a[i],接下来有如下一些操作:U x y: 加一条边,连接第x个节点和第y个节点A1 x v: 将第x个节点的权 ...