addrowcombobox.htm 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  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 g = null;
  23. function f_initGrid()
  24. {
  25. g = $("#maingrid").ligerGrid({
  26. columns: [
  27. { display: '主键', name: 'ID', width: 50, type: 'int' },
  28. { display: '名字', name: 'RealName',
  29. editor: { type: 'text' }
  30. },
  31. { display: '性别', width: 50, name: 'Sex',
  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: '部门', name: 'DepartmentID', width: 120, isSort: false,
  41. editor: { type: 'select',
  42. ext :
  43. function (rowdata)
  44. {
  45. return {
  46. onBeforeOpen: f_selectDepartment,
  47. render: function ()
  48. {
  49. for (var i = 0; i < DepartmentList.length; i++)
  50. {
  51. if (DepartmentList[i]['DepartmentID'] == rowdata.DepartmentID)
  52. return DepartmentList[i]['DepartmentName'];
  53. }
  54. }
  55. };
  56. }
  57. }, render: function (item)
  58. {
  59. for (var i = 0; i < DepartmentList.length; i++)
  60. {
  61. if (DepartmentList[i]['DepartmentID'] == item.DepartmentID)
  62. return DepartmentList[i]['DepartmentName']
  63. }
  64. return item.DepartmentName;
  65. }
  66. },
  67. { display: '地址', name: 'Address',
  68. editor: { type: 'text' }, align: 'left', width: 300
  69. }
  70. ],
  71. data: EmployeeData,
  72. enabledEdit: true,
  73. width: '100%',height:400
  74. });
  75. }
  76. function f_selectDepartment() {
  77. $.ligerDialog.open({ title: '选择部门', width: 700, height: 300, url: 'selectDepartment.htm', buttons: [
  78. { text: '确定', onclick: f_selectDepartmentOK },
  79. { text: '取消', onclick: f_selectDepartmentCancel }
  80. ]
  81. });
  82. return false;
  83. }
  84. function f_selectDepartmentOK(item, dialog)
  85. {
  86. var data = dialog.frame.f_select();
  87. if (!data)
  88. {
  89. alert('请选择行!');
  90. return;
  91. }
  92. g.updateCell('DepartmentID', data.DepartmentID, g.getSelected());
  93. g.endEdit();
  94. dialog.close();
  95. }
  96. function f_selectDepartmentCancel(item, dialog)
  97. {
  98. dialog.close();
  99. }
  100. function deleteRow()
  101. {
  102. var manager = $("#maingrid").ligerGetGridManager();
  103. manager.deleteSelectedRow();
  104. }
  105. function getSelected()
  106. {
  107. var manager = $("#maingrid").ligerGetGridManager();
  108. var row = manager.getSelectedRow();
  109. if (!row) { alert('请选择行'); return; }
  110. alert(JSON.stringify(row));
  111. }
  112. function getData()
  113. {
  114. var manager = $("#maingrid").ligerGetGridManager();
  115. var data = manager.getData();
  116. alert(JSON.stringify(data));
  117. }
  118. </script>
  119. </head>
  120. <body style="padding:10px">
  121. <div class="l-clear"></div>
  122. <div id="maingrid" style="margin-top:20px"></div> <br />
  123. <br />
  124. <a class="l-button" style="width:120px" onclick="getSelected()">获取选中的值(选择行)</a>
  125. <br />
  126. <a class="l-button" style="width:120px" onclick="getData()">获取当前的值</a>
  127. <div style="display:none;">
  128. </div>
  129. </body>
  130. </html>