96f363d3c26b942a831903d1228c95dbde6c53af.svn-base 3.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  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="../../"/>
  12. <link rel="stylesheet" type="text/css" id="customSkin"/>
  13. <!--框架必需end-->
  14. <!--数据表格start-->
  15. <script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
  16. <!--数据表格end-->
  17. </head>
  18. <body>
  19. <div class="red">此示例由后台支持</div>
  20. <div class="padding_right5">
  21. <div id="maingrid"></div>
  22. </div>
  23. <script type="text/javascript">
  24. var grid;
  25. function initComplete(){
  26. /*
  27. grid = $("#maingrid").quiGrid({
  28. columns: [
  29. { display: 'ID', name: 'orgId', align: 'left',width:"10%"},
  30. { display: '部门名称', name: 'orgName' ,width:"20%"},
  31. { display: '部门描述', name: 'orgDescription' ,width:"20%"},
  32. { display: '负责人', name: 'orgManager' ,width:"10%"},
  33. { display: '联系电话', name: 'orgPhone',width:"20%" },
  34. { display: '部门父ID', name: 'parentId' ,width:"20%"}
  35. ],
  36. //isScroll:false表示不出现滚动条,高度自适应。 frozen:false表示列宽不固定,可通过拖拽进行调整。
  37. frozen:false,url: '../../organizationAction.do?method=getGridData',width:'100%',height:'100%', detailClickExpand:true,checkbox:true,rownumbers:true,percentWidthMode:true,
  38. detail: { onShowDetail: showEmployees, height: 'auto' },
  39. onError: function (a, b){
  40. //错误事件
  41. }
  42. });
  43. */
  44. };
  45. //显示所选部门下的员工
  46. function showEmployees(row, detailPanel,callback){
  47. $.post('../../userAction.do?method=getUsers',{parentId:row.orgId},function(result){
  48. if(result.rows.length > 0){
  49. var childGrid = document.createElement('div');
  50. $(detailPanel).append(childGrid);
  51. $(childGrid).css('margin',10).quiGrid({
  52. columns: [
  53. { display: '姓名', name: 'userName', align: 'left'},
  54. { display: '所属部门', name: 'orgName', align: 'left'},
  55. { display: '性别', name: 'userSex', align: 'left'},
  56. { display: '入职时间', name: 'userEmployTime', align: 'left'} ,
  57. { display: '学历', name: 'userEducation', align: 'left'}
  58. ],
  59. isScroll: false,width: '95%', columnWidth: 120,
  60. //url: '../../userAction.do?method=getUsers&parentId=' + row.orgId,
  61. data: result,
  62. //onAfterShowData可以自定义回调
  63. onAfterShowData: callback, pageSize: 5
  64. });
  65. }
  66. })
  67. }
  68. </script>
  69. </body>
  70. </html>