main.html 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <meta http-equiv="x-ua-compatible" content="ie=edge">
  7. <title>报表模板编辑器</title>
  8. <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
  9. <link rel="stylesheet" href="css/main.css">
  10. <link rel="stylesheet" href="css/font-awesome/font-awesome.min.css">
  11. <link rel="stylesheet" href="css/font-zy/iconfont.css">
  12. <!--zTree-->
  13. <link rel="stylesheet" href="css/ztree/zTreeStyle.css" type="text/css">
  14. </head>
  15. <body>
  16. <div class="header">
  17. <nav class="navbar navbar-toggleable-lg navbar-light bg-faded p-0 ">
  18. <span class="header-logo px-2">Smartcost</span>
  19. <div class="navbar-text">系统模板库<i class="fa fa-angle-right fa-fw"></i>XXX报表</div>
  20. </nav>
  21. <nav class="navbar navbar-toggleable-lg justify-content-between navbar-light p-0">
  22. <div class="px-3 row" >
  23. <div class="col-6">
  24. <select class="form-control form-control-sm"><option>重庆2008</option><option>重庆2007</option></select>
  25. </div>
  26. <div class="col-6">
  27. <select class="form-control form-control-sm"><option>建筑工程</option><option>装饰工程</option></select>
  28. </div>
  29. </div>
  30. <div class="p-2">
  31. <button class="btn btn-primary btn-sm">保存</button>
  32. <a class="btn btn-secondary btn-sm" target="_blank">预览</a>
  33. </div>
  34. </nav>
  35. </div>
  36. <div class="main">
  37. <div class="content">
  38. <div class="container-fluid">
  39. <div class="row">
  40. <div class="main-side col-lg-3 p-0">
  41. <div class="tab-bar">
  42. <div class="input-group input-group-sm">
  43. <input type="text" class="form-control" placeholder="输入报表名检索">
  44. <span class="input-group-btn">
  45. <button class="btn btn-primary" type="button">搜索</button>
  46. </span>
  47. </div>
  48. </div>
  49. <div class="tab-content">
  50. <ul id="treeDemo" class="ztree"></ul>
  51. </div>
  52. </div>
  53. <div class="main-content col-lg-9 p-0">
  54. <div class="container-fluid">
  55. <div class="row">
  56. <!-- 报表设置 -->
  57. <div class="col-lg-12 p-0">
  58. <ul class="nav nav-tabs tools-bar px-1" role="tablist">
  59. <li class="nav-item">
  60. <a class="nav-link active" data-toggle="tab" href="#mbxx" role="tab">模板信息</a>
  61. </li>
  62. <li class="nav-item">
  63. <a class="nav-link" data-toggle="tab" href="#mbbj" role="tab">模板布局</a>
  64. </li>
  65. <li class="nav-item">
  66. <a class="nav-link" data-toggle="tab" href="#zbys" role="tab">指标映射</a>
  67. </li>
  68. <li class="nav-item">
  69. <a class="nav-link" data-toggle="tab" href="#zbbf" role="tab">指标摆放</a>
  70. </li>
  71. <li class="nav-item">
  72. <a class="nav-link" data-toggle="tab" href="#sjcl" role="tab">数据预处理</a>
  73. </li>
  74. <li class="nav-item">
  75. <a class="nav-link" data-toggle="tab" href="#jss" role="tab">计算式</a>
  76. </li>
  77. <li class="nav-item">
  78. <a class="nav-link" data-toggle="tab" href="#mbdx" role="tab">模板JS对象</a>
  79. </li>
  80. </ul>
  81. <div class="tab-content">
  82. <!--模板信息-->
  83. <div class="tab-pane active" id="mbxx" role="tabpanel">
  84. <div class="main-data">
  85. <div class="p-3">
  86. <div class="form-group">
  87. <label>报表名称</label>
  88. <input class="form-control form-control-sm" placeholder="输入报表名称">
  89. </div>
  90. <div class="form-group">
  91. <label>页面</label>
  92. <div class="row">
  93. <div class="input-group input-group-sm col-4">
  94. <div class="input-group-addon">纸张</div>
  95. <select class="form-control input-sm"><option>A3</option><option>A4</option></select>
  96. </div>
  97. <div class="input-group input-group-sm col-4">
  98. <div class="input-group-addon">方向</div>
  99. <select class="form-control input-sm"><option>横向</option><option>竖向</option></select>
  100. </div>
  101. <div class="input-group input-group-sm col-4">
  102. <div class="input-group-addon">单位</div>
  103. <select class="form-control input-sm"><option>CM</option></select>
  104. </div>
  105. </div>
  106. </div>
  107. <div class="form-group">
  108. <label>显示调整</label>
  109. <div class="row">
  110. <div class="input-group input-group-sm col-4">
  111. <div class="input-group-addon">分栏</div>
  112. <select class="form-control input-sm"><option>1</option><option>2</option></select>
  113. </div>
  114. </div>
  115. </div>
  116. <div class="row">
  117. <div class="form-group col-4">
  118. <label>显示行-高度</label>
  119. <input class="form-control form-control-sm">
  120. </div>
  121. <div class="form-group col-4">
  122. <label>显示列 - 宽度</label>
  123. <input class="form-control form-control-sm">
  124. </div>
  125. </div>
  126. </div>
  127. <!--图标-->
  128. <div class="p-3">
  129. <p><i class="icon zyfont zy-ic_format_bold"></i>粗体 / <i class="icon zyfont zy-ic_format_italic"></i>斜体 / <i class="icon zyfont zy-ic_format_underlined"></i>下划线 </p>
  130. <p><i class="icon zyfont zy-ic_format_align_left"></i>左对齐 / <i class="icon zyfont zy-ic_format_align_center"></i>中对齐 / <i class="icon zyfont zy-ic_format_align_right"></i>右对齐</p>
  131. <p><i class="icon zyfont zy-ic_vertical_align_top"></i>上对齐 / <i class="icon zyfont zy-ic_vertical_align_center"></i>中对齐 / <i class="icon zyfont zy-ic_vertical_align_bottom"></i>下对齐</p>
  132. <p><i class="icon zyfont zy-ic_border_outer"></i> 外侧框线 / <i class="icon zyfont zy-ic_border_clear"></i> 无框线 / <i class="icon zyfont zy-ic_border_left"></i> 左框线 / <i class="icon zyfont zy-ic_border_top"></i> 上框线 / <i class="icon zyfont zy-ic_border_right"></i> 右框线 / <i class="icon zyfont zy-ic_border_bottom"></i> 下框线 </p>
  133. <p> <i class="icon zyfont zy-ic_format_shapes"></i>缩放(Shrink) / <i class="icon zyfont zy-ic_exposure_zero"></i>显示0 / <i class="icon zyfont zy-ic_wrap_text"></i>自动折行(Wrap)</p>
  134. </div>
  135. <!--图标-->
  136. </div>
  137. </div>
  138. <!--模板布局-->
  139. <div class="tab-pane" id="mbbj" role="tabpanel">
  140. <div class="main-data">
  141. <div class="p-3">
  142. <div class="ztree-warp" style="height:300px">
  143. ztree 保留空间
  144. </div>
  145. <div class="row mt-5">
  146. <div class="form-group col-3">
  147. <label>边框样式</label>
  148. <select class="form-control form-control-sm"><option>空白</option></select>
  149. </div>
  150. <div class="form-group col-2">
  151. <label>位置</label>
  152. <select class="form-control form-control-sm"><option>上</option></select>
  153. </div>
  154. <div class="form-group col-3">
  155. <label>出现频率</label>
  156. <select class="form-control form-control-sm"><option>每页</option></select>
  157. </div>
  158. <div class="form-group col-2">
  159. <label>高度</label>
  160. <input class="form-control form-control-sm">
  161. </div>
  162. <div class="form-group col-2">
  163. <label>宽度</label>
  164. <input class="form-control form-control-sm">
  165. </div>
  166. </div>
  167. </div>
  168. </div>
  169. </div>
  170. <!--指标映射-->
  171. <div class="tab-pane" id="zbys" role="tabpanel">
  172. <div class="main-data">
  173. <div class="p-3">
  174. <div class="row">
  175. <div class="col-6">
  176. <span>报表映射指标(勾选表示:主从关系的ID关联指标)</span>
  177. <div class="ztree-warp" style="height:400px">
  178. ztree 保留空间
  179. </div>
  180. </div>
  181. <div class="col-6">
  182. <span>可映射指标</span>
  183. <div class="ztree-warp" style="height:400px">
  184. ztree 保留空间
  185. </div>
  186. </div>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. <!--指标摆放-->
  192. <div class="tab-pane" id="zbbf" role="tabpanel">
  193. <div class="main-data">
  194. <div class="p-3">
  195. <div class="row">
  196. <div class="col-6">
  197. <div class="ztree-warp" style="height:300px">
  198. ztree 保留空间
  199. </div>
  200. </div>
  201. <div class="col-6">
  202. <div class="row">
  203. <div class="col-12">
  204. <div class="ztree-warp" style="height:110px">
  205. ztree 保留空间
  206. </div>
  207. </div>
  208. <div class="col-12 mt-4">
  209. <div class="ztree-warp" style="height:160px">
  210. ztree 保留空间
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. <div class="row mt-3">
  217. <div class="form-group col-2">
  218. <label>字体选择</label>
  219. <input class="form-control form-control-sm" type="text">
  220. </div>
  221. <div class="form-group col-2">
  222. <label>字体名称</label>
  223. <input class="form-control form-control-sm" type="text">
  224. </div>
  225. <div class="form-group col-2">
  226. <label>字体大小</label>
  227. <input class="form-control form-control-sm" type="text">
  228. </div>
  229. <div class="form-group col-3">
  230. <label>字体其他特性</label>
  231. <div class="form-check">
  232. <label class="form-check-label">
  233. <input type="checkbox" class="form-check-input">
  234. 粗体
  235. </label>
  236. <label class="form-check-label">
  237. <input type="checkbox" class="form-check-input">
  238. 斜体
  239. </label>
  240. <label class="form-check-label">
  241. <input type="checkbox" class="form-check-input">
  242. 下划线
  243. </label>
  244. </div>
  245. </div>
  246. </div>
  247. <div class="row">
  248. <div class="form-group col-2">
  249. <label>边框样式</label>
  250. <select class="form-control form-control-sm"><option>正常</option></select>
  251. </div>
  252. <div class="form-group col-2">
  253. <label>左边</label>
  254. <input class="form-control form-control-sm">
  255. </div>
  256. <div class="form-group col-2">
  257. <label>右边</label>
  258. <input class="form-control form-control-sm">
  259. </div>
  260. <div class="form-group col-2">
  261. <label>上边</label>
  262. <input class="form-control form-control-sm">
  263. </div>
  264. <div class="form-group col-2">
  265. <label>下边</label>
  266. <input class="form-control form-control-sm">
  267. </div>
  268. </div>
  269. <div class="row">
  270. <div class="form-group col-2">
  271. <label>控制选择</label>
  272. <select class="form-control form-control-sm"><option>正文内容</option></select>
  273. </div>
  274. <div class="form-group col-2">
  275. <label>横向对齐</label>
  276. <select class="form-control form-control-sm"><option>右</option></select>
  277. </div>
  278. <div class="form-group col-2">
  279. <label>纵向对齐</label>
  280. <select class="form-control form-control-sm"><option>下</option></select>
  281. </div>
  282. <div class="form-group col-3">
  283. <label>控制其他特性</label>
  284. <div class="form-check">
  285. <label class="form-check-label">
  286. <input class="form-check-input" type="checkbox">
  287. 自动缩放
  288. </label>
  289. <label class="form-check-label">
  290. <input class="form-check-input" type="checkbox">
  291. 显示0
  292. </label>
  293. <label class="form-check-label">
  294. <input class="form-check-input" type="checkbox">
  295. 自动折行
  296. </label>
  297. </div>
  298. </div>
  299. </div>
  300. <div class="row">
  301. <div class="form-group col">
  302. <label>左</label>
  303. <div class="input-group input-group-sm">
  304. <div class="input-group-addon">
  305. <div class="form-check m-0">
  306. <label class="form-check-label">
  307. <input class="form-check-input" type="checkbox">
  308. 百分比
  309. </label>
  310. </div>
  311. </div>
  312. <input class="form-control" type="number">
  313. </div>
  314. </div>
  315. <div class="form-group col">
  316. <label>右</label>
  317. <div class="input-group input-group-sm">
  318. <div class="input-group-addon">
  319. <div class="form-check m-0">
  320. <label class="form-check-label">
  321. <input class="form-check-input" type="checkbox">
  322. 百分比
  323. </label>
  324. </div>
  325. </div>
  326. <input class="form-control" type="number">
  327. </div>
  328. </div>
  329. <div class="form-group col">
  330. <label>上</label>
  331. <div class="input-group input-group-sm">
  332. <div class="input-group-addon">
  333. <div class="form-check m-0">
  334. <label class="form-check-label">
  335. <input class="form-check-input" type="checkbox">
  336. 百分比
  337. </label>
  338. </div>
  339. </div>
  340. <input class="form-control" type="number">
  341. </div>
  342. </div>
  343. <div class="form-group col">
  344. <label>下</label>
  345. <div class="input-group input-group-sm">
  346. <div class="input-group-addon">
  347. <div class="form-check m-0">
  348. <label class="form-check-label">
  349. <input class="form-check-input" type="checkbox">
  350. 百分比
  351. </label>
  352. </div>
  353. </div>
  354. <input class="form-control" type="number">
  355. </div>
  356. </div>
  357. <div class="form-group col-2">
  358. <label></label>
  359. <div class="form-check">
  360. <label class="form-check-label">
  361. <input class="form-check-input" type="checkbox">
  362. 自动行高
  363. </label>
  364. </div>
  365. </div>
  366. </div>
  367. <div class="row">
  368. <div class="form-group col-2">
  369. <label>前缀</label>
  370. <input class="form-control form-control-sm">
  371. </div>
  372. <div class="form-group col-2">
  373. <label>后缀</label>
  374. <input class="form-control form-control-sm">
  375. </div>
  376. <div class="form-group col-2">
  377. <label>格式</label>
  378. <input class="form-control form-control-sm">
  379. </div>
  380. <div class="form-group col-2">
  381. <label>默认值</label>
  382. <input class="form-control form-control-sm">
  383. </div>
  384. </div>
  385. </div>
  386. </div>
  387. </div>
  388. <!--数据预处理-->
  389. <div class="tab-pane" id="sjcl" role="tabpanel">
  390. <div class="main-data">
  391. <div class="p-3">
  392. <div class="row">
  393. <div class="col-12">
  394. <a class="btn btn-secondary btn-sm mb-1"><i class=" fa fa-plus-square"></i> 预处理环节</a>
  395. </div>
  396. <div class="col-6">
  397. <div class="ztree-warp" style="height:180px">
  398. ztree 保留空间
  399. </div>
  400. </div>
  401. <div class="col-6">
  402. <div class="ztree-warp" style="height:180px">
  403. ztree 保留空间
  404. </div>
  405. </div>
  406. </div>
  407. <div class="row mt-3">
  408. <div class="input-group input-group-sm col-4">
  409. <div class="input-group-addon">预处理数据对象</div>
  410. <select class="form-control input-sm" id="select_mapping_data" onchange="preHandleObj.onChangeDataMappingObj(this, 'top')">
  411. <option value="bills">清单</option><option value="ration">定额</option><option value="ration_glj">定额人材机</option><option value="projectGLJ">项目人材机</option></select>
  412. </div>
  413. <div class="input-group input-group-sm col-4">
  414. <div class="input-group-addon">排序方式</div>
  415. <select class="form-control input-sm" id="select_sort_types" onchange="preHandleSortObj.onSortTypeChange(this)">
  416. <option value="normal">普通</option>
  417. <option value="tree">树结构</option>
  418. <option value="accord_to_parent">依据上级</option>
  419. <option value="self_define">自定义排序</option>
  420. </select>
  421. </div>
  422. </div>
  423. <div class="row mt-3">
  424. <div class="col-6">
  425. <span clas="mb-1">清单顶节点(全空白表示全部)</span>
  426. <div class="ztree-warp" style="height:180px">
  427. ztree 保留空间
  428. </div>
  429. </div>
  430. <div class="col-6">
  431. <span clas="mb-1">清单其他节点(全空白表示全部)</span>
  432. <div class="ztree-warp" style="height:180px">
  433. ztree 保留空间
  434. </div>
  435. </div>
  436. </div>
  437. </div>
  438. </div>
  439. </div>
  440. <!--计算式-->
  441. <div class="tab-pane" id="jss" role="tabpanel">
  442. <div class="main-data">
  443. <div class="p-3">
  444. <div class="row">
  445. <div class="col-12">
  446. <span class="mb-1">计算式</span>
  447. <div class="ztree-warp" style="height:140px">
  448. ztree 保留空间
  449. </div>
  450. </div>
  451. </div>
  452. <div class="row mt-3">
  453. <div class="col-4">
  454. <div class="input-group input-group-sm">
  455. <select class="form-control"><option>转换大小写金额</option></select>
  456. <span class="input-group-btn">
  457. <button class="btn btn-primary" type="button">套用</button>
  458. </span>
  459. </div>
  460. </div>
  461. </div>
  462. <div class="row mt-3">
  463. <div class="form-group col-3">
  464. <label>计算式执行点</label>
  465. <select class="form-control form-control-sm"><option>预运行</option></select>
  466. </div>
  467. <div class="form-group col-3">
  468. <label>格式串(format)</label>
  469. <input class="form-control form-control-sm">
  470. </div>
  471. <div class="form-group col-12">
  472. <textarea class="form-control" rows="8"></textarea>
  473. </div>
  474. </div>
  475. </div>
  476. </div>
  477. </div>
  478. <!--模板JS对象-->
  479. <div class="tab-pane" id="mbdx" role="tabpanel">
  480. <div class="main-data">
  481. <div class="p-3">
  482. <div class="mb-3">
  483. <a href="#" class="btn btn-sm btn-primary">生成JS文本</a>
  484. <a href="#" class="btn btn-sm btn-primary">导入JS文本</a>
  485. </div>
  486. <div class="form-group">
  487. <textarea class="form-control" rows="21"></textarea>
  488. </div>
  489. </div>
  490. </div>
  491. </div>
  492. </div>
  493. </div>
  494. </div>
  495. </div>
  496. </div>
  497. </div>
  498. </div>
  499. </div>
  500. </div>
  501. <!--弹出新建模板-->
  502. <div class="modal fade" id="myModal" data-backdrop="static">
  503. <div class="modal-dialog" role="document">
  504. <div class="modal-content">
  505. <div class="modal-header">
  506. <h5 class="modal-title">创建新模板</h5>
  507. </div>
  508. <div class="modal-body">
  509. <div class="form-group">
  510. <label>模板类型</label>
  511. <div class="row">
  512. <div class="form-check col-4">
  513. <label class="form-check-label">
  514. <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 流水式表
  515. </label>
  516. </div>
  517. <div class="form-check col-4">
  518. <label class="form-check-label">
  519. <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 账单式表
  520. </label>
  521. </div>
  522. <div class="form-check col-4">
  523. <label class="form-check-label">
  524. <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 交叉表
  525. </label>
  526. </div>
  527. </div>
  528. </div>
  529. </div>
  530. <div class="modal-footer text-xs-center">
  531. <button class="btn btn-secondary" data-dismiss="modal">取消</button>
  532. <button href="project-management.html" class="btn btn-primary">创建</button>
  533. </div>
  534. </div>
  535. </div>
  536. </div>
  537. <!--弹出历史记录-->
  538. <div class="modal fade" id="history" data-backdrop="static">
  539. <div class="modal-dialog" role="document">
  540. <div class="modal-content">
  541. <div class="modal-header">
  542. <h5 class="modal-title"><i class="fa fa-history"></i> 历史记录</h5>
  543. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  544. <span aria-hidden="true">&times;</span>
  545. </button>
  546. </div>
  547. <div class="modal-body modal-fixed-height">
  548. <div class="list-group mb-3">
  549. <div class="list-group-item list-group-item-action flex-column align-items-start">
  550. <div class="d-flex w-100 justify-content-between">
  551. <h6 class="mb-1"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> 编辑</h6>
  552. <span>2017-04-05 11:00:03</span>
  553. </div>
  554. <p class="mb-1">陈特</p>
  555. </div>
  556. <div class="list-group-item list-group-item-action flex-column align-items-start">
  557. <div class="d-flex w-100 justify-content-between">
  558. <h6 class="mb-1"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> 编辑</h6>
  559. <span>2017-04-05 11:00:03</span>
  560. </div>
  561. <p class="mb-1">陈特</p>
  562. </div>
  563. <div class="list-group-item list-group-item-action flex-column align-items-start">
  564. <div class="d-flex w-100 justify-content-between">
  565. <h6 class="mb-1"><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 发布</h6>
  566. <span>2017-04-05 10:13:13</span>
  567. </div>
  568. <p class="mb-1">陈特</p>
  569. </div>
  570. <div class="list-group-item list-group-item-action flex-column align-items-start">
  571. <div class="d-flex w-100 justify-content-between">
  572. <h6 class="mb-1"><i class="fa fa-plus-square-o" aria-hidden="true"></i> 创建</h6>
  573. <span>2017-04-05 10:13:13</span>
  574. </div>
  575. <p class="mb-1">陈特</p>
  576. </div>
  577. </div>
  578. </div>
  579. <div class="modal-footer">
  580. <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
  581. </div>
  582. </div>
  583. </div>
  584. </div>
  585. <!-- JS. -->
  586. <script src="js/jquery/jquery.min.js"></script>
  587. <script src="js/tether/tether.min.js"></script>
  588. <script src="js/bootstrap/bootstrap.min.js"></script>
  589. <script src="js/global.js"></script>
  590. <!-- zTree -->
  591. <script type="text/javascript" src="js/ztree/jquery.ztree.core.js"></script>
  592. <script type="text/javascript" src="js/ztree/jquery.ztree.excheck.js"></script>
  593. <!--弹出模板类型-->
  594. <script type="text/javascript">
  595. $('#myModal').modal('show')
  596. </script>
  597. <!-- 演示zTree -->
  598. <SCRIPT type="text/javascript">
  599. <!--
  600. var setting = {
  601. view: {
  602. showIcon: false
  603. },
  604. data: {
  605. simpleData: {
  606. enable: true
  607. }
  608. }
  609. };
  610. var zNodes =[
  611. { id:1, pId:0, name:"父节点1 - 展开", open:true},
  612. { id:11, pId:1, name:"父节点11 - 折叠"},
  613. { id:111, pId:11, name:"叶子节点111叶子节点111叶子节点111叶子节点111叶子节点111叶子节点111"},
  614. { id:112, pId:11, name:"叶子节点112"},
  615. { id:113, pId:11, name:"叶子节点113"},
  616. { id:114, pId:11, name:"叶子节点114"},
  617. { id:12, pId:1, name:"父节点12 - 折叠"},
  618. { id:121, pId:12, name:"叶子节点121"},
  619. { id:122, pId:12, name:"叶子节点122"},
  620. { id:123, pId:12, name:"叶子节点123"},
  621. { id:124, pId:12, name:"叶子节点124"},
  622. { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
  623. { id:2, pId:0, name:"父节点2 - 折叠"},
  624. { id:21, pId:2, name:"父节点21 - 展开", open:true},
  625. { id:211, pId:21, name:"叶子节点211"},
  626. { id:212, pId:21, name:"叶子节点212"},
  627. { id:213, pId:21, name:"叶子节点213"},
  628. { id:214, pId:21, name:"叶子节点214"},
  629. { id:22, pId:2, name:"父节点22 - 折叠"},
  630. { id:221, pId:22, name:"叶子节点221"},
  631. { id:222, pId:22, name:"叶子节点222"},
  632. { id:223, pId:22, name:"叶子节点223"},
  633. { id:224, pId:22, name:"叶子节点224"},
  634. { id:23, pId:2, name:"父节点23 - 折叠"},
  635. { id:231, pId:23, name:"叶子节点231"},
  636. { id:232, pId:23, name:"叶子节点232"},
  637. { id:233, pId:23, name:"叶子节点233"},
  638. { id:234, pId:23, name:"叶子节点234"},
  639. { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
  640. ];
  641. function showIconForTree(treeId, treeNode) {
  642. return !treeNode.isParent;
  643. };
  644. $(document).ready(function(){
  645. $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  646. });
  647. //-->
  648. </SCRIPT>
  649. </body>
  650. <script type="text/javascript">
  651. autoFlashHeight();
  652. </script>
  653. </html>