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. 移动端1px细线问题

    1可以用伪类实现 .con{position: relative;.con:before { content: " "; position: absolute; left: 0; ...

  2. H.264标准（一）mp4封装格式详解

    在网络层,互联网提供所有应用程序都要使用的两种类型的服务,尽管目前理解这些服务的细节并不重要,但在所有TCP/IP概述中,都不能忽略他们: 无连接分组交付服务(Connectionless Packe ...

  3. FPGA初学之前后仿真分析

    最近在学习FPGA,感觉语言的学习到时很容易,但是由于缺乏电路图的硬件知识,所以看起来比较难懂,下面是对FPGA中仿真的一点理解,以后需要学习的地方还有很多啊. 一.使用ISE环境进行FPGA系统设计 ...

  4. inline元素和inline-block元素的4px空白间距解决方案

    实在不想写了,要吐了,看到一篇讲的比较全的文章,直接粘链接了 inline元素和inline-block元素的4px空白间距解决方案 出自脚本之家

  5. jQuery学习(八)——使用JQ插件validation进行表单校验

    1.官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 目录结构: 2.引入jquery库和validation插件 ...

  6. RocketMQ学习笔记（8）----RocketMQ的Producer API简介

    在RocketMQ中提供了三种发送消息的模式: 1.NormalProducer(普通) 2.OrderProducer(顺序) 3.TransactionProducer(事务) 下面来介绍一下pr ...

  7. Collectio集合，List《ArrayList,LinkedList》

    集合: Collection类 package com.collection.demo; import java.util.ArrayList; import java.util.Arrays; im ...

  8. （WC2018模拟十二）【FJOI2016集训Day7T1】挑选子序列

    题解: 这题太神仙了,先咕着,放个令人****的官方题解(精确覆盖问题是NP完全问题啊摔) Dancing Link X学习资料:QAQ TAT qwq Orz Donald Knuth大神... p ...

  9. POJ1743Musical Theme（后缀数组+二分）

    题意 有N(1 <= N <=20000)个音符的序列来表示一首乐曲,每个音符都是1..88范围内的整数,现在要找一个重复的主题.“主题”是整个音符序列的一个子串,它需要满足如下条件: 1 ...

  10. [CTSC2016]单调上升路径

    题目:UOJ#201. 题目大意:给定n个点(n是偶数)的完全图,现在要你给每条边确定一个权值(互不相等),使得最长的单调上升路径最短.现在要你输出边的权值. 一条路径被称为单调上升的,如果沿着它走时 ...