treetable 用法小例
阿新 • • 發佈:2017-09-03
tle 編輯 reat isn eight mode gety 插入 -i
插件地址:http://pan.baidu.com/s/1kVf0Kcf
<script src="/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<#include "/common/head.html"/> <#include "/common/js.html"> <link rel="stylesheet" type="text/css" href="/plugins/jquery-treetable-master/css/screen.css"> <link rel="stylesheet" type="text/css" href="/plugins/jquery-treetable-master/css/jquery.treetable.css"> <link rel="stylesheet" type="text/css" href="/plugins/jquery-treetable-master/css/jquery.treetable.theme.default.css"> <style type="text/css"> </style> <!-- Content Header (Page header) --> <section class="content-header"> <h1> <small>財務管理 > 財務分類管理</small> </h1> </section> <section class="content"> <!-- Your Page Content Here --> <div class="row"> <div class="col-xs-12"> <div class="box"> <input type="button" value="添加一級分類" onclick="addYJFL()"> <table id="treetable"> <thead> <tr> <th>分類名稱</th> <th>操作</th> </tr> </thead> <tbody> <#list dataList as o> <#if o.parentId == 1> <tr data-tt-id="${(o.id)!}"> <!--<td></span>${(o.id)!}</td>--> <td><span class=‘folder‘></span>${(o.classifyName)!}</td> <!--<td>${(o.parentId)!}</td>--> <td> <button onclick="edit(‘${(o.id)!}‘)">編輯</button> <button onclick="delte(‘${(o.id)!}‘)">刪除</button> <button onclick="addEJFL(‘${(o.id)!}‘)">添加二級分類</button> </td> </tr> <#else> <tr data-tt-id="${(o.id)!}" data-tt-parent-id="${(o.parentId)!}"> <!--<td><span class=‘file‘></span>${(o.id)!}</td>--> <td><span class=‘file‘></span>${(o.classifyName)!}</td> <!--<td>${(o.parentId)!}</td>--> <td> <button onclick="edit(‘${(o.id)!}‘)">編輯</button> <button onclick="delte(‘${(o.id)!}‘)">刪除</button> </td> </tr> </#if> </#list> </tbody> </table> </div> </div> </div> <!--添加一級分類--> <div class="modal fade" id="detailModel"> <div class="modal-dialog modal-full " style="z-index:9999;"> <div class="modal-content" style="width: 400px;height: 200px;margin-left: -50px"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="supplierTitleInfo">添加分類</h4> </div> <div class="form-group"> <label for="classifyName" class="col-sm-2 control-label"> 分類名稱</label> <div class="col-sm-10"> <input type="hidden" id="flagId" name="flagId"> <input type="hidden" id="classifyId" name="classifyId"> <input type="text" id="classifyName" name="classifyName" class="form-control" style="width:200px;" placeholder="分類名稱" data-rule="分類名稱必填:required;"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" onclick="queding()">確定 </button> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> </div> </div> </div> </div> </section> <!-- <table id="treetable"> <tr data-tt-id="1"> <td>Parent</td> </tr> <tr data-tt-id="2" data-tt-parent-id="1"> <td>Child</td> </tr> </table>--> <script src="/plugins/jquery-treetable-master/jquery.treetable.js"></script> <script> function addYJFL() { $(‘#flagId‘).val("addyjfl"); $("#classifyName").val(""); $(‘#classifyId‘).val(""); $("#detailModel").modal(‘show‘); } function queding() { var flagId = $(‘#flagId‘).val(); console.log(flagId); if (flagId == "edit") { // $.ajax({ type: "POST", url: "/account/classify/editYJFL", data: { classifyName: $("#classifyName").val(), id: $(‘#classifyId‘).val() }, dataType: ‘json‘, success: function (data) { $("#detailModel").modal(‘hide‘); alert("修改成功"); window.location.reload(); }, error: function () { alert("錯了"); } }); } else if (flagId == "addyjfl") { // $.ajax({ type: "POST", url: "/account/classify/addYJFL", data: {classifyName: $("#classifyName").val()}, dataType: ‘json‘, success: function (data) { $("#detailModel").modal(‘hide‘); alert("添加成功"); window.location.reload(); }, error: function () { alert("錯了"); } }); } else if (flagId == "addEJFL") { $.ajax({ type: "POST", url: "/account/classify/addEJFL", data: { classifyName: $("#classifyName").val(), parentId: $(‘#classifyId‘).val() }, dataType: ‘json‘, success: function (data) { $("#detailModel").modal(‘hide‘); alert("添加成功"); window.location.reload(); }, error: function () { alert("錯了"); } }); } } function addEJFL(id) { $(‘#flagId‘).val("addEJFL"); $(‘#classifyId‘).val(id); $("#classifyName").val(""); $("#detailModel").modal(‘show‘); } function edit(id) { $.ajax({ type: "POST", url: "/account/classify/getYJFL", data: {id: id}, dataType: ‘json‘, success: function (data) { $(‘#classifyId‘).val(data[0].id); $(‘#classifyName‘).val(data[0].classifyName); $(‘#flagId‘).val("edit"); $("#detailModel").modal(‘show‘); }, error: function () { alert("錯了"); } }); } function delte(id) { alert("確定刪除?"); $.ajax({ type: "POST", url: "/account/classify/delte", data: {id: id}, dataType: ‘json‘, success: function (data) { window.location.reload(); }, error: function () { alert("錯了"); } }); } </script> <script> $("#treetable").treetable({ expandable: true,// 展示 initialState: "expanded",//默認打開所有節點 stringCollapse: ‘關閉‘, stringExpand: ‘展開‘, onNodeExpand: function () {// 分支展開後的回調函數 var node = this; //判斷當前節點是否已經擁有子節點 var childSize = $("#treetable").find("[data-tt-parent-id=‘" + node.id + "‘]").length; if (childSize > 0) { return; } var data = "pageId=" + node.id; // Render loader/spinner while loading 加載時渲染 $.ajax({ loading: false, sync: false,// Must be false, otherwise loadBranch happens after showChildren? // url: context + "/document/loadChild.json", data: data, success: function (result) { if (0 == result.code) { if (!com.isNull(result.body)) { if (0 == eval(result.body[‘chilPages‘]).length) {//不存在子節點 var $tr = $("#treetable").find("[data-tt-id=‘" + node.id + "‘]"); $tr.attr("data-tt-branch", "false");// data-tt-branch 標記當前節點是否是分支節點,在樹被初始化的時候生效 $tr.find("span.indenter").html("");// 移除展開圖標 return; } var rows = this.getnereateHtml(result.body[‘chilPages‘]); $("#treetable").treetable("loadBranch", node, rows);// 插入子節點 $("#treetable").treetable("expandNode", node.id);// 展開子節點 } } else { alert(result.tip); } } }); } }); </script>
treetable 用法小例