eduQuestionnaireQuestionList.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  1. <%@ page contentType="text/html;charset=UTF-8" %>
  2. <script>
  3. var questionnaire = '';
  4. $(document).ready(function() {
  5. questionnaire = $('#id').val();
  6. $('#eduQuestionnaireQuestionTable').bootstrapTable({
  7. //请求方法
  8. method: 'post',
  9. //类型json
  10. dataType: "json",
  11. contentType: "application/x-www-form-urlencoded",
  12. //显示检索按钮
  13. showSearch: false,
  14. //显示刷新按钮
  15. showRefresh: true,
  16. //显示切换手机试图按钮
  17. showToggle: false,
  18. //显示 内容列下拉框
  19. showColumns: true,
  20. //显示到处按钮
  21. showExport: false,
  22. //显示切换分页按钮
  23. showPaginationSwitch: true,
  24. //显示详情按钮
  25. detailView: true,
  26. //显示详细内容函数
  27. detailFormatter: "detailFormatter",
  28. //最低显示2行
  29. minimumCountColumns: 2,
  30. //是否显示行间隔色
  31. striped: true,
  32. //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
  33. cache: false,
  34. //是否显示分页(*)
  35. pagination: true,
  36. //排序方式
  37. sortOrder: "asc",
  38. //初始化加载第一页,默认第一页
  39. pageNumber:1,
  40. //每页的记录行数(*)
  41. pageSize: 10,
  42. //可供选择的每页的行数(*)
  43. pageList: [10, 25, 50, 100],
  44. //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
  45. url: "${ctx}/questionnaire/eduQuestionnaireQuestion/data?questionnaire.id="+ questionnaire,
  46. //默认值为 'limit',传给服务端的参数为:limit, offset, search, sort, order Else
  47. //queryParamsType:'',
  48. ////查询参数,每次调用是会带上这个参数,可自定义
  49. queryParams : function(params) {
  50. var searchParam = $("#searchForm").serializeJSON();
  51. searchParam.pageNo = params.limit === undefined? "1" :params.offset/params.limit+1;
  52. searchParam.pageSize = params.limit === undefined? -1 : params.limit;
  53. return searchParam;
  54. },
  55. //分页方式:client客户端分页,server服务端分页(*)
  56. sidePagination: "server",
  57. contextMenuTrigger:"right",//pc端 按右键弹出菜单
  58. contextMenuTriggerMobile:"press",//手机端 弹出菜单,click:单击, press:长按。
  59. contextMenu: '#context-menu',
  60. onContextMenuItem: function(row, $el){
  61. if($el.data("item") == "edit"){
  62. edit(row.id);
  63. }else if($el.data("item") == "view"){
  64. view(row.id);
  65. } else if($el.data("item") == "delete"){
  66. jp.confirm('确认要删除该调查问卷记录吗?', function(){
  67. jp.loading();
  68. jp.get("${ctx}/questionnaire/eduQuestionnaireQuestion/delete?id="+row.id, function(data){
  69. if(data.success){
  70. $('#eduQuestionnaireQuestionTable').bootstrapTable('refresh');
  71. jp.success(data.msg);
  72. }else{
  73. jp.error(data.msg);
  74. }
  75. })
  76. });
  77. }
  78. },
  79. onClickRow: function(row, $el){
  80. },
  81. onShowSearch: function () {
  82. $("#search-collapse").slideToggle();
  83. },
  84. columns: [{
  85. checkbox: true
  86. }
  87. ,{
  88. field: 'num',
  89. title: '题号',
  90. sortable: false,
  91. sortName: 'num'
  92. }
  93. ,{
  94. field: 'title',
  95. title: '标题',
  96. sortable: false,
  97. sortName: 'title'
  98. ,formatter:function(value, row , index){
  99. value = jp.unescapeHTML(value);
  100. <c:choose>
  101. <c:when test="${fns:hasPermission('questionnaire:eduQuestionnaireQuestion:edit')}">
  102. return "<a href='javascript:edit(\""+row.id+"\")'>"+value+"</a>";
  103. </c:when>
  104. <c:when test="${fns:hasPermission('questionnaire:eduQuestionnaireQuestion:view')}">
  105. return "<a href='javascript:view(\""+row.id+"\")'>"+value+"</a>";
  106. </c:when>
  107. <c:otherwise>
  108. return value;
  109. </c:otherwise>
  110. </c:choose>
  111. }
  112. }
  113. ,{
  114. field: 'types',
  115. title: '题目类型',
  116. sortable: false,
  117. sortName: 'types',
  118. formatter:function(value, row , index){
  119. if(value == "1"){
  120. return '单选题'
  121. }else if(value == '2'){
  122. return '多选题'
  123. }else if(value == '3'){
  124. return '简答题'
  125. }else{
  126. return '-'
  127. }
  128. }
  129. }
  130. ]
  131. });
  132. if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){//如果是移动端
  133. $('#eduQuestionnaireQuestionTable').bootstrapTable("toggleView");
  134. }
  135. $('#eduQuestionnaireQuestionTable').on('check.bs.table uncheck.bs.table load-success.bs.table ' +
  136. 'check-all.bs.table uncheck-all.bs.table', function () {
  137. $('#remove').prop('disabled', ! $('#eduQuestionnaireQuestionTable').bootstrapTable('getSelections').length);
  138. $('#view,#edit').prop('disabled', $('#eduQuestionnaireQuestionTable').bootstrapTable('getSelections').length!=1);
  139. });
  140. $("#btnImport").click(function(){
  141. jp.open({
  142. type: 2,
  143. area: [500, 200],
  144. auto: true,
  145. title:"导入数据",
  146. content: "${ctx}/tag/importExcel" ,
  147. btn: ['下载模板','确定', '关闭'],
  148. btn1: function(index, layero){
  149. jp.downloadFile('${ctx}/questionnaire/eduQuestionnaireQuestion/import/template');
  150. },
  151. btn2: function(index, layero){
  152. var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
  153. iframeWin.contentWindow.importExcel('${ctx}/questionnaire/eduQuestionnaireQuestion/import', function (data) {
  154. if(data.success){
  155. jp.success(data.msg);
  156. refresh();
  157. }else{
  158. jp.error(data.msg);
  159. }
  160. });//调用保存事件
  161. jp.close(index);
  162. },
  163. btn3: function(index){
  164. jp.close(index);
  165. }
  166. });
  167. });
  168. $("#export").click(function(){//导出Excel文件
  169. jp.downloadFile('${ctx}/questionnaire/eduQuestionnaireQuestion/export');
  170. });
  171. $("#search").click("click", function() {// 绑定查询按扭
  172. $('#eduQuestionnaireQuestionTable').bootstrapTable('refresh');
  173. });
  174. $("#reset").click("click", function() {// 绑定查询按扭
  175. $("#searchForm input").val("");
  176. $("#searchForm select").val("");
  177. $("#searchForm .select-item").html("");
  178. $('#eduQuestionnaireQuestionTable').bootstrapTable('refresh');
  179. });
  180. });
  181. function getIdSelections() {
  182. return $.map($("#eduQuestionnaireQuestionTable").bootstrapTable('getSelections'), function (row) {
  183. return row.id
  184. });
  185. }
  186. function deleteAll(){
  187. jp.confirm('确认要删除该调查问卷记录吗?', function(){
  188. jp.loading();
  189. jp.get("${ctx}/questionnaire/eduQuestionnaireQuestion/deleteAll?ids=" + getIdSelections(), function(data){
  190. if(data.success){
  191. $('#eduQuestionnaireQuestionTable').bootstrapTable('refresh');
  192. jp.success(data.msg);
  193. }else{
  194. jp.error(data.msg);
  195. }
  196. })
  197. })
  198. }
  199. //刷新列表
  200. function refresh() {
  201. $('#eduQuestionnaireQuestionTable').bootstrapTable('refresh');
  202. }
  203. function add(questionnaireId){
  204. debugger;
  205. jp.openSaveDialog('新增调查问卷', "${ctx}/questionnaire/eduQuestionnaireQuestion/form?questionnaire.id="+questionnaireId,'800px', '500px');
  206. }
  207. function edit(id){//没有权限时,不显示确定按钮
  208. if(id == undefined){
  209. id = getIdSelections();
  210. }
  211. jp.openSaveDialog('编辑调查问卷', "${ctx}/questionnaire/eduQuestionnaireQuestion/form?id=" + id, '800px', '500px');
  212. }
  213. function view(id){//没有权限时,不显示确定按钮
  214. if(id == undefined){
  215. id = getIdSelections();
  216. }
  217. jp.openViewDialog('查看调查问卷', "${ctx}/questionnaire/eduQuestionnaireQuestion/form?id=" + id, '800px', '500px');
  218. }
  219. function detailFormatter(index, row) {
  220. if(row.types != "3") {
  221. var htmltpl = $("#eduQuestionnaireQuestionChildrenTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, "");
  222. var html = Mustache.render(htmltpl, {
  223. idx: row.id
  224. });
  225. $.get("${ctx}/questionnaire/eduQuestionnaireQuestion/detail?id=" + row.id, function (eduQuestionnaireQuestion) {
  226. var eduQuestionnaireQuestionChild1RowIdx = 0,
  227. eduQuestionnaireQuestionChild1Tpl = $("#eduQuestionnaireQuestionChild1Tpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, "");
  228. var data1 = eduQuestionnaireQuestion.eduQuestionnaireOptionList;
  229. for (var i = 0; i < data1.length; i++) {
  230. data1[i].dict = {};
  231. addRow('#eduQuestionnaireQuestionChild-' + row.id + '-1-List', eduQuestionnaireQuestionChild1RowIdx, eduQuestionnaireQuestionChild1Tpl, data1[i]);
  232. eduQuestionnaireQuestionChild1RowIdx = eduQuestionnaireQuestionChild1RowIdx + 1;
  233. }
  234. })
  235. return html;
  236. }
  237. }
  238. function addRow(list, idx, tpl, row){
  239. $(list).append(Mustache.render(tpl, {
  240. idx: idx, delBtn: true, row: row
  241. }));
  242. }
  243. </script>
  244. <script type="text/template" id="eduQuestionnaireQuestionChildrenTpl">//<!--
  245. <div class="tabs-container">
  246. <ul class="nav nav-tabs">
  247. <li class="active"><a data-toggle="tab" href="#tab-{{idx}}-1" aria-expanded="true">题目内容</a></li>
  248. </ul>
  249. <div class="tab-content">
  250. <div id="tab-{{idx}}-1" class="tab-pane fade in active">
  251. <table class="ani table">
  252. <thead>
  253. <tr>
  254. <th>选项内容</th>
  255. <th>排序</th>
  256. </tr>
  257. </thead>
  258. <tbody id="eduQuestionnaireQuestionChild-{{idx}}-1-List">
  259. </tbody>
  260. </table>
  261. </div>
  262. </div>//-->
  263. </script>
  264. <script type="text/template" id="eduQuestionnaireQuestionChild1Tpl">//<!--
  265. <tr>
  266. <td>
  267. {{row.title}}
  268. </td>
  269. <td>
  270. {{row.seq}}
  271. </td>
  272. </tr>//-->
  273. </script>