table.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <th:block th:include="include :: header('弹层表格')" />
  5. </head>
  6. <body class="gray-bg">
  7. <div class="wrapper wrapper-content fadeInRight">
  8. <div class="row">
  9. <div class="col-sm-12">
  10. <div class="ibox">
  11. <div class="ibox-title">
  12. <h5>弹层框</h5>
  13. </div>
  14. <div class="ibox-content" id="test">
  15. <p>弹出复选框表格及单选框表格(点击提交后得到数据)。 </p>
  16. <button type="button" class="btn btn-primary" onclick="selectCheckUser()">弹出表格(复选框)</button>
  17. <button type="button" class="btn btn-success" onclick="selectRadioUser()">弹出表格(单选框)</button>
  18. </div>
  19. </div>
  20. </div>
  21. <div class="col-sm-12">
  22. <div class="ibox">
  23. <div class="ibox-title">
  24. <h5>弹层框</h5>
  25. </div>
  26. <div class="ibox-content" id="test">
  27. <p>弹出层,点击提交后得到数据并回显到父窗体。 </p>
  28. <button type="button" class="btn btn-primary" onclick="selectUsersToParent()">弹出表格(方式一)</button>
  29. <button type="button" class="btn btn-success" onclick="selectUsersToParentCallBack2()">弹出表格(方式二)</button>
  30. <button type="button" class="btn btn-info" onclick="selectUsersToParentCallBack3()">弹出表格(方式三)</button>
  31. <p id="userids"> </p>
  32. </div>
  33. </div>
  34. </div>
  35. <div class="col-sm-12">
  36. <div class="ibox">
  37. <div class="ibox-title">
  38. <h5>弹层框</h5>
  39. </div>
  40. <div class="ibox-content" id="test">
  41. <p>多层弹出,点击提交后得到数据并回显到父窗体。 </p>
  42. <button type="button" class="btn btn-primary" onclick="selectUsersToParent4()">弹出窗口(方式四)</button>
  43. <p id="username"> </p>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. <th:block th:include="include :: footer" />
  50. <script type="text/javascript">
  51. var prefix = ctx + "demo/modal";
  52. function selectCheckUser(){
  53. $.modal.open("选择用户", prefix + "/check");
  54. }
  55. function selectRadioUser(){
  56. $.modal.open("选择用户", prefix + "/radio");
  57. }
  58. // 根据当前激活的选项卡获取(方式一)
  59. function selectUsersToParent(){
  60. $.modal.open("选择用户", prefix + "/parent");
  61. }
  62. // callBack获取父窗口方法(方式二)
  63. function selectUsersToParentCallBack2(){
  64. var options = {
  65. title: '选择用户',
  66. url: prefix + "/parent",
  67. callBack: doSubmit2
  68. };
  69. $.modal.openOptions(options);
  70. }
  71. // callBack获取父窗口值(方式三)
  72. function selectUsersToParentCallBack3(){
  73. var options = {
  74. title: '选择用户',
  75. url: prefix + "/parent",
  76. callBack: doSubmit3
  77. };
  78. $.modal.openOptions(options);
  79. }
  80. // callBack获取父窗口值(方式四)
  81. function selectUsersToParent4(){
  82. var prefix = ctx + "demo/modal";
  83. var options = {
  84. title: '多层窗口A',
  85. url: prefix + "/frame1",
  86. callBack: doSubmit4
  87. };
  88. $.modal.openOptions(options);
  89. }
  90. function doSubmit2(index, layero){
  91. var rows = layero.find("iframe")[0].contentWindow.getSelections();
  92. if (rows.length == 0) {
  93. $.modal.alertWarning("请至少选择一条记录");
  94. return;
  95. }
  96. $('#userids').html('我是通过方式二来的:' + rows.join())
  97. $.modal.close(index);
  98. }
  99. function doSubmit3(index, layero){
  100. var body = $.modal.getChildFrame(index);
  101. $("#userids").html('我是通过方式三来的:' + body.find('#rowIds').val());
  102. $.modal.close(index);
  103. }
  104. function doSubmit4(index, layero){
  105. var body = $.modal.getChildFrame(index);
  106. $("#username").html('我是通过方式四来的:' + body.find('#name').val());
  107. $.modal.close(index);
  108. }
  109. function selectUsers(){
  110. alert(1);
  111. }
  112. </script>
  113. </body>
  114. </html>