d3e50253a40daff6452743b625fa6dfbc0fa1759.svn-base 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  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. <!--lodop打印控件start-->
  18. <script src="../../../libs/thirdparty/lodop/LodopFuncs.js" type="text/javascript"></script>
  19. <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width="0" height="0" style="line-height:0px;">
  20. <embed id="LODOP_EM" type="application/x-print-lodop" width="0" height="0" style="line-height:0px;"></embed>
  21. </object>
  22. <!--lodop打印控件end-->
  23. <!--打印的表格样式start-->
  24. <style id="printStyle">
  25. .tablePrint{
  26. border-collapse: collapse;
  27. border: 1px solid #000000;
  28. width: 100%;
  29. background-color: White;
  30. }
  31. .tablePrint th{
  32. border-left: 1.0pt solid windowtext;
  33. border-right: 1.0pt solid windowtext;
  34. border-bottom: 1.0pt solid windowtext;
  35. word-wrap: normal;
  36. word-break: keep-all;
  37. overflow:hidden;
  38. border-color: #000000;
  39. height:32px;
  40. padding: 0 2px 0 4px;
  41. background-color:#cccccc;
  42. color:#000000;
  43. font-weight: normal;
  44. line-height:32px;
  45. }
  46. .tablePrint td{
  47. border-left: 1.0pt solid windowtext;
  48. border-right: 1.0pt solid windowtext;
  49. border-bottom: 1.0pt solid windowtext;
  50. border-color: #000000;
  51. height:30px;
  52. padding: 1px 2px 1px 4px;
  53. }
  54. </style>
  55. <!--打印的表格样式end-->
  56. </head>
  57. <body>
  58. <div style="display:none;" id="content"><img src="../../../sample_html/thirdparty/lodop/view1.jpg"/></div>
  59. 注意:需要连接打印机才能正常测试。如果没有测试条件,可以<a style="color:red" onclick="popWin()">点击这里</a>查看实际效果截图,或者<a href="http://qui-frame.googlecode.com/files/PDFCreator-0_9_9_setup.exe" style="color:red">点击下载</a>并安装虚拟打印机进行测试。
  60. <br/>如果安装了虚拟打印机,还有一个额外的功能,就是能够把要打印的数据直接输出成PDF文件(在打印预览窗口点击打印按钮)。
  61. <div class="padding_right5">
  62. <div id="maingrid"></div>
  63. </div>
  64. <script type="text/javascript">
  65. var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
  66. {"deptName":"部门1","sex":"女","remark":"好啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":125,"degree":"硕士结业","age":20,"name":"员工1","deptId":12,"ability":1},
  67. {"deptName":"部门1","sex":"男","remark":"备注啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":124,"degree":"本科毕业","age":20,"name":"员工2","deptId":11,"ability":2},
  68. {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":123,"degree":"本科毕业","age":20,"name":"员工3","deptId":9,"ability":2},
  69. {"deptName":"部门1","sex":"女","remark":"不错啊","hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":121,"degree":"硕士肄业","age":20,"name":"员工4","deptId":8,"ability":3},
  70. {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":120,"degree":"博士肄业","age":20,"name":"员工5","deptId":7,"ability":4},
  71. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工6","deptId":6,"ability":5},
  72. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":118,"degree":"博士肄业","age":20,"name":"员工7","deptId":6,"ability":6},
  73. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":117,"degree":"博士肄业","age":20,"name":"员工8","deptId":6,"ability":5},
  74. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":116,"degree":"博士肄业","age":20,"name":"员工9","deptId":6,"ability":3},
  75. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":115,"degree":"博士肄业","age":20,"name":"员工10","deptId":6,"ability":1},
  76. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":114,"degree":"博士肄业","age":20,"name":"员工11","deptId":6,"ability":5},
  77. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":113,"degree":"博士肄业","age":20,"name":"员工12","deptId":6,"ability":5},
  78. {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":123,"degree":"本科毕业","age":20,"name":"员工13","deptId":9,"ability":2},
  79. {"deptName":"部门1","sex":"女","remark":"不错啊","hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":121,"degree":"硕士肄业","age":20,"name":"员工14","deptId":8,"ability":3},
  80. {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":120,"degree":"博士肄业","age":20,"name":"员工15","deptId":7,"ability":4},
  81. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工16","deptId":6,"ability":5},
  82. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":118,"degree":"博士肄业","age":20,"name":"员工17","deptId":6,"ability":6},
  83. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":117,"degree":"博士肄业","age":20,"name":"员工18","deptId":6,"ability":5},
  84. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":116,"degree":"博士肄业","age":20,"name":"员工19","deptId":6,"ability":3},
  85. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":115,"degree":"博士肄业","age":20,"name":"员工20","deptId":6,"ability":1},
  86. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":114,"degree":"博士肄业","age":20,"name":"员工21","deptId":6,"ability":5},
  87. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":113,"degree":"博士肄业","age":20,"name":"员工22","deptId":6,"ability":5},
  88. {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":123,"degree":"本科毕业","age":20,"name":"员工23","deptId":9,"ability":2},
  89. {"deptName":"部门1","sex":"女","remark":"不错啊","hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":121,"degree":"硕士肄业","age":20,"name":"员工24","deptId":8,"ability":3},
  90. {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":120,"degree":"博士肄业","age":20,"name":"员工25","deptId":7,"ability":4},
  91. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工26","deptId":6,"ability":5},
  92. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":118,"degree":"博士肄业","age":20,"name":"员工27","deptId":6,"ability":6},
  93. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":117,"degree":"博士肄业","age":20,"name":"员工28","deptId":6,"ability":5},
  94. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":116,"degree":"博士肄业","age":20,"name":"员工29","deptId":6,"ability":3},
  95. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":115,"degree":"博士肄业","age":20,"name":"员工30","deptId":6,"ability":1},
  96. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":114,"degree":"博士肄业","age":20,"name":"员工31","deptId":6,"ability":5},
  97. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":113,"degree":"博士肄业","age":20,"name":"员工32","deptId":6,"ability":5},
  98. {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":123,"degree":"本科毕业","age":20,"name":"员工33","deptId":9,"ability":2},
  99. {"deptName":"部门1","sex":"女","remark":"不错啊","hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":121,"degree":"硕士肄业","age":20,"name":"员工34","deptId":8,"ability":3},
  100. {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":120,"degree":"博士肄业","age":20,"name":"员工35","deptId":7,"ability":4},
  101. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工36","deptId":6,"ability":5},
  102. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":118,"degree":"博士肄业","age":20,"name":"员工37","deptId":6,"ability":6},
  103. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":117,"degree":"博士肄业","age":20,"name":"员工38","deptId":6,"ability":5},
  104. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":116,"degree":"博士肄业","age":20,"name":"员工39","deptId":6,"ability":3},
  105. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":115,"degree":"博士肄业","age":20,"name":"员工40","deptId":6,"ability":1},
  106. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":114,"degree":"博士肄业","age":20,"name":"员工41","deptId":6,"ability":5},
  107. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":113,"degree":"博士肄业","age":20,"name":"员工42","deptId":6,"ability":5},
  108. {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":123,"degree":"本科毕业","age":20,"name":"员工43","deptId":9,"ability":2},
  109. {"deptName":"部门1","sex":"女","remark":"不错啊","hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":121,"degree":"硕士肄业","age":20,"name":"员工44","deptId":8,"ability":3},
  110. {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":120,"degree":"博士肄业","age":20,"name":"员工45","deptId":7,"ability":4},
  111. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工46","deptId":6,"ability":5},
  112. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":118,"degree":"博士肄业","age":20,"name":"员工47","deptId":6,"ability":6},
  113. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":117,"degree":"博士肄业","age":20,"name":"员工48","deptId":6,"ability":5},
  114. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":116,"degree":"博士肄业","age":20,"name":"员工49","deptId":6,"ability":3},
  115. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":115,"degree":"博士肄业","age":20,"name":"员工50","deptId":6,"ability":1},
  116. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":114,"degree":"博士肄业","age":20,"name":"员工51","deptId":6,"ability":5},
  117. {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":113,"degree":"博士肄业","age":20,"name":"员工52","deptId":6,"ability":5}
  118. ]}
  119. //数据表格使用
  120. var g;
  121. function initComplete(){
  122. g = $("#maingrid").quiGrid({
  123. columns: [
  124. { display: '姓名', name: 'name', align: 'center', width: "30%"},
  125. { display: '性别', name: 'sex', align: 'center' , width: "20%"},
  126. { display: '部门', name: 'deptName', align: 'center' , width: "30%"},
  127. { display: '学历', name: 'degree', align: 'center', width: "20%" }
  128. ], data:testData, pageSize: 20, rownumbers:true, checkbox:true,percentWidthMode:true,selectRowButtonOnly:false,
  129. height: '100%', width:"100%",toolbar:{
  130. items:[
  131. {text: '打印本页数据', click: printHandler,iconClass:'icon_print'},
  132. { line : true },
  133. {text: '打印选中数据', click: printHandler2,iconClass:'icon_print'},
  134. { line : true },
  135. {text: '打印全部数据', click: printHandler3,iconClass:'icon_print'}
  136. ]
  137. }
  138. });
  139. }
  140. function printHandler(){
  141. var LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));
  142. if(LODOP){
  143. var strBodyStyle="<style>"+document.getElementById("printStyle").innerHTML+"</style>";
  144. var tableHtml;
  145. var data=g.getData();
  146. tableHtml=getTableHtml(data)
  147. var strBodyHtml=strBodyStyle+"<body>"+tableHtml+"</body>";
  148. LODOP.PRINT_INIT("打印本页数据");
  149. LODOP.ADD_PRINT_TABLE(15,0,"99%","96%",strBodyHtml);
  150. LODOP.PREVIEW();
  151. }
  152. }
  153. function printHandler2(){
  154. var rows = g.getSelectedRows();
  155. if (rows.length==0) {
  156. top.Dialog.alert('请至少选择一行');
  157. return;
  158. }
  159. var LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));
  160. if(LODOP){
  161. var strBodyStyle="<style>"+document.getElementById("printStyle").innerHTML+"</style>";
  162. var tableHtml;
  163. tableHtml=getTableHtml2(rows)
  164. var strBodyHtml=strBodyStyle+"<body>"+tableHtml+"</body>";
  165. LODOP.PRINT_INIT("打印选中数据");
  166. LODOP.ADD_PRINT_TABLE(15,0,"99%","96%",strBodyHtml);
  167. LODOP.PREVIEW();
  168. }
  169. }
  170. function printHandler3(){
  171. var LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));
  172. if(LODOP){
  173. var strBodyStyle="<style>"+document.getElementById("printStyle").innerHTML+"</style>";
  174. var tableHtml;
  175. var data=testData["rows"];
  176. tableHtml=getTableHtml(data)
  177. var strBodyHtml=strBodyStyle+"<body>"+tableHtml+"</body>";
  178. LODOP.PRINT_INIT("打印全部数据");
  179. LODOP.ADD_PRINT_TABLE(15,0,"99%","96%",strBodyHtml);
  180. LODOP.PREVIEW();
  181. }
  182. }
  183. function getTableHtml(data){
  184. var $tableCon=$('<div></div>')
  185. var $table=$('<table width="100%" class="tablePrint"></table>');
  186. var $th=$('<thead><th>姓名</th><th>性别</th><th>部门</th><th>学历</th></thead>');
  187. $table.append($th)
  188. $.each(data,function(idx,item){
  189. var $tr=$('<tr></tr>');
  190. var $td=$('<td>'+item.name+'</td><td>'+item.sex+'</td><td>'+item.deptName+'</td><td>'+item.degree+'</td>');
  191. $tr.append($td);
  192. $table.append($tr)
  193. });
  194. $tableCon.append($table);
  195. return $tableCon.html();
  196. }
  197. function getTableHtml2(rows){
  198. var $tableCon=$('<div></div>')
  199. var $table=$('<table width="100%" class="tablePrint"></table>');
  200. var $th=$('<thead><th>姓名</th><th>性别</th><th>部门</th><th>学历</th></thead>');
  201. $table.append($th)
  202. for(var i=0;i<rows.length;i++){
  203. var $tr=$('<tr></tr>');
  204. var $td=$('<td>'+rows[i].name+'</td><td>'+rows[i].sex+'</td><td>'+rows[i].deptName+'</td><td>'+rows[i].degree+'</td>');
  205. $tr.append($td);
  206. $table.append($tr)
  207. }
  208. $tableCon.append($table);
  209. return $tableCon.html();
  210. }
  211. function popWin(){
  212. top.Dialog.open({
  213. InnerHtml: $("#content").html(),
  214. Title:"效果预览",
  215. Width:820,
  216. Height:520
  217. });
  218. }
  219. </script>
  220. </body>
  221. </html>