editrow2.htm 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  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 src="../DepartmentData.js" type="text/javascript"></script>
  18. <script type="text/javascript">
  19. var DepartmentList = DepartmentData.Rows;
  20. var sexData = [{ Sex: 1, text: '男' }, { Sex: 2, text: '女'}];
  21. $(f_initGrid);
  22. var manager, g;
  23. function f_initGrid()
  24. {
  25. g = manager = $("#maingrid").ligerGrid({
  26. columns: [
  27. { display: '主键', name: 'ID', width: 50, type: 'int', frozen: true },
  28. { display: '名字', name: 'RealName',
  29. editor: { type: 'text' }
  30. },
  31. { display: '性别', width: 50, name: 'Sex', type: 'int',
  32. editor: { type: 'select', data: sexData, valueColumnName: 'Sex' },
  33. render: function (item)
  34. {
  35. if (parseInt(item.Sex) == 1) return '男';
  36. return '女';
  37. }
  38. },
  39. { display: '年龄', name: 'Age', width: 50, type: 'int', editor: { type: 'int'} },
  40. { display: '操作', isSort: false, width: 120, render: function (rowdata, rowindex, value)
  41. {
  42. var h = "";
  43. if (!rowdata._editing)
  44. {
  45. h += "<a href='javascript:beginEdit(" + rowindex + ")'>修改</a> ";
  46. h += "<a href='javascript:deleteRow(" + rowindex + ")'>删除</a> ";
  47. }
  48. else
  49. {
  50. h += "<a href='javascript:endEdit(" + rowindex + ")'>提交</a> ";
  51. h += "<a href='javascript:cancelEdit(" + rowindex + ")'>取消</a> ";
  52. }
  53. return h;
  54. }
  55. }
  56. ],
  57. onSelectRow: function (rowdata, rowindex)
  58. {
  59. $("#txtrowindex").val(rowindex);
  60. },
  61. enabledEdit: true,clickToEdit:false, isScroll: false,
  62. data: EmployeeData,
  63. width: '100%'
  64. });
  65. }
  66. function beginEdit(rowid) {
  67. manager.beginEdit(rowid);
  68. }
  69. function cancelEdit(rowid) {
  70. manager.cancelEdit(rowid);
  71. }
  72. function endEdit(rowid)
  73. {
  74. manager.endEdit(rowid);
  75. }
  76. function deleteRow(rowid)
  77. {
  78. if (confirm('确定删除?'))
  79. {
  80. manager.deleteRow(rowid);
  81. }
  82. }
  83. var newrowid = 100;
  84. function addNewRow()
  85. {
  86. manager.addEditRow();
  87. }
  88. function getSelected()
  89. {
  90. var row = manager.getSelectedRow();
  91. if (!row) { alert('请选择行'); return; }
  92. alert(JSON.stringify(row));
  93. }
  94. function getData()
  95. {
  96. var data = manager.getData();
  97. alert(JSON.stringify(data));
  98. }
  99. </script>
  100. </head>
  101. <body style="padding:10px">
  102. <div class="l-clear"></div>
  103. <div id="maingrid" style="margin-top:20px"></div> <br />
  104. <br />
  105. <a class="l-button" style="width:120px" onclick="getSelected()">获取选中的值(选择行)</a>
  106. <br />
  107. <a class="l-button" style="width:120px" onclick="getData()">获取当前的值</a>
  108. <div style="display:none;">
  109. <!-- g data total ttt -->
  110. </div>
  111. </body>
  112. </html>