dicdata.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484
  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. <script type="text/ecmascript" src="${ctx}/assets/lib/jquery/1.9.1/jquery.js"></script>
  21. <script type="text/javascript" src="${ctx}/assets/static/h-ui/js/H-ui.js"></script>
  22. <link rel="stylesheet" type="text/css" media="screen" href="${ctx}/assets/lib/jqueryui/jquery-ui.css" />
  23. <link rel="stylesheet" type="text/css" media="screen" href="${ctx}/assets/lib/jqgrid/css/ui.jqgrid.css" />
  24. <script type="text/ecmascript" src="${ctx}/assets/lib/jqueryui/jquery-ui.js"></script>
  25. <script type="text/ecmascript" src="${ctx}/assets/lib/jqgrid/js/i18n/grid.locale-cn.js"></script>
  26. <script type="text/ecmascript" src="${ctx}/assets/lib/jqgrid/js/jquery.jqGrid.min.js"></script>
  27. <link rel="stylesheet" href="${ctx}/assets/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
  28. <script type="text/javascript" src="${ctx}/assets/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
  29. <script type="text/javascript" src="${ctx}/assets/js/base.js"></script>
  30. <style type="text/css">
  31. ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
  32. </style>
  33. <!--[if IE 6]>
  34. <script type="text/javascript" src="${ctx}/assets/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
  35. <script>DD_belatedPNG.fix('*');</script>
  36. <![endif]-->
  37. <style type="text/css">
  38. select{width: 243px;}
  39. </style>
  40. <script type="text/javascript">
  41. $(function() {
  42. $(window).resize(function(){
  43. $("#tree").setGridWidth($(window).width()-40); 
  44. });
  45. $("#tree").jqGrid({
  46. caption:'${TitleName}',
  47. url : '${ctx}/myconsole/dic/getByTree',
  48. editurl:"${ctx}/myconsole/dic/saveOrUpdate", //定义对form编辑时的url
  49. mtype : "POST", // ajax提交方式。POST或者GET,默认GET
  50. postData:{'tablename':'${TableName}'},
  51. hoverrows:false, // 当为false时mouse hovering会被禁用 默认 false
  52. viewrecords:false, // 定义是否要显示总记录数
  53. gridview:true, // 构造一行数据后添加到grid中,如果设为true则是将整个表格的数据都构造完成后再添加到grid中,但treeGrid, subGrid, or afterInsertRow 不能用 默认为false
  54. height:"auto", // 表格高度,可以是数字,像素值或者百分比
  55. rowNum:100, // 在grid上显示记录条数,这个参数是要被传递到后台
  56. scrollrows:true, // 当为true时让所选择的行可见
  57. treeGrid:true, // 启用或者禁用treegrid模式 默认false
  58. ExpandColumn:"tname", // 指定那列来展开tree grid,默认为第一列,只有在treeGrid为true时起作用
  59. treedatatype:"json", // 数据类型,通常情况下与datatype相同,不会变
  60. treeGridModel:"adjacency", // treeGrid所使用的方法
  61. sortorder:"asc", // 排序顺序,升序或者降序(asc or desc) 默认asc
  62. autowidth : true, // 如果为ture时,则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变,为了使表格宽度能够自动调整则需要实现函数:setGridWidth 默认 false
  63. datatype:"json",
  64. pager:"#pager", // 定义翻页用的导航栏,必须是有效的html元素。翻页工具栏可以放置在html页面任意位置
  65. prmNames : { //定义表单的主键 // Default valuesprmNames: {page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 当参数为null时不会被发到服务器端
  66. id: "tid", 
  67. oper:"oper",    
  68. addoper:"add",
  69. editoper:"edit",
  70. deloper:"del" 
  71. },
  72. colModel : [ {
  73. label : '数据编号',
  74. name : 'keyid',
  75. editable: false,
  76. hidden:true
  77. }, {
  78. label : '名称',
  79. name : 'tname',
  80. editable: true,
  81. edittype:"text",
  82. width : 100,
  83. editoptions: {
  84. size:31,
  85. maxlength: 50
  86. },
  87. editrules:{
  88. required: true
  89. },
  90. formoptions:{
  91. elmsuffix:" <span style='color:red'>*<span>",
  92. rowpos:1,
  93. colpos:1
  94. }
  95. },{
  96. label : '编号',
  97. name : 'tid',
  98. editable: true,
  99. edittype: "text",
  100. key : true,
  101. width : 50,
  102. editoptions: {
  103. size:31,
  104. maxlength: 50
  105. },
  106. editrules:{
  107. edithidden:true,
  108. required: true,
  109. custom:true, 
  110. custom_func: function(strFieldValue, strFieldName){
  111. var strEnglish = /^([0-9a-zA-Z]+)?$/;
  112.  if(!strEnglish.test(strFieldValue)){
  113.    return [false, strFieldName+"应该为大小写英文字母或者数字!"];
  114.   }
  115. else
  116. {
  117.   return [true,""];
  118. }
  119. }
  120. },
  121. formoptions:{
  122. elmsuffix:" <span style='color:red'>*<span>",
  123. rowpos:2,
  124. colpos:1
  125. }
  126. },{
  127. label : '上级编号',
  128. name : 'parentid',
  129. editable: false,
  130. hidden:true
  131. } ,{
  132. label : '排序编号',
  133. name : 'sortid',
  134. editable: true,
  135. hidden : true,
  136. edittype: "text",
  137. width : 100,
  138. editoptions: {
  139. size:31,
  140. maxlength: 5
  141. },
  142. editrules:{
  143. edithidden:true,
  144. required: true,
  145. custom:true, 
  146. custom_func: function(strFieldValue, strFieldName){
  147. var strFloat = /^([-\+]?(((\d+)(\.\d+))|(\.\d+)|(\d*)))?$/;
  148.  if(!strFloat.test(strFieldValue)){
  149.    return [false, strFieldName+"应该为实数"];
  150.   }
  151. else
  152. {
  153.   return [true,""];
  154. }
  155. }
  156. },
  157. formoptions:{
  158. elmsuffix:" <span style='color:red'>*<span>",
  159. rowpos:3,
  160. colpos:1
  161. }
  162. }, {
  163. label : '链接地址',
  164. name : 'turl',
  165. editable: true,
  166. width : 80,
  167. editrules:{
  168. edithidden:true,
  169. },
  170. editoptions: {
  171. size:50,
  172. maxlength: 50
  173. },
  174. formoptions:{
  175. rowpos:4,
  176. colpos:1
  177. }
  178. },{
  179. label : '是否末级节点',
  180. name : 'isleaf',
  181. editable: true,
  182. edittype: "select",
  183. width : 50,
  184. editrules:{
  185. edithidden : true
  186. },
  187. editoptions:{
  188. dataInit: function(elem){
  189. $(elem).width(218);
  190. },
  191. maxlength: 40,
  192. value : "true:是;false:否"
  193. },
  194. formoptions:{
  195. rowpos:5,
  196. colpos:1
  197. }
  198. }, {
  199. label : '创建人',
  200. name : 'username',
  201. width : 60,
  202. editable: false,
  203. edittype:"text"
  204. }, {
  205. label : '创建时间',
  206. name : 'recordtime',
  207. width : 60,
  208. editable: false,
  209. edittype:"text"
  210. }, {
  211. "name":"treelevel",
  212. "hidden":true
  213. } ],
  214. "treeReader":{
  215. "level_field":"treelevel",
  216. "leaf_field":"isleaf",
  217. "expanded_field":"expanded",
  218. "loaded":"loaded",
  219. "parent_id_field":"parentid",
  220. "icon_field":"icon"
  221. },
  222. loadComplete: function() {
  223. }
  224. });
  225. function getSiteURL(){
  226. var siteName=$("#sitename").val();
  227. if(siteName!=""){
  228. $.post("${ctx}/myconsole/pinyin/getFirstSpell",{"chinese":$("#sitename").val()},function(data){
  229. $("#siteid").val(data);
  230. })
  231. }
  232. }
  233. jQuery('#tree').jqGrid('navGrid','#pager',
  234. {
  235. add : true,
  236. edit : true,
  237. del : true,
  238. search : false,
  239. refresh : true,
  240. view : false,
  241. position : "left",
  242. cloneToTop : true
  243. },
  244. //编辑按钮事件处理
  245. {
  246. closeAfterEdit : true,
  247. recreateForm : true,
  248. width:700,
  249. afterShowForm : function(formid) {
  250. var tidObj = formid.find('#tid');
  251. tidObj.attr('readOnly',true);
  252. tidObj.css({'background':'#cccccc'});
  253. },
  254. beforeSubmit: function(postdata, formid){
  255. // 编辑时jqgrid 将主键变成 tree_id 手动添加 keyid
  256. //postdata["keyid"] = postdata.tree_id;
  257. $.each(postdata,function (index, value) {
  258. if(index!="oper"){
  259. modifyJosnKey(postdata,index,"dic."+index);
  260. }
  261. })
  262. postdata["dic.tablename"]="${TableName}";
  263. return [true,'']; //返回值必须这么写 目前没找到原因,用true 和 返回对象都不好使。待查
  264. },
  265. afterSubmit: function(response,postdata)
  266. {
  267. var res=eval('(' + response.responseText + ')');
  268. if(res.flag)
  269. {
  270. parent.layer.alert(res.message, {
  271. skin: 'layui-layer-molv' //样式类名
  272. ,closeBtn: 0
  273. });
  274. return [true,res.message,''];
  275. }
  276. else
  277. {
  278. parent.layer.alert(res.message, {
  279. skin: 'layui-layer-molv' //样式类名
  280. ,closeBtn: 0
  281. });
  282. return [false,res.message,''];
  283. }
  284. },
  285. afterComplete : function (response, postdata, formid) {
  286. //取消选择
  287. $("#tree").jqGrid("resetSelection");
  288. //关闭对话框
  289. $(".ui-icon-closethick").trigger('click');
  290. },
  291. errorTextFormat : function(data) {
  292. return 'Error: ' + data.responseText
  293. }
  294. },
  295. //添加按钮处理事件
  296. {
  297. closeAfterAdd : true,
  298. recreateForm : true,
  299. checkOnUpdate : true,
  300. checkOnSubmit : true,
  301. width:700,
  302. afterShowForm : function(formid) {
  303. },
  304. serializeEditData: function(postdata) {
  305. //对主键字段进行赋值传递 韩林平
  306. var selRowId = $("#tree").jqGrid ('getGridParam', 'selrow');
  307. if(selRowId == null) selRowId = "";
  308. //获取选中的父节点主键值,添加下级站点
  309. postdata.parentid=selRowId;
  310. $.each(postdata,function(index,value){
  311. if(index!="oper"){
  312. modifyJosnKey(postdata,index,"dic."+index);
  313. }
  314. })
  315. //jqgrid 做添加操作会把主键id的值设置成“_empty”;这里修改成空;
  316. postdata["dic.keyid"]="";
  317. postdata["dic.tablename"]="${TableName}";
  318. return postdata;
  319. },
  320. afterSubmit: function(response,postdata)
  321. {
  322. var res=eval('(' + response.responseText + ')');
  323. if(res.flag)
  324. {
  325. parent.layer.alert(res.message, {
  326. skin: 'layui-layer-molv' //样式类名
  327. ,closeBtn: 0
  328. });
  329. return [true,res.message,''];
  330. }
  331. else
  332. {
  333. parent.layer.alert(res.message, {
  334. skin: 'layui-layer-molv' //样式类名
  335. ,closeBtn: 0
  336. });
  337. return [false,res.message,''];
  338. }
  339. },
  340. errorTextFormat : function(data) {
  341. return 'Error: ' + data.responseText
  342. }
  343. },
  344. // options for the Delete Dailog
  345. {
  346. delData:{
  347. dictablename:function(){
  348. var value="${TableName}";
  349. return value;
  350. }
  351. },
  352. errorTextFormat : function(data) {
  353. return 'Error: ' + data.responseText
  354. },
  355. afterSubmit: function(response,postdata)
  356. {
  357. var res=eval('(' + response.responseText + ')');
  358. if(res.flag)
  359. {
  360. //alert(res.message);
  361. parent.layer.alert(res.message, {
  362. skin: 'layui-layer-molv' //样式类名
  363. ,closeBtn: 0
  364. });
  365. return [true,res.message,''];
  366. }
  367. else
  368. {
  369. return [false,res.message,''];
  370. }
  371. }
  372. });
  373. jQuery('#tree').jqGrid('bindKeys');
  374. })
  375. var zTree;
  376. var setting = {
  377. check: {
  378. enable: true,
  379. chkStyle: "radio",
  380. radioType: "all"
  381. },
  382. data: {
  383. simpleData: {
  384. enable: true,
  385. idKey: "KeyID",
  386. pIdKey: "ParentID",
  387. rootPId: 0
  388. },
  389. key:{
  390. name:"SiteName"
  391. }
  392. },
  393. callback: {
  394. onClick: onClick,
  395. onCheck: onCheck
  396. }
  397. };
  398. var zNodes =${DicDataList};
  399. function onClick(e, treeId, treeNode) {
  400. var zTree = $.fn.zTree.getZTreeObj("treeSite");
  401. zTree.checkNode(treeNode, !treeNode.checked, null, true);
  402. return false;
  403. }
  404. function onCheck(){
  405. }
  406. function showMenu() {
  407. var cityObj = $("#citySel");
  408. var cityOffset = $("#citySel").offset();
  409. $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
  410. $("body").bind("mousedown", onBodyDown);
  411. }
  412. function hideMenu() {
  413. $("#menuContent").fadeOut("fast");
  414. $("body").unbind("mousedown", onBodyDown);
  415. }
  416. function onBodyDown(event) {
  417. if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
  418. hideMenu();
  419. }
  420. }
  421. $(function(){
  422. zTree=$.fn.zTree.init($("#treeSite"), setting, zNodes);
  423. });
  424. //表单验证
  425. </script>
  426. <title>我的桌面</title>
  427. </head>
  428. <body>
  429. <div class="page-container">
  430. <table id="tree"></table>
  431. <div id="pager"></div>
  432. </div>
  433. <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
  434. <ul id="treeSite" class="ztree" style="margin-top:0; width:300px; height: 300px;"></ul>
  435. </div>
  436. <footer class="footer mt-20">
  437. <div class="container">
  438. <p> </p>
  439. </div>
  440. </footer>
  441. </body>
  442. </html>