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. 数据库中的java.sql.Timestamp转换成Date

    查询数据库中的时间类型为 java.sql.Timestamp 保存在json中需要格式化 自定义工具类  DateJsonValueProcessor package com.rom.util; i ...

  2. 在Redhat Linux中执行非Redhat的Openstack, Redhat将对其Linux不提供支持

    一声叹息. IBM.HP.Dell, Mirantis, Piston等.请问.你们还把你们的Openstack部署在Redhat中吗? http://blogs.wsj.com/digits/201 ...

  3. ES跨版本升级？——难道升级集群发生shard allocation是因为要分配replica节点？？？

    Full cluster restart upgrade Elasticsearch requires a full cluster restart when upgrading across maj ...

  4. [JZOJ 5875] [NOIP2018提高组模拟9.20] 听我说，海蜗牛 解题报告（BFS+二分）

    题目链接: http://172.16.0.132/senior/#main/show/5875 题目: 题解: 注意这题只能经过开放的港口 我们考虑用vector存下每个点不能到的点,并把并让vec ...

  5. linux系统定时任务crond入门

    1,Crond: Crond是linux系统中用来定期执行命令或指定程序任务的一种服务或者软件.(Centos5以后默认存在) 当优化开机自启动的时候,第一个就是crond. Crond服务默认情况( ...

  6. Fork and Join: Java Can Excel at Painless Parallel Programming Too!---转

    原文地址:http://www.oracle.com/technetwork/articles/java/fork-join-422606.html Multicore processors are ...

  7. 模仿百度首页“元宵节汤圆”动图（js的定时任务：setInterval）

    模仿百度首页“元宵节汤圆”动图:(js的定时任务:setInterval) 原理:需要一张切图,通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画 效果图: 切图地址: https://ss1 ...

  8. jqGrid添加删除功能(不和数据库交互)

    jqGrid添加删除功能(不和数据库交互) 一.背景需求 项目中需要在前端页面动态的添加行,删除行,上下移动行等,同时还不和数据库交互.一直在用jqGrid展示表格的我们,从没有深入的研究过它,当然看 ...

  9. 51nod 1158 全是1的最大子矩阵(单调栈 ,o(n*m))

    前置问题:51nod 1102 面积最大的矩形 附上链接: 51nod 1102 面积最大的矩形 这题的题解博客 需要了解的知识:单调栈,在前置问题中已经讲解. 解题思路 对每行求左边连续1的个数,得 ...

  10. STM8S103之串口

    1.串口发送中断标志的清除,只能靠往UART_DR中写数据,这个的本质含义是,发送中断是指发送完成中断,所以往UART_DR中写数据可以清除发送中断标志.但是这样又会导致新写的数据完成后又会产生中断, ...