mainFunction.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
  1. /**
  2. * 基本操作功能的实现
  3. * by Unow
  4. * finished in 2018.12.13
  5. *
  6. */
  7. (function($){
  8. listApi = 'http://localhost:8080/api/list';
  9. addNodeApi = 'http://localhost:8080/api/add';
  10. updateApi = 'http://localhost:8080/api/edit';
  11. deleteApi = 'http://localhost:8080/api/delete';
  12. logoutApi = 'http://localhost:8080/manager/logout';
  13. var main = {
  14. currentPage:1,
  15. totalPage:1,
  16. rows:5,
  17. data:[]
  18. };
  19. onLoad();
  20. BindEvent();
  21. /**
  22. * [sendRequest description:@封装Ajax请求]
  23. * @param {[type]} url [description]
  24. * @param {[type]} param [description]
  25. * @param {Boolean} async [description]
  26. * @param {String} type [description]
  27. * @param {[type]} success_fn [description]
  28. * @param {[type]} failure_fn [description]
  29. * @param {[type]} contentType [description]
  30. * @return {[type]} [description]
  31. */
  32. function sendRequest(url,param,async=true,type='get',success_fn,failure_fn,contentType){
  33. $.ajax({
  34. url:url,
  35. data:param,
  36. type:type,
  37. contentType:contentType,
  38. async:async,
  39. success:function(data){
  40. success_fn(data);
  41. },
  42. error:function(err_msg){
  43. failure_fn(err_msg);
  44. }
  45. });
  46. }
  47. /**
  48. * [renderNodeByPid description:@发起ajax请求,并将获取到的数据渲染到树上,并且绑定main对象]
  49. * @param {[type]} url [description]
  50. * @param {[type]} pid [description]
  51. * @param {[type]} parentNode [description]
  52. * @param {Boolean} show [description]
  53. * @return {[type]} [description]
  54. */
  55. function renderNodeByPid(url,pid,parentNode,show=true){
  56. if(!parentNode[0].nodes&&parentNode[0].isParent){
  57. sendRequest(url,{pid:pid},true,'get'
  58. ,function(data){
  59. $.each(data,function(index,val){
  60. if(show){
  61. $('#left-tree').treeview('addNode',[val,parentNode]);
  62. $('#editName').val(parentNode[0].text);
  63. main.totalPage=Math.ceil(data.length/main.rows);
  64. main.currentPage = 1;
  65. showMsg(data);
  66. }else{
  67. $('#move-tree').treeview('addNode',[val,parentNode]);
  68. }
  69. });
  70. },function(failue){
  71. $.showMsgText(failue.msg);
  72. });
  73. }
  74. }
  75. /**
  76. * [addNode description:@发起增加节点请求,渲染且实时绑定main]
  77. * @param {[type]} url [description]
  78. * @param {[type]} param [description]
  79. * @param {[type]} parentNode [description]
  80. */
  81. function addNode(url,param,parentNode){
  82. sendRequest(url,param,true,'post',function(data){
  83. $('#left-tree').treeview('addNode', [data, parentNode]);
  84. main.totalPage=Math.ceil(parentNode[0].nodes.length/main.rows);
  85. showMsg(parentNode[0].nodes);
  86. },function(failue){
  87. $.showMsgText("新增失败!");
  88. },"application/json");
  89. }
  90. /**
  91. * [updateNode description:@发起更新节点请求,渲染且实时绑定main]
  92. * @param {[type]} url [description]
  93. * @param {[type]} oldNode [description]
  94. * @return {[type]} [description]
  95. */
  96. function updateNode(url,oldNode){
  97. var param = {_method:"PUT",id:oldNode[0].id,text:$('#editName').val()};
  98. sendRequest(url,param,true,'post',function(data){
  99. oldNode.text=data.text;
  100. oldNode.recentTime=data.recentTime;
  101. data = oldNode;
  102. $('#left-tree').treeview('updateNode', [ oldNode, data]);
  103. showMsg(data[0].nodes);
  104. $('#editName').val(data.text);
  105. $("#headTitle").text(data.text);
  106. },function(failue){
  107. $.showMsgText("修改失败!");
  108. });
  109. }
  110. /**
  111. * [deleteNode description:@发起删除节点请求,渲染且实时绑定main]
  112. * @param {[type]} url [description]
  113. * @param {[type]} node [description]
  114. * @return {[type]} [description]
  115. */
  116. function deleteNode(url,node){
  117. var param = {_method:"DELETE",id:node[0].id}
  118. sendRequest(url,param,true,'post',function(data){
  119. $('#left-tree').treeview('removeNode', [ node, { silent: true } ]);
  120. $('#editName').val("");
  121. $("#headTitle").text("");
  122. showMsg([]);
  123. },function(){
  124. $.showMsgText("删除失败!");
  125. });
  126. }
  127. /**
  128. * [add0 description:@配合转换时间戳的方法]
  129. * @param {[type]} m [description]
  130. * @return {[type]} [description]
  131. */
  132. function add0(m){
  133. return m<10?'0'+m:m
  134. }
  135. /**
  136. * [timestampToTime description:@转换时间戳]
  137. * @param {[type]} timestamp [description]
  138. * @return {[type]} [description]
  139. */
  140. function timestampToTime(timestamp) {
  141. //timestampÊÇÕûÊý£¬·ñÔòÒªparseIntת»»,²»»á³öÏÖÉÙ¸ö0µÄÇé¿ö
  142. if(!timestamp){
  143. return;
  144. }
  145. var time = new Date(timestamp);
  146. var year = time.getFullYear();
  147. var month = time.getMonth()+1;
  148. var date = time.getDate();
  149. var hours = time.getHours();
  150. var minutes = time.getMinutes();
  151. var seconds = time.getSeconds();
  152. return year+'-'+add0(month)+'-'+add0(date);
  153. }
  154. /**
  155. * [onLoad description:@主要加载节点方法,只对id为left-tree有效]
  156. * @return {[type]} [description]
  157. */
  158. function onLoad(){
  159. sendRequest(listApi,{pid:0},true,'get',function(data){
  160. $('#left-tree').treeview({
  161. data:data,
  162. levels: 1,
  163. onNodeSelected:function(event, node){
  164. var parentNode = $('#left-tree').treeview('getSelected');
  165. renderNodeByPid(listApi,node.id,parentNode);
  166. $('#editName').val(node.text);
  167. $("#headTitle").text(node.text);
  168. if(node){
  169. if(node.nodes)
  170. main.totalPage=Math.ceil(node.nodes.length/main.rows);
  171. else
  172. main.totalPage=1
  173. showMsg(node.nodes);
  174. }
  175. },
  176. showCheckbox:false//是否显示多选
  177. });
  178. },function(){
  179. $.showMsgText("加载失败!");
  180. });
  181. }
  182. /**
  183. * [showMsg description:@渲染详情页面]
  184. * @param {[type]} list [description]
  185. * @return {[type]} [description]
  186. */
  187. function showMsg(list){
  188. if(list)
  189. list = list.slice(main.currentPage*main.rows-main.rows,main.currentPage*main.rows);
  190. $("#content").empty();
  191. var parentNode = $('#left-tree').treeview('getSelected');
  192. $.each(list,function(data,val){
  193. $tr = $("<tr></tr>");
  194. row0 = "<td>"+val.id+"</td>"; $tr.append(row0)
  195. row1 = "<td>"+getParents(parentNode,[parentNode[0].text])+"</td>"; $tr.append(row1)
  196. row2 = "<td>"+val.text+"</td>"; $tr.append(row2)
  197. row3 = "<td>"+timestampToTime(val.createTime)+"</td>"; $tr.append(row3)
  198. row4 = "<td>"+timestampToTime(val.recentTime)+"</td>"; $tr.append(row4)
  199. $("#content").append($tr)
  200. });
  201. }
  202. /**
  203. * [getParents description:@遍历父节点,获取所有父节点名称]
  204. * @param {[type]} node [description]
  205. * @param {[type]} parentArr [description]
  206. * @return {[type]} [description]
  207. */
  208. function getParents(node,parentArr){
  209. parentNode=$('#left-tree').treeview('getParents', node);
  210. if(parentNode.length==0){
  211. parentArr = parentArr.reverse().join('/');
  212. return parentArr;
  213. }
  214. parentArr.push(parentNode[0].text);
  215. return getParents(parentNode,parentArr);
  216. }
  217. /**
  218. * [BindEvent description:@注册交互事件]
  219. */
  220. function BindEvent(){
  221. //保存-新增
  222. $("#Save").click(function () {
  223. $('#addOperation-dialog').modal('hide')
  224. var parentNode = $('#left-tree').treeview('getSelected');
  225. var param = { text:$('#addName').val(),pid:parentNode[0].id,parentStatu:parentNode[0].isParent }
  226. addNode(addNodeApi,JSON.stringify(param),parentNode);
  227. });
  228. //保存-编辑
  229. $('#Edit').click(function(){
  230. var node = $('#left-tree').treeview('getSelected');
  231. if(node.length==0){
  232. $.showMsgText("请选择一门学科")
  233. }
  234. updateNode(updateApi,node);
  235. });
  236. //显示-添加
  237. $("#btnAdd").click(function(){
  238. var node = $('#left-tree').treeview('getSelected');
  239. if (node.length == 0) {
  240. $.showMsgText('请选择一门学科');
  241. return;
  242. }
  243. $('#addName').val('');
  244. $('#addOperation-dialog').modal('show');
  245. });
  246. //删除
  247. $("#btnDel").click(function(){
  248. var node = $('#left-tree').treeview('getSelected');
  249. if (node.length == 0) {
  250. $.showMsgText('请选择节点');
  251. return;
  252. }
  253. BootstrapDialog.confirm({
  254. title: '提示',
  255. message: '确定删除此节点?',
  256. size: BootstrapDialog.SIZE_SMALL,
  257. type: BootstrapDialog.TYPE_DEFAULT,
  258. closable: true,
  259. btnCancelLabel: '取消',
  260. btnOKLabel: '确定',
  261. callback: function (result) {
  262. if(result){
  263. deleteNode(deleteApi,node);
  264. }
  265. }
  266. });
  267. });
  268. //显示-添加根节点
  269. $("#setting").click(function(){
  270. $("#addOperation-dialog-root").modal('show');
  271. });
  272. //保存-添加根节点
  273. $("#rootSave").click(function(){
  274. $('#addOperation-dialog-root').modal('hide');
  275. var param = { text:$('#addRootName').val(),pid:0,parentStatu:true };
  276. sendRequest(addNodeApi,JSON.stringify(param),true,'post',function(data){
  277. $('#left-tree').treeview('remove');
  278. onLoad();
  279. },function(failue){
  280. $.showMsgText("新增失败!");
  281. },"application/json");
  282. });
  283. //显示-移动节点
  284. $("#btnMove").click(function(){
  285. var node = $('#left-tree').treeview('getSelected');
  286. if(node.length == 0){
  287. $.showMsgText("请选择一门学科!");
  288. return;
  289. }
  290. $('#addOperation-dialog-move').modal('show');
  291. sendRequest(listApi,{pid:0},true,'get',function(data){
  292. $('#move-tree').treeview({
  293. data:data,
  294. levels: 1,
  295. onNodeSelected:function(event, node){
  296. var parentNode = $('#move-tree').treeview('getSelected');
  297. renderNodeByPid(listApi,node.id,parentNode,false);
  298. },
  299. showCheckbox:false//是否显示多选
  300. });
  301. },function(){
  302. $.showMsgText("加载失败!");
  303. });
  304. });
  305. //保存-移动节点
  306. $("#moveSave").click(function(){
  307. var node = $('#move-tree').treeview('getSelected');
  308. if(node.length == 0){
  309. $.showMsgText("请选择一门学科!");
  310. return;
  311. }
  312. $('#addOperation-dialog-move').modal('hide');
  313. var node = $("#left-tree").treeview("getSelected");
  314. var mvnode = $("#move-tree").treeview("getSelected");
  315. var param = {_method:"PUT",id:node[0].id,pid:mvnode[0].id}
  316. sendRequest(updateApi,param,true,'post',function(data){
  317. $('#left-tree').treeview('remove');
  318. onLoad();
  319. },function(failue){
  320. $.showMsgText("修改失败!");
  321. });
  322. });
  323. //翻页-上一页
  324. $("#pre").click(function(){
  325. if(main.currentPage>1){
  326. var parentNode = $('#left-tree').treeview('getSelected');
  327. main.currentPage--;
  328. $("#viewpage").text(main.currentPage);
  329. showMsg(parentNode[0].nodes);
  330. }
  331. });
  332. //翻页-下一页
  333. $("#next").click(function(){
  334. if(main.currentPage<main.totalPage){
  335. var parentNode = $('#left-tree').treeview('getSelected');
  336. main.currentPage++;
  337. $("#viewpage").text(main.currentPage);
  338. showMsg(parentNode[0].nodes);
  339. }
  340. });
  341. $("#logout").click(function(){
  342. console.log(1);
  343. $.ajax({
  344. url:logoutApi,
  345. type:'get',
  346. success:function() {
  347. window.location.href = 'entrance.html';
  348. },
  349. error:function(){
  350. $.showMsgText("错误-500");
  351. }
  352. })
  353. });
  354. $('#input-select-node').change(function(){
  355. val = $('#input-select-node').val()
  356. if(val==""){
  357. $('#left-tree').treeview('clearSearch');
  358. }
  359. });
  360. $("#query").click(function(){
  361. result = $('#left-tree').treeview('search', [ $('#input-select-node').val(), { ignoreCase: true, exactMatch: false } ]);
  362. console.log(result);
  363. });
  364. }
  365. })(jQuery);