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 用法小例