mainFunction.js 11 KB

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