dictionary.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="renderer" content="webkit|ie-comp|ie-stand">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  8. <meta http-equiv="Cache-Control" content="no-siteapp" />
  9. <!--[if lt IE 9]>
  10. <script type="text/javascript" src="${ctx}/assets/lib/html5.js"></script>
  11. <script type="text/javascript" src="${ctx}/assets/lib/respond.min.js"></script>
  12. <script type="text/javascript" src="${ctx}/assets/lib/PIE_IE678.js"></script>
  13. <![endif]-->
  14. <link rel="stylesheet" type="text/css" href="${ctx}/assets/static/h-ui/css/H-ui.min.css" />
  15. <link rel="stylesheet" type="text/css" href="${ctx}/assets/static/h-ui.admin/css/H-ui.admin.css" />
  16. <link rel="stylesheet" type="text/css" href="${ctx}/assets/lib/Hui-iconfont/1.0.7/iconfont.css" />
  17. <link rel="stylesheet" type="text/css" href="${ctx}/assets/lib/icheck/icheck.css" />
  18. <link rel="stylesheet" type="text/css" href="${ctx}/assets/static/h-ui.admin/skin/default/skin.css" id="skin" />
  19. <link rel="stylesheet" type="text/css" href="${ctx}/assets/static/h-ui.admin/css/style.css" />
  20. <link rel="stylesheet" href="${ctx}/assets/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
  21. <script type="text/ecmascript" src="${ctx}/assets/lib/jquery/1.9.1/jquery.js"></script>
  22. <script type="text/javascript" src="${ctx}/assets/lib/layer/3.0.3/layer.js"></script>
  23. <script type="text/javascript" src="${ctx}/assets/static/h-ui/js/H-ui.js"></script>
  24. <link rel="stylesheet" type="text/css" media="screen" href="${ctx}/assets/lib/jqueryui/jquery-ui.css" />
  25. <link rel="stylesheet" type="text/css" media="screen" href="${ctx}/assets/lib/jqgrid/css/ui.jqgrid.css" />
  26. <script type="text/ecmascript" src="${ctx}/assets/lib/jqueryui/jquery-ui.js"></script>
  27. <script type="text/ecmascript" src="${ctx}/assets/lib/jqgrid/js/i18n/grid.locale-cn.js"></script>
  28. <script type="text/ecmascript" src="${ctx}/assets/lib/jqgrid/js/jquery.jqGrid.min.js"></script>
  29. <script type="text/javascript" src="${ctx}/assets/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
  30. <script type="text/javascript" src="${ctx}/assets/js/base.js"></script>
  31. <!--[if IE 6]>
  32. <script type="text/javascript" src="${ctx}/assets/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
  33. <script>DD_belatedPNG.fix('*');</script>
  34. <![endif]-->
  35. <script type="text/javascript">
  36. $(function() {
  37. $(window).resize(function(){
  38. $("#tree").setGridWidth($(window).width()-40); 
  39. });
  40. $("#tree").jqGrid({
  41. caption:'字典管理',
  42. url : '${ctx}/myconsole/pdic/getByTree',
  43. editurl:"${ctx}/myconsole/pdic/saveOrUpdate",
  44. mtype : "POST",
  45. "hoverrows":false,
  46. "viewrecords":false,
  47. "gridview":true,
  48. "height":"auto",
  49. //"loadonce":true,
  50. "rowNum":100,
  51. "scrollrows":true,
  52. // enable tree grid
  53. "treeGrid":false,
  54. // which column is expandable
  55. "ExpandColumn":"tname",
  56. // datatype
  57. "treedatatype":"json",
  58. // the model used
  59. "treeGridModel":"adjacency",
  60. // configuration of the data comming from server
  61. "sortorder":"asc",
  62. autowidth : true,
  63. "datatype":"json",
  64. "pager":"#pager",
  65. colModel : [ {
  66. label : '字典名称',
  67. name : 'tname',
  68. edittype:"text",
  69. editable: true,
  70. formoptions:{
  71. elmsuffix:'*'
  72. },
  73. editrules:{required:true},
  74. width : 100
  75. }, {
  76. label : '字典键值',
  77. name : 'tid',
  78. editable: true,
  79. edittype: "text",
  80. width : 50
  81. }, {
  82. label : '字典编号',
  83. name : 'keyid',
  84. key : true,
  85. hidden : false,
  86. editable: false,
  87. width : 100
  88. }, {
  89. label : '字典排序',
  90. name : 'sortid',
  91. editable: true,
  92. edittype: "text",
  93. formoptions:{
  94. elmsuffix:'必须是数字'
  95. },
  96. width : 50
  97. },{
  98. "name":"upperid",
  99. "hidden":true
  100. },{
  101. "name":"tlevel",
  102. "hidden":true
  103. } ],
  104. });
  105. jQuery('#tree').jqGrid('navGrid','#pager',
  106. // the buttons to appear on the toolbar of the grid
  107. {
  108. edit : true,
  109. add : true,
  110. del : true,
  111. search : false,
  112. refresh : true,
  113. view : false,
  114. position : "left",
  115. cloneToTop : true,
  116. afterComplete:function(){
  117. // zTree = $.fn.zTree.init($("#ztree"), setting);
  118. }
  119. },
  120. // options for the Edit Dialog
  121. {
  122. recreateForm : true,
  123. checkOnUpdate : true,
  124. checkOnSubmit : true,
  125. closeAfterEdit : true,
  126. serializeEditData: function(postdata) {
  127. $.each(postdata,function (index, value) {
  128. if(index == "id"){
  129. index = "keyid";
  130. postdata[index] = value;
  131. }
  132. })
  133. return postdata;
  134. },
  135. errorTextFormat : function(data) {
  136. return 'Error: ' + data.responseText
  137. },
  138. afterComplete:function(){
  139. zTree = $.fn.zTree.init($("#ztree"), setting);
  140. }
  141. },
  142. // options for the Add Dialog
  143. {
  144. closeAfterAdd : true,
  145. recreateForm : true,
  146. beforeSubmit: function(postdata, formid){
  147. var selRowId = $("#tree").jqGrid ('getGridParam', 'selrow');
  148. //myconsole.log(selRowId);
  149. //myconsole.log($("#tree").jqGrid('getGridParam', 'upperid'));
  150. if(selRowId != null){
  151. postdata.upperid=selRowId;
  152. }else{
  153. postdata.upperid = $("#tree").jqGrid('getGridParam', 'upperid');
  154. }
  155. return[true,''];
  156. },
  157. afterComplete : function (response, postdata, formid) {
  158. //取消选择
  159. $("#tree").jqGrid("resetSelection");
  160. zTree = $.fn.zTree.init($("#ztree"), setting);
  161. //关闭对话框
  162. $(".ui-icon-closethick").trigger('click');
  163. },
  164. errorTextFormat : function(data) {
  165. return 'Error: ' + data.responseText
  166. }
  167. },
  168. // options for the Delete Dailog
  169. {
  170. errorTextFormat : function(data) {
  171. return 'Error: ' + data.responseText
  172. },
  173. afterComplete:function(){
  174. zTree = $.fn.zTree.init($("#ztree"), setting);
  175. }
  176. });
  177. jQuery('#tree').jqGrid('bindKeys');
  178. })
  179. var zTree;
  180. var setting = {
  181. async:{
  182. enable:true,
  183. type:"post",
  184. url:"${ctx}/myconsole/pdic/getzTree",
  185. dataFilter:dataFilter
  186. } ,
  187. check: {
  188. enable: false,
  189. chkStyle: "radio",
  190. radioType: "all"
  191. },
  192. view:{
  193. dblClickExpand: false,
  194. },
  195. data: {
  196. simpleData: {
  197. enable: true,
  198. idKey: "keyid",
  199. pIdKey: "upperid",
  200. // rootPId: 0
  201. },
  202. key:{
  203. name:"tname"
  204. }
  205. },
  206. callback: {
  207. beforeExpand: beforeExpand,
  208. onExpand: onExpand,
  209. onClick: onClick,
  210. onAsyncSuccess: onAsyncSuccess,
  211. }
  212. };
  213. function dataFilter (treeId,parentNode,childNodes){
  214. var getZ = $.fn.zTree.getZTreeObj("ztree");
  215. var nodes = {keyid:'0',tname:'首页',upperid:'-1',tlevel:'0',isleaf:'no',open:true};
  216. childNodes.push(nodes);
  217. for (var i=0, l=childNodes.length; i<l; i++) {
  218. childNodes[i].tname = childNodes[i].tname.replace(/\.n/g, '.');
  219. }
  220. return childNodes;
  221. }
  222. //异步请求成功后执行的方法,为了展开首页,或者树形结构刷新后,展开之前树形结构
  223. function onAsyncSuccess(){
  224. if(aNode != null){
  225. zTree.expandNode(aNode,true,false,false);
  226. //zTree.expandNode(aNode,true,false,false);
  227. }else{
  228. var fiNode = zTree.getNodeByParam("keyid","0");
  229. zTree.expandNode(fiNode,true,false,false);
  230. }
  231. // aNode = null;
  232. }
  233. var curExpandNode = null;//当前展开树形节点
  234. //树形结构展开之前执行方法,与singlePath方法实现控制同一级别下只展开一个树形节点
  235. function beforeExpand(treeId, treeNode) {
  236. var pNode = curExpandNode ? curExpandNode.getParentNode():null;
  237. var treeNodeP = treeNode.parentTId ? treeNode.getParentNode():null;
  238. var zTree = $.fn.zTree.getZTreeObj("ztree");
  239. for(var i=0, l=!treeNodeP ? 0:treeNodeP.children.length; i<l; i++ ) {
  240. if (treeNode !== treeNodeP.children[i]) {
  241. zTree.expandNode(treeNodeP.children[i], false);
  242. }
  243. }
  244. while (pNode) {
  245. if (pNode === treeNode) {
  246. break;
  247. }
  248. pNode = pNode.getParentNode();
  249. }
  250. if (!pNode) {
  251. singlePath(treeNode);
  252. }
  253. }
  254. function singlePath(newNode) {
  255. if (newNode === curExpandNode) return;
  256. var zTree = $.fn.zTree.getZTreeObj("ztree"),
  257. rootNodes, tmpRoot, tmpTId, i, j, n;
  258. if (!curExpandNode) {
  259. tmpRoot = newNode;
  260. while (tmpRoot) {
  261. tmpTId = tmpRoot.tId;
  262. tmpRoot = tmpRoot.getParentNode();
  263. }
  264. rootNodes = zTree.getNodes();
  265. for (i=0, j=rootNodes.length; i<j; i++) {
  266. n = rootNodes[i];
  267. if (n.tId != tmpTId) {
  268. zTree.expandNode(n, false);
  269. }
  270. }
  271. } else if (curExpandNode && curExpandNode.open) {
  272. if (newNode.parentTId === curExpandNode.parentTId) {
  273. zTree.expandNode(curExpandNode, false);
  274. } else {
  275. var newParents = [];
  276. while (newNode) {
  277. newNode = newNode.getParentNode();
  278. if (newNode === curExpandNode) {
  279. newParents = null;
  280. break;
  281. } else if (newNode) {
  282. newParents.push(newNode);
  283. }
  284. }
  285. if (newParents!=null) {
  286. var oldNode = curExpandNode;
  287. var oldParents = [];
  288. while (oldNode) {
  289. oldNode = oldNode.getParentNode();
  290. if (oldNode) {
  291. oldParents.push(oldNode);
  292. }
  293. }
  294. if (newParents.length>0) {
  295. zTree.expandNode(oldParents[Math.abs(oldParents.length-newParents.length)-1], false);
  296. } else {
  297. zTree.expandNode(oldParents[oldParents.length-1], false);
  298. }
  299. }
  300. }
  301. }
  302. curExpandNode = newNode;
  303. }
  304. //树形结构展开时执行方法
  305. function onExpand(event, treeId, treeNode) {
  306. curExpandNode = treeNode;
  307. }
  308. var zNodes;
  309. var aNode; //选中树形节点
  310. //ztree点击直接展开,并根据选中的树形节点重新加载jqgrid
  311. function onClick(e,treeId,treeNode){
  312. aNode = treeNode;
  313. if(treeNode.tname != "首页"){
  314. zTree.expandNode(treeNode,null,null,null,true);
  315. }else{
  316. $.fn.zTree.getZTreeObj("ztree").expandAll(false);
  317. zTree.expandNode(treeNode,null,null,null,true);
  318. }
  319. jQuery("#tree").jqGrid('setGridParam', { url: "${ctx}/myconsole/pdic/getByTree?nodeid="+treeNode.keyid,'upperid':treeNode.keyid }).trigger('reloadGrid');
  320. }
  321. $(function(){
  322. //zTree初始化方法
  323. zTree = $.fn.zTree.init($("#ztree"), setting);
  324. })
  325. </script>
  326. <title>我的桌面</title>
  327. <style type="text/css">
  328. .ztree li span.button.switch.level0 {visibility:hidden; width:1px;}
  329. .ztree li ul.level0 {padding:0; background:none;}
  330. </style>
  331. </head>
  332. <body>
  333. <div>
  334. <div id = "ztree" class="ztree" style="margin-top:15px;margin-left:5px;width:15%;float:left;"></div>
  335. <div style="margin-top:0px;width:83%;float:right;">
  336. <div class="page-container">
  337. <table id="tree"></table>
  338. <div id="pager"></div>
  339. </div>
  340. <footer class="footer mt-20">
  341. <div class="container">
  342. <p></p>
  343. </div>
  344. </footer>
  345. </div>
  346. </div>
  347. </body>
  348. </html>