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. mybatis学习笔记(7)-输出映射

    mybatis学习笔记(7)-输出映射 标签: mybatis mybatis学习笔记7-输出映射 resultType 输出简单类型 输出pojo对象和pojo列表 resultMap result ...

  2. CentOS6.3升级GCC到GCC4.8.2

    server上安装的GCC版本号过旧.已经不满足个人使用的版本号需求,故决定对其进行升级操作.由当前版本号3.4.6升级到4.8.2.然受权限制约.仅仅能安装到个人文件夹.因此假设您的server能够 ...

  3. gson的安装和使用

    gson的安装和使用 1.安装 2.布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...

  4. 记录一下c++的一点指针所得

    c++有两种传值可以改变外部参数,一种是传递指针,另一种是传递引用,对于前者,可以用Ugly(but explicitly),对于后者,Clean(but hidden),在传递的时候有一种值得注意的 ...

  5. [雅礼NOIP2018集训 day4]

    感觉状态极差啊,今天居然爆零了 主要是以下原因: 1.又是T1看错题肝了两个小时,发现题意理解错误瞬间心态爆炸 2.T2交错了文件名 3.T3暴力子任务和正解(假的)混在一起,输出了两个答案 都想为自 ...

  6. Kettle学习系列之数据仓库、数据整合、ETL、ELT和EII之间的区别？

    不多说,直接上干货! 在数据仓库领域里,的一个重要概念就是数据整合(data intergration).数据整合它就是把不同数据库中的数据整合到一起,对外提供统一的数据视图. 数据整合最典型的案例就 ...

  7. CDN(Content Distribution Network)概念

    CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过在网络各处放置节 ...

  8. 14:Challenge 7（map大法好）

    总时间限制:  10000ms 单个测试点时间限制:  1000ms 内存限制:  262144kB 描述 给一个长为N的数列,有M次操作,每次操作是以下两种之一: (1)修改数列中的一个数 (2)求 ...

  9. POJ-3348 Cows 计算几何 求凸包 求多边形面积

    题目链接:https://cn.vjudge.net/problem/POJ-3348 题意 啊模版题啊 求凸包的面积,除50即可 思路 求凸包的面积,除50即可 提交过程 AC 代码 #includ ...

  10. 【Paper Reading】Object Recognition from Scale-Invariant Features

    Paper: Object Recognition from Scale-Invariant Features Sorce: http://www.cs.ubc.ca/~lowe/papers/icc ...