addrowwithdata.htm 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  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. function f_initGrid()
  23. {
  24. $("#maingrid").ligerGrid({
  25. columns: [
  26. { display: '主键', name: 'ID', width: 50, type: 'int' },
  27. { display: '名字', name: 'RealName',
  28. editor: { type: 'text' }
  29. },
  30. { display: '性别', width: 50, name: 'Sex',
  31. editor: { type: 'select', data: sexData, valueColumnName: 'Sex' },
  32. render: function (item)
  33. {
  34. if (parseInt(item.Sex) == 1) return '男';
  35. return '女';
  36. }
  37. },
  38. { display: '年龄', name: 'Age', width: 50, type: 'int', editor: { type: 'int'} },
  39. { display: '入职日期', name: 'IncomeDay', type: 'date', width: 100, editor: { type: 'date'} },
  40. { display: '部门', name: 'DepartmentID', width: 120, isSort: false,
  41. editor: { type: 'select', data: DepartmentList, valueColumnName: 'DepartmentID', displayColumnName: 'DepartmentName' }, render: function (item)
  42. {
  43. for (var i = 0; i < DepartmentList.length; i++)
  44. {
  45. if (DepartmentList[i]['DepartmentID'] == item.DepartmentID)
  46. return DepartmentList[i]['DepartmentName']
  47. }
  48. return item.DepartmentName;
  49. }
  50. },
  51. { display: '地址', name: 'Address',
  52. editor: { type: 'text' }, align: 'left', width: 300
  53. }
  54. ],
  55. enabledEdit: true, isScroll: false,
  56. data: EmployeeData,
  57. width: '100%'
  58. });
  59. }
  60. function deleteRow()
  61. {
  62. var manager = $("#maingrid").ligerGetGridManager();
  63. manager.deleteSelectedRow();
  64. }
  65. function addNewRow()
  66. {
  67. var manager = $("#maingrid").ligerGetGridManager();
  68. manager.addRow({
  69. ID : 34,
  70. DepartmentID: 3,
  71. DepartmentName: '销售部',
  72. RealName:"分为",
  73. Sex : 1,
  74. Age : 25,
  75. IncomeDay: new Date(1306108800000),
  76. Phone : "2343434",
  77. Address : "wwrere4"
  78. });
  79. }
  80. function getSelected()
  81. {
  82. var manager = $("#maingrid").ligerGetGridManager();
  83. var row = manager.getSelectedRow();
  84. if (!row) { alert('请选择行'); return; }
  85. alert(JSON.stringify(row));
  86. }
  87. function getData()
  88. {
  89. var manager = $("#maingrid").ligerGetGridManager();
  90. var data = manager.getData();
  91. alert(JSON.stringify(data));
  92. }
  93. </script>
  94. </head>
  95. <body style="padding:10px">
  96. <a class="l-button" style="width:120px;float:left; margin-left:10px;" onclick="deleteRow()">删除选择的行</a>
  97. <a class="l-button" style="width:100px;float:left; margin-left:10px;" onclick="addNewRow()">添加行</a>
  98. <div class="l-clear"></div>
  99. <div id="maingrid" style="margin-top:20px"></div> <br />
  100. <br />
  101. <a class="l-button" style="width:120px" onclick="getSelected()">获取选中的值(选择行)</a>
  102. <br />
  103. <a class="l-button" style="width:120px" onclick="getData()">获取当前的值</a>
  104. <div style="display:none;">
  105. <!-- g data total ttt -->
  106. </div>
  107. </body>
  108. </html>