table.html 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  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-info" onclick="selectUsersToParent()">弹出表格(复选框)</button>
  29. <button type="button" class="btn btn-warning" onclick="selectUsersToParentCallBack()">弹出表格(复选框)- 回调形式</button>
  30. <p id="userids"> </p>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. <th:block th:include="include :: footer" />
  37. <script type="text/javascript">
  38. var prefix = ctx + "demo/modal";
  39. function selectCheckUser(){
  40. $.modal.open("选择用户", prefix + "/check");
  41. }
  42. function selectRadioUser(){
  43. $.modal.open("选择用户", prefix + "/radio");
  44. }
  45. function selectUsersToParent(){
  46. $.modal.open("选择用户", prefix + "/parent");
  47. }
  48. function selectUsersToParentCallBack(){
  49. var options = {
  50. title: '选择用户',
  51. url: prefix + "/parent",
  52. callBack: doSubmit
  53. };
  54. $.modal.openOptions(options);
  55. }
  56. function doSubmit(index, layero){
  57. var rows = layero.find("iframe")[0].contentWindow.getSelections();
  58. if (rows.length == 0) {
  59. $.modal.alertWarning("请至少选择一条记录");
  60. return;
  61. }
  62. $('#userids').html(rows.join())
  63. layer.close(index);
  64. }
  65. function selectUsers(){
  66. alert(1);
  67. }
  68. </script>
  69. </body>
  70. </html>