updaterow.htm 3.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <link href="../../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
  6. <script src="../../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
  7. <script src="../../../lib/json2.js" type="text/javascript"></script>
  8. <script src="../../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
  9. <script src="../../../lib/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
  10. <script src="../../../lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
  11. <script src="../../../lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
  12. <script src="../../../lib/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
  13. <script src="../../../lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
  14. <script src="../../../lib/ligerUI/js/plugins/ligerDateEditor.js" type="text/javascript"></script>
  15. <script src="../../../lib/ligerUI/js/plugins/ligerSpinner.js" type="text/javascript"></script>
  16. <script src="../EmployeeData.js" type="text/javascript"></script>
  17. <script type="text/javascript">
  18. var data = [{
  19. UnitPrice: 10,
  20. Quantity: 2
  21. },{
  22. UnitPrice: 10,
  23. Quantity: 4
  24. }];
  25. var manager = null;
  26. $(function()
  27. {
  28. f_initGrid();
  29. });
  30. function f_initGrid()
  31. {
  32. $("#txtQuantity").ligerSpinner({ type: 'int' });
  33. window['g'] =
  34. manager = $("#maingrid").ligerGrid({
  35. columns: [
  36. { display: '单价', name: 'UnitPrice', width: 100, type: 'float'},
  37. { display: '数量', name: 'Quantity', width: 100, type: 'int'},
  38. { display: '金额', name: 'Price', width: 100, type: 'int',render:function(record){
  39. return record.UnitPrice * record.Quantity;
  40. } }
  41. ]
  42. , usePager: false, data: { Rows: data },
  43. width: '100%'
  44. });
  45. }
  46. function f_onAfterEdit(e)
  47. {
  48. manager.updateCell('Price', e.record.UnitPrice * e.record.Quantity, e.record);
  49. }
  50. function addNewRow()
  51. {
  52. manager.addRow({
  53. UnitPrice: 10,
  54. Quantity: 1
  55. });
  56. }
  57. function updateRow()
  58. {
  59. var selected = manager.getSelected();
  60. if (!selected) { alert('请选择行'); return; }
  61. manager.updateRow(selected,{
  62. UnitPrice: 40,
  63. Quantity: parseInt($("#txtQuantity").val())
  64. });
  65. }
  66. function getSelected()
  67. {
  68. var row = manager.getSelectedRow();
  69. if (!row) { alert('请选择行'); return; }
  70. alert(JSON.stringify(row));
  71. }
  72. </script>
  73. </head>
  74. <body style="padding:10px">
  75. 数量:<input type="text" id="txtQuantity" value="10" /><br />
  76. <a class="l-button" style="width:100px;float:left; margin-left:10px;" onclick="addNewRow()">添加行</a>
  77. <a class="l-button" style="width:100px;float:left; margin-left:10px;" onclick="updateRow()">更新行</a>
  78. <br /><br />
  79. <div id="maingrid" style="margin-top:20px"></div> <br />
  80. <br />
  81. <a class="l-button" style="width:120px" onclick="getSelected()">获取选中的值(选择行)</a>
  82. <div style="display:none;">
  83. <!-- g data total ttt -->
  84. </div>
  85. </body>
  86. </html>