getdata.htm 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  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. <link href="../example.css" rel="stylesheet" type="text/css" />
  19. <script type="text/javascript">
  20. var DepartmentList = DepartmentData.Rows;
  21. var sexData = [{ Sex: 1, text: '男' }, { Sex: 2, text: '女'}];
  22. $(f_initGrid);
  23. var manager, g;
  24. function f_initGrid()
  25. {
  26. g = manager = $("#maingrid").ligerGrid({
  27. columns: [
  28. { display: '主键', name: 'ID', width: 50, type: 'int',frozen:true },
  29. { display: '名字', name: 'RealName',
  30. editor: { type: 'text' }
  31. },
  32. { display: '性别', width: 50, name: 'Sex',type:'int',
  33. editor: { type: 'select', data: sexData, valueColumnName: 'Sex' },
  34. render: function (item)
  35. {
  36. if (parseInt(item.Sex) == 1) return '男';
  37. return '女';
  38. }
  39. },
  40. { display: '年龄', name: 'Age', width: 50, type: 'int', editor: { type: 'int'} },
  41. { display: '入职日期', name: 'IncomeDay', type: 'date', format: 'yyyy年MM月dd', width: 100, editor: { type: 'date'} },
  42. { display: '部门', name: 'DepartmentID', width: 120, isSort: false,
  43. editor: { type: 'select', data: DepartmentList, valueColumnName: 'DepartmentID', displayColumnName: 'DepartmentName' }, render: function (item)
  44. {
  45. for (var i = 0; i < DepartmentList.length; i++)
  46. {
  47. if (DepartmentList[i]['DepartmentID'] == item.DepartmentID)
  48. return DepartmentList[i]['DepartmentName']
  49. }
  50. return item.DepartmentName;
  51. }
  52. },
  53. { display: '地址', name: 'Address',
  54. editor: { type: 'text' }, align: 'left', width: 300
  55. }
  56. ],
  57. onSelectRow: function (rowdata, rowindex)
  58. {
  59. $("#txtrowindex").val(rowindex);
  60. },
  61. enabledEdit: true, isScroll: false, checkbox:true,rownumbers:true,
  62. data:EmployeeData,
  63. width: '100%'
  64. });
  65. }
  66. function deleteRow()
  67. {
  68. manager.deleteSelectedRow();
  69. }
  70. var newrowid = 100;
  71. function addNewRow()
  72. {
  73. var row = manager.getSelectedRow();
  74. //参数1:rowdata(非必填)
  75. //参数2:插入的位置 Row Data
  76. //参数3:之前或者之后(非必填)
  77. manager.addRow({
  78. DepartmentID: 3,
  79. DepartmentName: '销售部',
  80. RealName: "分为" + newrowid,
  81. ID: newrowid++,
  82. Sex : 1,
  83. Age : 25,
  84. IncomeDay: new Date(1306108800000),
  85. Phone : "2343434",
  86. Address: "wwrere4"
  87. }, row, document.getElementById("chkbefore").checked);
  88. }
  89. function getData()
  90. {
  91. var data = manager.getData();
  92. alert(JSON.stringify(data));
  93. }
  94. function getData()
  95. {
  96. var data = manager.getData();
  97. alert(JSON.stringify(data));
  98. }
  99. function getUpdate()
  100. {
  101. var data = manager.getUpdated();
  102. alert(JSON.stringify(data));
  103. }
  104. function getDelete()
  105. {
  106. var data = manager.getDeleted();
  107. alert(JSON.stringify(data));
  108. }
  109. function getAdd()
  110. {
  111. var data = manager.getAdded();
  112. alert(JSON.stringify(data));
  113. }
  114. </script>
  115. </head>
  116. <body style="padding:10px">
  117. <a class="l-button" style="width:120px;" onclick="deleteRow()">删除选择的行</a>
  118. <a class="l-button" style="width:100px;" onclick="addNewRow()">添加行</a>
  119. <div>
  120. 是否之前:
  121. <input type="checkbox" id="chkbefore" />
  122. </div>
  123. <div class="l-clear"></div>
  124. <div id="maingrid" style="margin-top:20px"></div> <br />
  125. <br />
  126. <a class="l-button" onclick="getData()">获取全部数据</a>
  127. <a class="l-button" onclick="getUpdate()">获取更新数据</a>
  128. <a class="l-button" onclick="getDelete()">获取删除数据</a>
  129. <a class="l-button" onclick="getAdd()">获取新增数据</a>
  130. <div style="display:none;">
  131. <!-- g data total ttt -->
  132. </div>
  133. </body>
  134. </html>