3dae51a378a504deced889be84b2913f94ddbe4f.svn-base 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  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. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>单选框</title>
  6. <!--框架必需start-->
  7. <script type="text/javascript" src="../../libs/js/jquery.js"></script>
  8. <script type="text/javascript" src="../../libs/js/language/cn.js"></script>
  9. <script type="text/javascript" src="../../libs/js/framework.js"></script>
  10. <link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
  11. <link rel="stylesheet" type="text/css" id="skin" prePath="../../" scrollerY="false"/>
  12. <link rel="stylesheet" type="text/css" id="customSkin"/>
  13. <!--框架必需end-->
  14. <!--布局控件start-->
  15. <script type="text/javascript" src="../../libs/js/nav/layout.js"></script>
  16. <!--布局控件end-->
  17. <!--数据表格start-->
  18. <script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
  19. <!--数据表格end-->
  20. <style>
  21. .l-layout-drophandle-right{
  22. background-image: url("../../libs/images/formEle/spliter_bg_v.jpg");
  23. background-repeat: repeat-y;
  24. width: 10px;
  25. }
  26. </style>
  27. <script type="text/javascript">
  28. //数据表格使用
  29. var g;
  30. var g2;
  31. var sexData={"list":[{"value":"1","key":"男"},{"value":"0","key":"女"}]};
  32. var educationData={"list":[{"value":"1","key":"专科"},{"value":"2","key":"本科"},{"value":"3","key":"硕士"},{"value":"4","key":"博士"}]};
  33. function initComplete(){
  34. $("#layout1").layout({ rightWidth: 500,onEndResize:function(){
  35. g.resetWidth();
  36. g2.resetWidth();
  37. }});
  38. g = $("#maingrid").quiGrid({
  39. columns: [
  40. { display: '姓名', name: 'userName', align: 'center', width: "30%",isSort:false},
  41. { display: '性别', name: 'userSex', align: 'center' , width: "30%",isSort:false,render:function (item){
  42. for (var i = 0; i < sexData["list"].length; i++)
  43. {
  44. if (sexData["list"][i]['value'] == item.userSex)
  45. return sexData["list"][i]['key']
  46. }
  47. return item.userSex;
  48. }},
  49. { display: '学历', name: 'userEducation', align: 'center' , width: "40%",isSort:false,render:function (item){
  50. for (var i = 0; i < educationData["list"].length; i++)
  51. {
  52. if (educationData["list"][i]['value'] == item.userEducation)
  53. return educationData["list"][i]['key']
  54. }
  55. return item.userEducation;
  56. }},
  57. { display: '选择', isAllowHide: false, align: 'left', width:50,isSort:false,
  58. render: function (rowdata, rowindex, value, column){
  59. return '<div class="padding_top4 padding_left5">'
  60. + '<span class="img_btn_right hand" title="选择" onclick="selectItem(' + rowdata.userId + ','+rowindex + ')"></span>'
  61. + '</div>';
  62. }
  63. }
  64. ], pageSize: 10, rownumbers:true, checkbox:false,percentWidthMode:true,sortName:"userId",sortOrder:"desc",
  65. height: '100%', width:'100%',showPageInfo:false
  66. });
  67. g2 = $("#maingrid2").quiGrid({
  68. columns: [
  69. { display: '反选', isAllowHide: false, align: 'left', width:50,isSort:false,
  70. render: function (rowdata, rowindex, value, column){
  71. return '<div class="padding_top4 padding_left5">'
  72. + '<span class="img_btn_left hand" title="反选" onclick="deSelectItem(' + rowdata.userId + ','+rowindex + ')"></span>'
  73. + '</div>';
  74. }
  75. },
  76. { display: '姓名', name: 'userName', align: 'center', width: "30%",isSort:false},
  77. { display: '性别', name: 'userSex', align: 'center' , width: "30%",isSort:false},
  78. { display: '学历', name: 'userEducation', align: 'center' , width: "40%",isSort:false}
  79. ], pageSize: 10, rownumbers:true, checkbox:false,percentWidthMode:true,sortName:"userId",sortOrder:"desc",
  80. height: '100%', width:'100%',showPageInfo:false
  81. });
  82. }
  83. function selectItem(rowid,rowindex){
  84. var rowData=g.getRow(rowindex);
  85. selectHandler(rowData,rowid)
  86. }
  87. function deSelectItem(rowid,rowindex){
  88. var rowData=g2.getRow(rowindex);
  89. deSelectHandler(rowData,rowid)
  90. }
  91. function selectHandler(rowData,rowid){
  92. g.deleteRow(rowData);
  93. $.ajax({
  94. url:"../../userAction.do?method=save",
  95. type:"POST",
  96. data:{
  97. "userinfor.organization.orgId":15,
  98. "userinfor.userId":rowData.userId,
  99. "userinfor.userName":rowData.userName,
  100. "userinfor.userLoginName":rowData.userLoginName,
  101. "userinfor.userPassword":rowData.userPassword,
  102. "userinfor.userSex":rowData.userSex,
  103. "userinfor.userEducation":rowData.userEducation
  104. },
  105. error:function(){
  106. },
  107. success: function(data){
  108. //页号重置为1
  109. g2.setNewPage(1);
  110. g2.loadData();
  111. $.post("../../userdbAction.do?method=deleteUser",
  112. {"ids":rowid},
  113. function(result){
  114. //刷新表格
  115. g.loadData();
  116. },"json");
  117. }
  118. });
  119. var $hi = $('<div class="itemMinEffect"></div>');
  120. $hi.css({
  121. "width":$("#centerCon").width(),
  122. "height":32,
  123. "left":0,
  124. top:currentMouseY-10+"px",
  125. opacity:0.1
  126. }).animate({
  127. width:$("#centerCon").width(),
  128. height:0,
  129. left:$("body").width()-100+"px",
  130. top:currentMouseY-10+"px",
  131. opacity:0
  132. },200,function(){
  133. $hi.remove();
  134. })
  135. $("body").append($hi);
  136. }
  137. function deSelectHandler(rowData,rowid){
  138. g2.deleteRow(rowData);
  139. var userSex;
  140. for (var i = 0; i < sexData["list"].length; i++)
  141. {
  142. if (sexData["list"][i]['key'] == rowData.userSex)
  143. userSex= sexData["list"][i]['value']
  144. }
  145. var userEducation;
  146. for (var j = 0; j < educationData["list"].length; j++)
  147. {
  148. if (educationData["list"][j]['key'] == rowData.userEducation)
  149. userEducation= educationData["list"][j]['value']
  150. }
  151. var postData={
  152. userName:rowData.userName,
  153. userLoginName:rowData.userLoginName,
  154. userPassword:rowData.userPassword,
  155. userSex:userSex,
  156. userAge:18,
  157. userId:rowData.userId,
  158. userEducation:userEducation
  159. }
  160. $.post("../../userdbAction.do?method=saveUser",rowToBO(postData),function(result){
  161. //页号重置为1
  162. g.setNewPage(1);
  163. g.loadData();
  164. $.post("../../userAction.do?method=deleteUser",
  165. {"ids":rowid},
  166. function(result){
  167. g2.loadData();
  168. },"json");
  169. },"json");
  170. var $hi = $('<div class="itemMinEffect"></div>');
  171. $hi.css({
  172. "width":$("#rightCon").width(),
  173. "height":32,
  174. "left":currentMouseX+"px",
  175. top:currentMouseY-10+"px",
  176. opacity:0.1
  177. }).animate({
  178. width:$("#rightCon").width(),
  179. height:0,
  180. left:100+"px",
  181. top:currentMouseY-10+"px",
  182. opacity:0
  183. },200,function(){
  184. $hi.remove();
  185. })
  186. $("body").append($hi);
  187. }
  188. //将row JSON对象转化为bo对象
  189. function rowToBO(row) {
  190. var params = '&userinfor.userName='+row.userName+'&userinfor.userSex='+row.userSex+'&userinfor.userAge='+Math.ceil(row.userAge)+'&userinfor.userDepartment='+row.userDepartment+'&userinfor.userAssistance='+row.userAssistance+'&userinfor.userDuty='+row.userDuty+'&userinfor.userEmployTime='+row.userEmployTime+'&userinfor.userPassword='+row.userPassword+'&userinfor.userEducation='+row.userEducation+'&userinfor.userLoginName='+row.userLoginName;
  191. return params;
  192. }
  193. function selectAll(){
  194. var rows = g.getSelectedRows();
  195. for(var i=0;i<rows.length;i++){
  196. selectHandler(rows[i],rows[i].userId);
  197. }
  198. }
  199. function deSelectAll(){
  200. var rows = g2.getSelectedRows();
  201. for(var i=0;i<rows.length;i++){
  202. deSelectHandler(rows[i],rows[i].userId);
  203. }
  204. }
  205. </script>
  206. </head>
  207. <body>
  208. <div id="layout1">
  209. <div id="centerCon" position="center" style="padding-right:5px;" panelTitle="未选择列表">
  210. <div id="maingrid"></div>
  211. </div>
  212. <div id="rightCon" position="right" style="padding-right:8px;padding-left:4px;" panelTitle="已选择列表">
  213. <div id="maingrid2"></div>
  214. </div>
  215. </div>
  216. </body>
  217. </html>